Lighthouse raporunuzun Fırsatlar bölümünde, optimize edilmemiş tüm resimler kibibayt (KiB) cinsinden potansiyel tasarruflarla birlikte listelenir. Sayfanın daha hızlı yüklenmesi ve daha az veri kullanması için aşağıdaki resimleri optimize edin:
Lighthouse, resimleri optimize edilebilir olarak nasıl işaretler?
Lighthouse, sayfadaki tüm JPEG veya BMP resimleri toplar, her resmin sıkıştırma düzeyini 85'e ayarlar ve ardından orijinal sürümü sıkıştırılmış sürümle karşılaştırır. Olası tasarruf 4 KiB veya daha fazlaysa Lighthouse, resmi optimize edilebilir olarak işaretler.
Resimleri optimize etme
Resimlerinizi optimize etmek için uygulayabileceğiniz birçok adım vardır. Örneğin:
- Görsel CDN'lerini kullanma
- Resimleri sıkıştırma
- Animasyonlu GIF'leri videoyla değiştirme
- Resimleri geç yükleme
- Duyarlı resimler yayınlama
- Resimleri doğru boyutlarda yayınlama
- WebP resimleri kullanma
GUI araçlarını kullanarak resimleri optimize etme
Başka bir yaklaşım da resimlerinizi bilgisayarınıza yüklediğiniz ve GUI olarak çalıştırdığınız bir optimizatörden geçirmektir. Örneğin, ImageOptim'de resimleri kullanıcı arayüzüne sürükleyip bıraktığınızda, resimler kaliteden belirgin bir şekilde ödün vermeden otomatik olarak sıkıştırılır. Küçük bir siteniz varsa ve tüm resimleri manuel olarak optimize edebiliyorsanız bu seçenek muhtemelen yeterlidir.
Squoosh da diğer bir seçenektir. Squoosh, Google Web DevRel Ekibi tarafından yönetilmektedir.
Pakete özel yönergeler
Drupal
Site aracılığıyla yüklenen resimlerin kalitesini korurken boyutlarını otomatik olarak optimize eden ve küçülten bir modül kullanmayı değerlendirin. Ayrıca, sitede oluşturulan tüm resimler için Drupal tarafından sağlanan yerel Duyarlı Resim Stilleri'ni kullandığınızdan emin olun.
Joomla
Kaliteden ödün vermeden resimlerinizi sıkıştıran bir resim optimizasyonu eklentisi kullanmayı düşünün.
Magento
Görüntüleri optimize eden bir üçüncü taraf Magento uzantısı kullanmayı düşünebilirsiniz.
WordPress
Kaliteden ödün vermeden resimlerinizi sıkıştıran bir resim optimizasyonu WordPress eklentisi kullanmayı değerlendirin.