Bu kural, PageSpeed Insights, sayfadaki resimlerin görsel kalitelerini önemli ölçüde etkilemeden dosya boyutunu küçültmek için optimize edilebileceğini algıladığında tetiklenir.
Genel bakış
Genellikle bir sayfada indirilen baytların çoğunu resimler oluşturur. Sonuç olarak, resimlerin optimize edilmesi genellikle en büyük bayt tasarruflarından ve performans iyileştirmelerinden bazılarını sağlayabilir: Tarayıcının indirmesi gereken bayt sayısı ne kadar az olursa, istemcinin bant genişliği için o kadar az rekabet ve tarayıcı, içeriği o kadar hızlı indirip oluşturabilir.
Öneriler
Resim öğeleriniz için optimum biçimi ve optimizasyon stratejisini bulmak amacıyla, kodlanan veri türü, resim biçimi özellikleri, kalite ayarları, çözünürlük gibi birçok boyutta dikkatli bir analiz yapmanız gerekir. Ayrıca, bazı resimlerin vektör biçiminde en iyi şekilde sunulup sunulmayacağını, istenen efektlerin CSS aracılığıyla elde edilip edilemeyeceğini ve her cihaz türü için uygun şekilde ölçeklendirilmiş öğelerin nasıl sunulabileceğini göz önünde bulundurmanız gerekir.
Tüm resim türleri için optimizasyon
- Duyarlı resimler sunmaya yönelik en iyi uygulamaları takip edin
- Tek tek resimler için resim optimizasyonu kontrol listesini uygulayın
GIF, PNG ve JPEG resimleri için optimizasyonlar
GIF, PNG ve JPEG biçimleri tüm internet resim trafiğinin 96%'sını oluşturur. Popülerliklerinden dolayı PageSpeed Insights belirli optimizasyon önerileri sağlar. Size kolaylık olması açısından, optimize edilmiş resimleri doğrudan PageSpeed Insights'tan indirebilirsiniz (modpagespeed.com'daki resim optimizasyonu kitaplığını kullanır).
ImageMagick tarafından hazırlanan ve benzer optimizasyonlar uygulayabilen convert ikili programı gibi araçları da kullanabilirsiniz. Aşağıdaki örnek talimatları inceleyin.
Üçüncü taraf araçları kullanıyorsanız ve görselleriniz zaten çok iyi optimize edilmişse dönüştürme işleminin resimlerinizi daha büyük hale getirebileceğini lütfen unutmayın. Bu durumda lütfen orijinallerinizi kullanın.
GIF ve PNG, sıkıştırma işlemi sonucunda resimlerde herhangi bir görsel değişiklik yapılmadığından kayıpsız biçimlerdir. PNG, hareketsiz resimlerde daha iyi görsel kaliteyle daha iyi bir sıkıştırma oranı sağlar. Animasyonlu resimlerde daha iyi bir sıkıştırma elde etmek için GIF yerine video öğesi kullanabilirsiniz.
- Orijinal dosya animasyonlu veya çok küçük (birkaç yüz bayttan az) değilse GIF'i her zaman PNG'ye dönüştürün.
- GIF ve PNG'nin hepsi opaksa alfa kanalını kaldırın.
Örneğin, aşağıdaki komutla GIF ve PNG resimlerinizi optimize etmek için ikili dönüştürme işlevini kullanabilirsiniz (parantez içindeki parametreler isteğe bağlıdır):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG kayıplı bir biçimdir. Sıkıştırma işlemi, resmin görsel ayrıntılarını kaldırır ancak sıkıştırma oranı GIF veya PNG'den 10 kat daha büyük olabilir.
- Daha yüksek olsaydı kaliteyi 85'e düşürün. 85'ten yüksek kaliteyle resim hızlı bir şekilde büyür ve görsel iyileşme az olur.
- İnsan görsel sistemi parlaklığa kıyasla renklere daha az duyarlı olduğundan Renk örneklemesini 4:2:0'a düşürün.
- 10.000 bayttan büyük resimler için aşamalı biçim kullanın. Progresif JPEG genellikle büyük resimler için referans JPEG'den daha yüksek sıkıştırma oranına sahiptir ve kademeli olarak oluşturma avantajlarına sahiptir.
- Resim siyah beyazsa gri tonlamalı renk alanını kullanın.
Örneğin, aşağıdaki komutla JPEG resimlerinizi optimize etmek için ikili dönüştürme işlevini kullanabilirsiniz (parantez içindeki parametreler isteğe bağlıdır):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Geri bildirim
Bu sayfayı yararlı buldunuz mu?