Resimleri verimli bir şekilde kodlayın Uyarısı Nedir?

PageSpeed Insights sayfasında karşılaşılan “Resimleri verimli bir şekilde kodlayın” uyarısı nedir? Bununla ilgili hata nasıl düzeltilir? Google PageSpeed Insights’in “Resimleri verimli bir şekilde kodlayın” (Optimize images) uyarısı, sitenizdeki resimlerin boyutlarının büyük olduğunu ve bu durumun sayfa yüklenme hızını olumsuz etkileyebileceğini belirten bir öneridir. Bu uyarı, genellikle resimlerin gereksiz şekilde büyük boyutlarda olmasından ya da doğru formatta sunulmamasından kaynaklanır. Resimlerin optimize edilmesi, sayfanın daha hızlı yüklenmesini sağlar ve kullanıcı deneyimini iyileştirir.

“Resimleri verimli bir şekilde kodlayın” hatası nasıl düzeltilir?

1. Resimleri Sıkıştırın: Resimlerin boyutlarını küçültmek için sıkıştırma yapabilirsiniz. Fakat sıkıştırma sırasında kalite kaybı olmamasına dikkat etmelisiniz. Çoğu zaman, resimler yüksek çözünürlükte sunulmasına rağmen, kullanıcıların ekran çözünürlüklerine göre çok büyük olabilir. Resimleri sıkıştırmak için şu araçları kullanabilirsiniz:
   • TinyPNG (PNG ve JPEG sıkıştırma)
   • ImageOptim (Mac kullanıcıları için)
   • JPEGmini
   • Squoosh.app (Google’ın sunduğu online sıkıştırma aracı)
2. Doğru Formatı Seçin: Resimlerin doğru formatta olması da büyük önem taşır:
   • JPEG: Fotoğraflar ve renkli resimler için idealdir, sıkıştırma sağlarken fazla kalite kaybı olmaz.
   • PNG: Genellikle grafikler, ikonlar veya saydam arka plana sahip resimler için kullanılır, ancak genelde JPEG’e göre daha büyük boyutlar oluşturur.
   • WebP: Daha yeni bir format olup, JPEG ve PNG’ye göre çok daha küçük boyutlar sunar, aynı kaliteyi koruyarak. WebP formatı, özellikle görsellerin web üzerinde daha hızlı yüklenmesini sağlar.
   • AVIF: WebP’ye benzer şekilde, daha yeni ve sıkıştırma oranı yüksek bir formattır.
3. Responsive (Duyarlı) Resimler Kullanın: Web sayfanızda kullanılan resimlerin farklı ekran boyutlarına göre uyumlu olması gerekir. Bu, özellikle mobil cihazlar için önemlidir. srcset özelliğini kullanarak, farklı ekran çözünürlüklerine göre farklı boyutlarda resimler sunabilirsiniz.

   <img src="resim.jpg"
   srcset="resim-320w.jpg 320w, resim-480w.jpg 480w, resim-800w.jpg 800w"
   sizes="(max-width: 600px) 100vw, 50vw"
   alt="örnek resim">

4. Lazy Loading (Tembel Yükleme) Kullanarak Yükleme Süresini İyileştirin: Resimler, yalnızca kullanıcı sayfayı aşağıya kaydırarak onlara yaklaşınca yüklenmelidir. Bu, sayfa başlangıcında gereksiz yüklemeleri engeller. HTML’de loading="lazy" özelliğini kullanarak lazy loading özelliğini etkinleştirebilirsiniz:

   <img src="resim.jpg" loading="lazy" alt="örnek resim">

5. CDN (İçerik Dağıtım Ağı) Kullanarak Hızlandırın: Resimlerinizi ve diğer medya dosyalarını bir içerik dağıtım ağı (CDN) üzerinden sunmak, yükleme sürelerini hızlandırabilir. CDN’ler, içerikleri coğrafi olarak kullanıcılara daha yakın sunarak daha hızlı erişim sağlar.
6. Resim Boyutlarını İyi Seçin: Kullanıcıların cihazlarında gereksiz yere büyük resimler yüklenmesini engellemek için, resimlerin boyutlarını sayfanın tasarımına uygun şekilde optimize edin. Resimleri sadece ihtiyaç duyulan boyutlarda yükleyin.

Uygulamanızda Bu İyileştirmeleri Yapmak İçin:

1. Resimleri optimize etmek için online araçlar veya grafik yazılımlarını kullanın.
2. Sitenizdeki resimlerin formatlarını gözden geçirin ve WebP gibi yeni ve sıkıştırılmış formatlara geçiş yapın.
3. HTML veya CSS kullanarak duyarlı (responsive) resimlerin uygulanmasını sağlayın.
4. Lazy loading özelliğini etkinleştirin.
5. Sayfa yükleme hızınızı test ederek (örneğin, Google PageSpeed Insights ile) yapılan değişikliklerin etkisini ölçün.

Bu öneriler, sayfanızın hızını artırarak kullanıcı deneyimini iyileştirecektir ve PageSpeed Insights üzerindeki “Resimleri verimli bir şekilde kodlayın” uyarısını ortadan kaldıracaktır.