Kendinize sormanız gereken ilk soru, istediğiniz efekti elde etmek için gerçekten bir resmin gerekip gerekmediğidir. HTML, CSS, JavaScript ve sayfadaki diğer öğelere kıyasla genellikle çok sayıda bayt gerektiren bir resim kaynağını ortadan kaldırabiliyorsanız bu her zaman en iyi optimizasyon stratejisidir. Bununla birlikte, iyi yerleştirilmiş bir resim bin kelimeden daha fazla bilgi iletebilir. Bu nedenle, dengeyi bulmak size kalmıştır.
Ardından, daha iyi sonuçlar verebilecek ancak daha verimli bir şekilde çalışabilecek alternatif bir teknoloji olup olmadığını değerlendirmeniz gerekir:
- CSS efektleri (gölge veya renk geçişi gibi) ve CSS animasyonları, her çözünürlükte 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. Bu öğeler genellikle bir resim dosyasının gerektirdiği baytların çok daha azını kullanır.
- Web yazı tipleri, metin seçme, arama ve yeniden boyutlandırma özelliğini korurken güzel yazı tiplerinin kullanılmasını sağlar. Bu, kullanılabilirlik açısından önemli bir gelişmedir.
Bir resim öğesinde metin kodlarken kendinizi bulursanız durup yeniden düşünün. İyi bir tasarım, markalama ve okunabilirlik için mükemmel tipografi kritik öneme sahiptir. Ancak resimlerdeki metinler kötü bir kullanıcı deneyimi sunar: Metin seçilemez, aranamaz, yakınlaştırılamaz, erişilemez ve yüksek DPI'lı cihazlar için uygun değildir. Web yazı tiplerinin kullanılması kendine özgü bir optimizasyon kümesi gerektirir ancak bu yazı tipleri, 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 türde resmi dikkatlice seçmelisiniz.
- Vektörel grafikler, bir resmi temsil etmek için çizgiler, noktalar ve poligonlar kullanır.
- Raster grafikler, dikdörtgen bir ızgara içindeki her pikselin ayrı değerlerini kodlayarak bir görüntüyü temsil eder.
Her biçimin kendine özgü avantajları ve dezavantajları vardır. Vektör biçimleri, logo, metin veya simge gibi daha az karmaşık geometrik şekillerden oluşan resimler için idealdir. Her çözünürlükte ve yakınlaştırma ayarında net sonuçlar sunan SVG'ler, yüksek çözünürlüklü ekranlar ve farklı boyutlarda gösterilmesi gereken öğeler için ideal bir formattır.
Ancak vektör biçimleri, sahne karmaşık olduğunda (ör. fotoğraf) yetersiz kalır: Tüm şekilleri tanımlamak için gereken SVG işaretlemesinin miktarı çok yüksek olabilir ve çıktı yine de "fotogerçekçi" görünmeyebilir. Bu durumda PNG, JPEG, WebP veya AVIF gibi bir taramalı resim biçimi kullanmanız gerekir.
Raster görüntüler, çözünürlük veya yakınlaştırmadan bağımsız olma gibi güzel özelliklere sahip değildir. Raster görüntüyü büyüttüğünüzde tırtıklı ve bulanık grafikler görürsünüz. Bu nedenle, kullanıcılarınıza optimum deneyimi sunmak için bir raster 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 pikseli tarafından desteklenebilir. Ne anlamı var? Cihaz pikselleri ne kadar fazlaysa ekranda gösterilen içeriğin ayrıntısı o kadar net olur.
Yüksek DPI (HiDPI) ekranlar güzel sonuçlar verir ancak belirgin bir dezavantajı vardır: Görüntü öğelerinin, daha yüksek cihaz piksel sayısından yararlanmak için daha fazla ayrıntı içermesi gerekir. İyi haber şu ki, vektör resimler bu görev için idealdir. Her çözünürlükte net sonuçlar elde edilebilir. Daha ince ayrıntıları oluşturmak için daha yüksek bir işleme maliyetiyle karşılaşabilirsiniz ancak temel öğe aynıdır ve çözünürlükten bağımsızdır.
Öte yandan, raster görüntüler görüntü verilerini piksel bazında kodladıkları için çok daha büyük bir zorluk teşkil eder. Bu nedenle, piksel sayısı ne kadar yüksek olursa raster görüntünün dosya boyutu da o kadar büyük olur. 100x100 (CSS) piksel boyutunda gösterilen bir fotoğraf öğesi ile aşağıdaki fotoğraf öğesi arasındaki farkı göz önünde bulundurun:
| Ekran çözünürlüğü | Toplam piksel sayısı | Sıkıştırılmamış dosya boyutu (piksel başına 4 bayt) |
|---|---|---|
| 1x | 100 x 100 = 10.000 | 40.000 bayt |
| 2x | 100 x 100 x 4 = 40.000 | 160.000 bayt |
| 3x | 100 x 100 x 9 = 90.000 | 360.000 bayt |
Fiziksel ekranın çözünürlüğünü iki katına çıkardığımızda toplam piksel sayısı dört kat artar: Yatay piksel sayısının iki katı, dikey piksel sayısının iki katı. Bu nedenle, "2x" ekran yalnızca iki kat değil, dört kat daha fazla piksel gerektirir.
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 için yüksek çözünürlüklü resimler de gerekir. Bu nedenle:
- Çözünürlükten bağımsız oldukları ve her zaman net sonuçlar verdikleri için mümkün olduğunda vektör görüntüleri tercih edin.
- Raster görüntü gerekiyorsa duyarlı resimler yayınlayın.
Farklı raster görüntü biçimlerinin özellikleri
Farklı kayıplı ve kayıpsız sıkıştırma algoritmalarına ek olarak, farklı görüntü biçimleri animasyon ve şeffaflık (alfa) kanalları gibi farklı özellikleri destekler. Sonuç olarak, belirli bir resim için "doğru biçim" seçimi, uygun görsel sonuçların ve işlevsel gereksinimlerin bir kombinasyonudur.
| Biçim | Şeffaflık | Animasyon | Tarayıcı |
|---|---|---|---|
| PNG | Evet | Evet (APNG) | Tümü |
| JPEG | Hayır | Hayır | Tümü |
| WebP | Evet | Evet | Tüm modern tarayıcılar. Kullanabilir miyim? başlıklı makaleyi inceleyin. |
| AVIF | Evet | Evet | Tüm modern tarayıcılar. Kullanabilir miyim? başlıklı makaleyi inceleyin. |
Evrensel olarak desteklenen iki raster resim biçimi vardır: PNG ve JPEG. Bu biçimlere ek olarak, modern tarayıcılar daha yeni olan WebP ve AVIF resim biçimlerini de destekler. Daha yeni olan bu iki biçim, genel olarak daha iyi sıkıştırma ve daha fazla özellik sunar. Peki, hangi biçimi kullanmalısınız?
WebP ve AVIF genellikle eski biçimlere kıyasla daha iyi sıkıştırma sağlar ve mümkün olduğunda kullanılmalıdır. Yedek olarak JPEG veya PNG resimle birlikte WebP ya da AVIF resimler kullanabilirsiniz. Daha fazla bilgi için WebP resimlerini kullanma başlıklı makaleyi inceleyin.
Eski resim biçimleri açısından aşağıdakileri göz önünde bulundurun:
- Animasyona mı ihtiyacınız var?
<video>öğelerini kullanın.- GIF'ler? GIF, renk paletini en fazla 256 renkle sınırlar ve
<video>öğelerine kıyasla önemli ölçüde daha büyük dosya boyutları oluşturur. APNG, GIF'ten daha fazla renk sunar ancak makul ölçüde eşdeğer görsel kalitedeki video biçimlerinden de önemli ölçüde daha büyüktür. Bkz. Animasyonlu GIF'leri videoyla değiştirme.
- GIF'ler? GIF, renk paletini en fazla 256 renkle sınırlar ve
- En yüksek çözünürlükle ince ayrıntıları korumanız mı gerekiyor? PNG veya kayıpsız WebP kullanın.
- PNG, renk paletinin boyutu seçimi dışında herhangi bir kayıplı sıkıştırma algoritması uygulamaz. Bu nedenle, en yüksek kaliteli görüntüyü üretir ancak diğer biçimlere kıyasla dosya boyutu önemli ölçüde daha büyüktür. Dikkatli kullanın.
- WebP, PNG'den daha verimli olabilecek kayıpsız 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 durup tekrar düşünün. Resimlerdeki metin seçilemez, aranamaz veya "yakınlaştırılamaz". Markalama veya başka nedenlerle özel bir görünüm oluşturmanız gerekiyorsa bunun yerine web yazı tipi kullanın.
- Fotoğraf, ekran görüntüsü veya benzer bir resim öğesini mi optimize ediyorsunuz? JPEG, kayıplı WebP veya 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 kalite/dosya boyutu dengesini bulmak amacıyla birkaç JPEG kalite düzeyi deneyin.
- Kayıplı WebP veya kayıplı AVIF, web kalitesindeki resimler için mükemmel JPEG alternatifleridir. Ancak kayıplı modda, daha küçük resimler elde etmek için bazı bilgilerin atıldığını unutmayın. Bu nedenle, belirli renkler eşdeğer bir JPEG ile aynı olmayabilir.
Son olarak, platforma özgü uygulamanızda içeriği oluşturmak için WebView kullanıyorsanız istemci üzerinde tam kontrole sahip olduğunuzu ve yalnızca WebP kullanabileceğinizi unutmayın. Facebook ve daha birçok platform, uygulamalarındaki tüm resimleri sunmak için WebP'yi kullanıyor. Bu sayede elde edilen tasarruf kesinlikle değer.
Largest Contentful Paint (LCP) üzerindeki etkisi
Resimler LCP adayları olabilir. Bu nedenle, bir resmin boyutu yükleme süresini etkiler. Bir resim LCP adayı olduğunda, LCP'yi iyileştirmek için bu resmi verimli bir şekilde kodlamak çok önemlidir.
Bu kılavuzda verilen tavsiyeleri uygulayarak bir sayfanın algısal performansını tüm kullanıcılar için olabildiğince hızlı hale getirmeye çalışmalısınız. LCP, algısal performansın bir parçasıdır. Sayfadaki en büyük (ve dolayısıyla en algılanabilir) öğenin ne kadar hızlı görüntülendiğini ölçer.