Boyut nasıl değiştirilir ve büyük görüntüleri toplu olarak sıkıştırır (ve optimize edilir)
Boyutu nasıl değiştireceğinizi ve büyük görüntüleri bir kütleye nasıl sıkıştıracağınızı ve kaliteyi kaybetmeden bilmek ister misiniz? Doğru sayfadasınız. Fotoğraflarınızı optimize ederken ve web sitenizin performansını iyileştirirken nasıl zaman kazanabileceğinize bakalım. Görüntü sıkıştırma, çok fazla kaliteyi düşürmeden boyutunu azaltarak görüntünün ağırlığını azaltma işlemidir. Bu makalede, boyut değiştirmenin ve görüntüleri sıkıştırmanın neden çok önemli olduğunu ve kaliteyi kaybetmeden nasıl kolayca yapılacağını öğreneceksiniz. Bölünelim! Neden daha küçük bir boyutta büyük bir görüntü sıkıştırma bugün web tasarımındaki en büyük trendlerden biri web sitenizde büyük ve güzel bir görüntüye sahip. Ancak web performansı söz konusu olduğunda, bu büyük görüntü genellikle sitenizi yavaşlatmanın ana nedenidir. Yanlış uygulanırsa, bu görüntü tarayıcınız için daha yüksek HTTP istekleri üreten büyük dosyalara sahip olma eğilimindedir.
İşte büyük fotoğrafları sıkıştırırken alabileceğiniz bazı faydalar:
Google’a göre sıkıştırılmış görüntüler hızı artıracak, optimum kullanıcı deneyimi üretecektir. Google PagesPeed Insights, doğru görüntü boyutunu (özellikle hücresel için), ekran dışındaki görüntüleri geciktirmeyi (yavaş yükleme uygulayarak) önerir ve yükleme süresini artırmak istiyorsanız WebP gibi yeni nesil format kullanmayı önerir.
Boyutu değiştirerek ve görüntüleri sıkıştırarak, sayfa boyutunu azaltabilir ve temel web verileri de dahil olmak üzere Google tarafından belirtilen performans metriğini artırabilirsiniz. Görüntünüzü optimize etmek, web sitenizle etkileşime girmeden önce ziyaretçi bekleme süresinin azaltılması (etkileşimli metrik süreye) ve algılanan hız artışı (metrik ilk memnun boya ve en büyük içerik boya). Daha az bant genişliği ve tarayıcınız kullanarak daha küçük görüntü dosyası boyutu Bunu kesinlikle takdir edeceğim! Görüntüleri optimize etmek genellikle web siteniz için en büyük bayt tasarruflarından bazılarını üretebilir: tarayıcı tarafından indirilmesi gereken daha az bayt, bant genişliğinde daha az rekabet – bu da yükleme süresinin daha hızlı olduğu anlamına gelir.
Büyük HD görüntüler için HTTP istekleri de performansı olumsuz etkileyebilir ve bu nedenle WordPress sitenizi hızlandırmak için daha az HTTP istekleri yapmalısınız.
Performansı artırmak için görüntüleri sıkıştırmaya ihtiyaç vardır, ancak diğer taraftan, web siteniz için bulanık görüntüler istemezsiniz, değil mi? Amaç, aşağıdaki örneğimizde olduğu gibi kaliteyi ve optimizasyonu dengeleyen sonuçlar elde etmektir:
Bizi bir sonraki bölüme götürüyor: Kaliteyi kaybetmeden ve feda etmeden görüntünün boyutunu nasıl azaltırsınız? Görüntü kütlesini (PNG ve JPEG) Boyutunun nasıl değiştirilmesi ve sıkıştırılması, dikkate alınması gereken iki ana şey kullanmak istediğiniz sıkıştırma türleri (kayıplı ve kayıpsız) ve dosya formatları (PNG, JPEG, PDF, vb. ). Aşağıda formatın görüntünün boyutunu nasıl etkileyebileceğini görebilirsiniz: format ve dosya boyutu – Kaynak: Sekanti.com PNG ve JPEG görüntülerinizden maksimum sonuçları almak için mevcut birçok araç vardır. Bazıları tüm bu işi kendi adınıza (örneğin: WordPress eklentisi) yapmanıza yardımcı olurken, diğerleri kendi optimizasyonunuzu yapmanıza izin verebilir (örneğin: Photoshop).
Kategori #2 – Boyutu Değiştirmek ve Büyük PNG ve JPEG görüntülerini sıkıştıracak WordPress eklentisi
İlk kategori ile başlayalım. Kategori #1 – PNG ve JPEG görüntülerini toplu olarak optimize etmek için web ve yazılım görüntülerini optimize etmek, boyutu değiştirmek ve bazı büyük görüntüleri sıkıştırmak için kullanabileceğiniz yazılım ve çevrimiçi araçlar listesini izleyerek:
PNG ve JPEG görüntülerinizi toplu olarak sıkıştırmak için afinite fotoğrafları.
Dosyayı Aç> Yeni Toplu İşler
Toplu İş Oluşturma – Kaynak: YouTube Kanalları Nasıl Yapılır 2. Toplu sıkıştırılmak istediğiniz tüm resimleri yükleyin ve ihtiyaçlarınıza en uygun biçimi seçin: Toplu İşler Depolama – Kaynak: YouTube kanalları nasıl 3. Yeni Kalite Belirleyin (70 kaliteli korumak için iyi bir sayıdır)
Görüntüleri sıkıştırın ve azaltın (kalite 70) Pratin Review (Mac’te) – Görüntü boyutunuzu toplu olarak değiştirmek için (ancak sıkıştırılmıyor). Önizlemeyi kullanarak tüm resimleri açın Her şeyi seçin
Bir araç> boyut açın ve yeni bir resim boyutu seçin
İş yazılımı önizlemesi tamamlandı! Ortaya çıkan boyut daha küçüktür.
Web sitesi optimizasyonu için kütle görüntü kompresör-toplu nokta ve çekim görüntü kompresör ve dönüştürücü aracı.
Kütle görüntü kompresör ayarları GIMP – Mac ve Windows için ücretsiz popüler görüntü editörü. GIMP, PNG, JPEG ve GIF veya PDF gibi diğer formatları işlemenizi sağlayan toplu mod olarak adlandırılan şeyle birlikte gelir. “Toplu Görüntü (BIMP) eklenti manipülasyonu (BIMP) adlı ücretsiz bir uzantıyı indirip yüklemeniz gerekir. Adımlar çok kolaydır.
Toplu Görüntü Manipülasyonu – Kaynak: Windows Club Photoshop – Boyutu değiştirmek ve PNG ve JPEG görüntülerinizi sıkıştırmak için (bu kaliteyi ve nispeten pahalı).
Adobe Photoshop’u açın, Dosya> Komut Dosyaları> Görüntü İşlemcisi’ni seçin Resmin bulunduğu klasörü seçebilmeniz için klasörü seçin
Boyutu azaltmak için ayarları ayarlayın
Kalite alanında 1 ile 12 arasındaki ayarları seçin (6’nın altında olmamayı öneririm).
“Eylem çalıştır” ı tıklayın
Not: Photoshop dik bir öğrenme eğrisi olabilir, bu nedenle ilgileniyorsanız, görüntü optimizasyonu için Photoshop dışında 10 alternatif ekledik. Zamandan tasarruf etmek istiyorsanız, tüm biçimlendirme ve sıkıştırma ile manuel olarak başa çıkmanıza gerek yok. Neyse ki, bazı eklentiler bu işlerin bir kısmını sizin için otomatik olarak yapıyor! Bizi ikinci kategoriye götürdü: WordPress eklentisi.
Kategori #2 – WordPress eklentisi boyutu değiştirmek ve büyük PNG ve JPEG görüntülerini sıkıştıracak şekilde büyük boyutlu görüntüleri sıkıştırmak için aşağıdaki WordPress eklentilerinden birini kullanabilirsiniz: yani:
Hayal edin (ücretsiz eklentimiz)
Optimol
JPEG & PNG’yi sıkıştırın (küçük PNG)
EWWW
Kısa piksel
Resmush.it
Imagify ile Imagify ile kaliteyi kaybetmeden büyük görüntüler nasıl sıkıştırılır, WordPress’ten ayrılmak zorunda kalmadan boyutu değiştirebilir ve toplu olarak sıkıştırabilirsiniz. Medya menüsünden Kütle Optimizasyonu özelliğinin görünümünü ve hissini alabilmeniz için Imagify panosuna bakalım> kütle optimizasyonu:
Kütle Optimizasyon Özellikleri – Kaynak: Hayal Etme Imagify eklentisini etkinleştirdikten sonra, sıkıştırma seviyenizi seçin ve “Imagif’em All” düğmesini tıklayın. Sıkıştırma seviyesi “agresif” ve kütle optimizasyonu düğmesi – Bunun alabileceğiniz tasarruf türü olduğunu hayal edin Imagify’dan kütle optimizasyon özellikleri kullanırken: yaklaşık%87!
Dosya boyutumun neredeyse% 87’sini Imagify ile tasarruf edin, şimdi bir vitrin “önce ve sonra” yapalım. Büyük görüntüleri toplu olarak sıkıştırın: Mağaza, Hücreseldeki Görüntüim için iki kütle optimizasyon senaryosu çalıştıracağım.:
Senaryo 1 – JPEG Figürü ile Performans Sonuçları (Hayal Etmeden)
Senaryo 2 – WebP görüntüleri ve agresif optimizasyon modları ile toplu görüntü optimizasyonu sonuçları (Imagify ile) Dikkate alacağım araçlar ve metrikler: Ekipman: Google PagePeed Insights ve WebPagetest Metrik: Her fotoğraf için dosya boyutu
En büyük içerik boyası
Sayfa boyutu
HTTP isteyin
Yüklenme zamanı
Senaryo 1 – JPEG Figürü ile Performans Sonuçları (Hayal Etmeden)
9 resim JPEG formatında sunulmuştur
Görüntü optimize edilmedi
Test sitem Hücresel
> 3.6 dtk (turuncu)
http
28 (talebin% 60'ı resimden geliyor)
% 82% )
İşte PagePeed Insights Denetimini çalıştırdıktan sonra aldığım görüntüyü optimize etmenin bir işareti:
Aşağıdaki PSI denetim sorunu sayfa içeriğimin ayrıntıları.Görüntü, talebin% 60'ını ve toplam baytın% 81,5'ini yapmaktan sorumludur: Görüntü tarafından işgal edilen alan (Imagify olmadan) - Kaynak: Web sayfası testi senaryosu 2 - WebP görüntüleri ve agresif optimizasyon modu ile kitle görüntü optimizasyonunun sonuçları ( Imagify ile)
9 Aynı resim, Imagify ile WebP formatına dönüştürülür
Imagify ile kütle optimize edilmiş görüntüler
Görüntülerimizi toplu olarak optimize edelim ve Imagify şunu kullanarak webp'ye dönüştürelim:
Şekil #1
>
200 kb
205 kb
88 kb62 %
Şekil #2
203 KB
127 KB%60
Şekil #3
96 kb
73 kb32%
94 kb49%
Şekil #5
122 kb
74 kb68%
Şekil #6
185 kb
95 KB48%
7
Performans metriklerimiz de daha iyi koşullarda:
İçeriğin en büyük içeriği (LCP)
3.6 s (turuncu)
1.6 (yeşil)
Sayfa Boyutu
1.4 MB
847 kb
28 (resimden% 60 talep geliyor)
16 (resimden% 43 talep gelir)
> 3.7 saniye bayt (görüntüler% 82'ye kadar alan gerektirir)
2.1 saniye bayt (görüntüler boşluk gerektirir %26 kadar)
PageSpeed Insights tarafından işaretlendi: Görüntü Imagify ile Görüntü Geçen Denetim, Imagify'dan gelen kütle optimizasyonu özelliği sayesinde olumlu sonuçlar görebiliriz:
Tüm görüntülerim sıkıştırılmış: boyut daha küçük ve kaliteden ödün vermiyoruz. Sayfa yükleme sürem 3.7 saniyeden 2.1 saniyeye düştü.Mevcut talebin sadece% 43'ü resimden gelir (Hayal Edilmeden% 60).
Görüntüler tüm bayt içeriğinin% 26,5'ini işgal eder (önceki% 82'ye karşı).
Dosya boyutlarını Image-Source ile Azaltma: Web Sayfası Testi Imagify eklentisinin sarılması Boyutu hızlı bir şekilde değiştirmemizi ve büyük görüntüleri doğrudan WordPress panosundan sıkıştırmamızı sağlar. Tüm resimlerimizi otomatik olarak optimize etmek için iki tıklamaya ihtiyacımız var ve bu da dosya boyutumuzun ortalama% 60'ını tasarrufu sağlıyor! Buna ek olarak, Image WordPress görüntüsünüzü Google tarafından önerilen yeni nesil format olan WebP'ye dönüştürebilir. Yavaş site performansının dönüşümle yüklenmesine izin vermeyin. Bugün ücretsiz olarak imajınızı toplu olarak optimize etmeye başlayın!
