Modern web performansı, büyük ölçüde, görsellere önemli ölçüde odaklanılarak, kaynakların optimizasyonu tarafından yönlendirilir. Görüntüler, web siteleri tarafından kullanılan verilerin önemli bir bölümünü temsil eder. Bu nedenle, görüntüleri en verimli biçimlerde sunmak, site performansı, kullanıcı deneyimi ve SEO sıralaması üzerinde derin bir etkiye sahip olabilir. Google'ın Lighthouse denetim aracı, bu optimizasyonun gerçekleştirilmesine yardımcı olacak önemli bilgiler sağlar; bunlardan biri, "Görüntüleri modern biçimlerde sunma" fırsatıdır. Lighthouse raporunun Fırsatlar bölümünde yer alan bu özellik, bir sitedeki eski biçimlerdeki tüm görüntüleri tanımlar ve bu görüntülerin AVIF ve WebP gibi modern biçimlerde sunulmasıyla elde edilebilecek olası performans kazanımlarını önerir.
Geleneksel Görüntü Biçimleriyle İlgili Sorun
Birçok web sitesi, resimleri için hala JPEG, PNG ve GIF gibi geleneksel biçimleri kullanıyor. Bu biçimlerin güçlü yanları olmasına ve web'e yıllarca hizmet etmesine rağmen, sıkıştırma ve kalite söz konusu olduğunda bazı modern biçimler kadar verimli değiller. Bu eski biçimler genellikle daha büyük dosya boyutlarına yol açar ve bu da özellikle daha yavaş internet bağlantısı olan veya mobil cihazlar kullanan kullanıcılar için site performansını yavaşlatabilir.
Modern Görüntü Formatlarının Vaadi
Son yıllarda, web görüntüleri için üstün seçenekler olarak iki biçim ortaya çıktı: AVIF ve WebP.
AVIF veya AV1 Görüntü Dosyası Formatı, Alliance for Open Media tarafından geliştirilen AV1 video kodlama formatına dayalıdır. Eski formatlara kıyasla önemli sıkıştırma kazanımları sunar, yani çok daha küçük dosya boyutlarında yüksek kaliteli görüntüler sunabilir. Bu, AVIF'i ağır resim içeriğine sahip web siteleri için mükemmel bir seçim haline getirir.
Google tarafından geliştirilen WebP ayrıca, özellikle PNG'den önemli ölçüde daha iyi performans gösterdiği şeffaflık içeren görüntüler (alfa kanalları) için etkileyici sıkıştırma yetenekleri sunar. Bu biçim hem kayıplı hem de kayıpsız sıkıştırmayı destekler ve geliştiricilerin görüntü kalitesini ve dosya boyutunu ihtiyaçlarına göre dengelemesine olanak tanır.
Lighthouse ile Fırsatları Belirleme
Lighthouse aracı, site performansını iyileştirme fırsatlarını belirlemede etkilidir. Bir sitenin kaynaklarını analiz ederek, şu anda eski biçimlerde sunulan tüm resimlerin bir listesini sağlar. Bu ayrıntılı rapor, bu görüntülerin modern biçimlere dönüştürülmesiyle elde edilebilecek kilobayt (KB) veya megabayt (MB) cinsinden potansiyel tasarrufları gösterir.
Lighthouse, her görüntü için geçerli dosya boyutu ile modern bir biçimde sunulduysa tahmini dosya boyutu arasındaki farkı hesaplar. Daha sonra bu potansiyel tasarrufları sunar ve geliştiricilere elde edilebilecek olası performans kazanımları hakkında net rehberlik sunar.
Değişimi Uygulamak
Dönüştürülecek görüntüleri belirledikten sonraki adım, bu görüntülerin AVIF veya WebP sürümlerinin oluşturulmasını içerir. Bunun için, Google tarafından geliştirilmiş bir çevrimiçi görüntü sıkıştırma web uygulaması olan Squoosh ve görüntü dönüştürme ve işlemeyi işleyen güçlü bir yazılım paketi olan ImageMagick dahil olmak üzere çeşitli araçlar ve kitaplıklar mevcuttur.
Görüntüler dönüştürüldükten sonra, kullanıcılara tarayıcılarıyla uyumlu bir şekilde sunulmaları gerekir. Bu genellikle, bir görüntünün farklı sürümlerinin tarayıcının yeteneklerine göre sunulmasına izin veren 'resim' HTML öğesinin veya benzer yöntemlerin kullanılmasını içerir.
Çözüm
Görüntüleri modern formatlarda sunmak, web performansı optimizasyonunun çok önemli bir bileşenidir. Lighthouse'un "Görüntüleri modern biçimlerde sunun" özelliğinden yararlanan web geliştiricileri, bu biçimlerin sunduğu potansiyel tasarrufları kolayca belirleyebilir. AVIF ve WebP'yi benimsemek yalnızca site performansını iyileştirmekle kalmaz; kullanıcı deneyimini geliştirir ve SEO sıralamalarını olumlu yönde etkileyebilir. Modern görüntü formatları kalıcıdır ve bunların tam potansiyelinden yararlanmak kaçırılmaması gereken bir fırsattır.
