Doğru resim biçimini seçin

Ilya Grigorik

Jeremy Wagner

Kendinize sormanız gereken ilk soru, bir resmin gerçekten istediğiniz efekti elde etmek için gerekli olup olmadığıdır. İyi bir tasarım basittir ve her zaman en iyi performansı verir. Genellikle HTML, CSS, JavaScript ve sayfadaki diğer öğelere göre çok sayıda bayt gerektiren bir resim kaynağını devre dışı bırakabilirseniz her zaman en iyi optimizasyon stratejisi budur. Bununla birlikte, iyi yerleştirilmiş bir görsel bin kelimeden daha fazla bilgi iletebilir. Bu nedenle, bu dengeyi bulmak size kalmıştır.

Ardından, istenen sonuçları daha verimli bir şekilde sağlayabilecek alternatif bir teknoloji olup olmadığını değerlendirmelisiniz:

• CSS efektleri (gölgeler veya gradyanlar gibi) ve CSS animasyonları, her çözünürlük ve yakınlaştırma düzeyinde her zaman net görünen, çözünürlükten bağımsız öğeler oluşturmak için kullanılabilir ve bu öğeler genellikle bir resim dosyasının gerektirdiği baytların bir kısmını oluşturur.
• Web yazı tipleri; metin seçme, arama ve yeniden boyutlandırma özelliklerini korurken kullanışlı yazı tiplerinin kullanılmasına olanak tanır. Bu da kullanılabilirlikte önemli bir iyileştirmedir.

Bir resim öğesinde metin kodladığınızı fark ederseniz durup tekrar düşünün. İyi bir tipografik tasarım, marka bilinci oluşturma ve okunabilirlik açısından çok önemlidir. Ancak resimlerdeki metin kötü bir kullanıcı deneyimi sunar. Metin seçilemez, aranamaz, yakınlaştırılamaz, erişilebilir değildir ve yüksek DPI'ya sahip cihazlarda kullanılamaz. Web yazı tiplerinin kullanılması kendi optimizasyonlarını gerektirir, ancak tüm bu endişeleri giderir ve metin görüntülemek için her zaman daha iyi bir seçimdir.

Doğru resim biçimini seçin

Bir resmin doğru seçenek olduğundan eminseniz, iş için doğru görüntü türünü dikkatlice seçmelisiniz.

• Vektör grafikleri, bir görüntüyü temsil etmek için çizgiler, noktalar ve poligonlar kullanır.
• Kare grafikler bir resmi, dikdörtgen bir ızgara içinde her pikselin ayrı ayrı değerlerini kodlayarak temsil eder.

Her biçimin kendine özgü avantajları ve dezavantajları vardır. Logo, metin veya simgeler gibi basit geometrik şekillerden oluşan görseller için en uygun olanı vektör biçimleridir. Her çözünürlük ve yakınlaştırma ayarında keskin sonuçlar sağlayan bu reklamlar, çeşitli boyutlarda görüntülenmesi gereken yüksek çözünürlüklü ekranlar ve öğeler için ideal bir biçimdir.

Bununla birlikte, sahne karmaşık olduğunda (örneğin, bir fotoğraf) vektör biçimleri yetersiz kalır: Tüm şekilleri tanımlayan SVG işaretlemesi miktarı aşırı derecede yüksek olabilir ve çıkış, yine de "fotogerçekçi" görünmeyebilir. Bu durumda PNG, JPEG, WebP veya AVIF gibi kafes bir resim biçimi kullanmanız gerekir.

Raster resimlerin, çözünürlük veya yakınlaştırmadan bağımsız olma gibi iyi özellikleri yoktur. Bir kafes resmin ölçeğini büyüttüğünüzde, pürüzlü ve bulanık grafikler görürsünüz. Sonuç olarak, kullanıcılarınıza optimum deneyim sunmak için kafes görüntünün birden fazla sürümünü çeşitli çözünürlüklerde kaydetmeniz gerekebilir.

Yüksek çözünürlüklü ekranların etkileri

İki farklı piksel türü vardır: CSS pikselleri ve cihaz pikselleri. Tek bir CSS pikseli doğrudan tek bir cihaz pikseline karşılık gelebilir veya birden fazla cihaz pikseliyle desteklenebilir. Bunun anlamı nedir? Cihaz pikseli sayısı ne kadar fazla olursa ekranda görüntülenen içeriğin ayrıntıları da o kadar hassas olur.

Yüksek DPI (HiDPI) özellikli ekranlar güzel sonuçlar üretir ancak bariz bir denge söz konusudur: Resim öğeleri, daha yüksek cihaz piksel sayılarından yararlanmak için daha fazla ayrıntı gerektirir. Neyse ki vektör resimler, keskin sonuçlar veren her çözünürlükte oluşturulabildiğinden, bu göreve en uygun olan seçenektir. Daha ince ayrıntıları oluşturmak için daha yüksek bir işleme maliyetine neden olabilirsiniz ancak temel öğe aynıdır ve çözünürlükten bağımsızdır.

Diğer yandan, kafes resimler, resim verilerini piksel başına kodladıkları için çok daha zorlayıcıdır. Dolayısıyla, piksel sayısı ne kadar büyükse, kafes resmin dosya boyutu da o kadar büyük olur. Örnek olarak, 100x100 (CSS) piksel boyutunda görüntülenen bir fotoğraf öğesi arasındaki farkı ele alalım:

Fiziksel ekranın çözünürlüğünü iki katına çıkardığımızda toplam piksel sayısı dört kat artar: Yatay piksellerin sayısı iki katı, dikey piksel sayısı ise iki katı. Dolayısıyla, "2x" ekran sadece iki katına çıkmaz, aynı zamanda gereken piksel sayısını da dörde katlar!

Peki bu pratikte ne anlama geliyor? Yüksek çözünürlüklü ekranlar, harika bir ürün özelliği olabilecek güzel resimler sunmanıza olanak tanır. Ancak, yüksek çözünürlüklü ekranlar da yüksek çözünürlüklü görüntüler gerektirir, dolayısıyla:

• Vektör görüntüleri çözünürlükten bağımsız olduğundan ve her zaman net sonuçlar verdiğinden mümkün olduğunda vektör resimleri tercih edin.
• Kafes resim kullanılması gerekiyorsa duyarlı resimler sunun.

Farklı kafes resim biçimlerinin özellikleri

Farklı kayıplı ve kayıpsız sıkıştırma algoritmalarının yanı sıra farklı resim biçimleri, animasyon ve şeffaflık (alfa) kanalları gibi farklı özellikleri destekler. Sonuç olarak, belirli bir görsel için "doğru biçim" seçimi, istenen görsel sonuçların ve işlevsel gereksinimlerin bir birleşimidir.

Evrensel olarak desteklenen iki raster resim biçimi vardır: PNG ve JPEG. Bu biçimlere ek olarak modern tarayıcılar, daha yeni biçim olan WebP'yi desteklerken yalnızca bazıları yeni AVIF biçimini destekler. Yeni biçimlerin her ikisi de daha iyi genel sıkıştırma ve daha fazla özellik sunar. Bu durumda hangi biçimi kullanmalısınız?

WebP ve AVIF genellikle eski biçimlerden daha iyi sıkıştırma sağlar ve mümkün olduğunda kullanılmalıdır. Yedek olarak JPEG veya PNG resimleriyle birlikte WebP veya AVIF resimlerini kullanabilirsiniz. Daha fazla bilgi için WebP resimlerini kullanma bölümüne bakın.

Eski resim biçimleri söz konusu olduğunda aşağıdakileri göz önünde bulundurun:

1. Animasyona ihtiyacınız var mı? <video> öğelerini kullanın.
   • Peki ya GIF? GIF, renk paletini en fazla 256 renkle sınırlandırır ve <video> öğelerinden çok daha büyük dosya boyutları oluşturur. Animasyonlu GIF'leri video ile değiştirme bölümüne bakın.
2. İnce ayrıntıları en yüksek çözünürlükte korumanız gerekiyor mu? PNG veya kayıpsız WebP kullanın.
   • PNG, renk paleti boyutunun seçimi dışında herhangi bir kayıplı sıkıştırma algoritması uygulamaz. Sonuç olarak, en yüksek kalitede resim üretilir, ancak diğer biçimlere kıyasla önemli ölçüde daha yüksek dosya boyutu gerekir. Makul şekilde kullanın.
   • WebP, PNG'den daha verimli olabilecek kayıpsız bir kodlama moduna sahiptir.
   • Resim öğesi geometrik şekillerden oluşan görüntüler içeriyorsa bunu vektör (SVG) biçimine dönüştürmeyi düşünebilirsiniz.
   • Resim öğesi metin içeriyorsa durdurup yeniden düşünün. Resimlerdeki metinler seçilemez, aranamaz veya "büyütülebilir" değildir. Özel bir görünüm aktarmanız gerekiyorsa (marka bilinci oluşturma veya başka nedenlerle) bunun yerine bir web yazı tipi kullanın.
3. Bir fotoğrafı, ekran görüntüsünü veya benzer bir resim öğesini optimize ediyor musunuz? JPEG, kayıplı WebP veya kayıplı AVIF kullanın.
   • JPEG, resim öğesinin dosya boyutunu küçültmek için kayıplı ve kayıpsız optimizasyonun bir kombinasyonunu kullanır. Öğeniz için en iyi kaliteyi ve dosya boyutu dengesini bulmak üzere çeşitli JPEG kalite düzeylerini deneyin.
   • Kayıplı WebP veya kayıplı AVIF, kabul edilen JPEG alternatifleri olabilir, ancak özellikle WebP'nin kayıplı modunun daha küçük resimler elde etmek için bazı renk bilgilerini yok saydığını unutmayın. Bu, belirli renklerin eşdeğer bir JPEG ile aynı olmayabileceği anlamına gelir.

Son olarak, platforma özel uygulamanızda içerik oluşturmak için Web Görünümü kullanıyorsanız istemci üzerinde tam kontrole sahip olursunuz ve yalnızca WebP'yi kullanabilirsiniz. Facebook ve diğer pek çok şirket, tüm resimlerini uygulamalarında sunmak için WebP'den yararlanıyor. Tasarruf etmeye değer.

Largest Contentful Paint (LCP) üzerindeki etkisi

Resimler LCP adayları olabilir. Bu, bir resmin boyutunun yükleme süresini etkilediği anlamına gelir. Bir resim LCP adayı olduğunda, bu resmin verimli bir şekilde kodlanması LCP'nin iyileştirilmesi için çok önemlidir.

Bir sayfanın algılanan performansının tüm kullanıcılar için mümkün olduğunca hızlı olmasını sağlamak amacıyla, bu makalede verilen öneriyi uygulamaya çalışmalısınız. LCP, sayfadaki en büyük (ve dolayısıyla en algılanabilir) öğenin ne kadar hızlı gösterildiğini ölçtüğü için algı performansının bir parçasıdır.