Kendinize sormanız gereken ilk soru, istediğiniz efekti elde etmek için gerçekten bir resme ihtiyaç duyup duymadığınızdır. Genellikle HTML, CSS, JavaScript ve sayfadaki diğer öğelere kıyasla çok sayıda bayt gerektiren bir resim kaynağını kaldırabiliyorsanız bu her zaman en iyi optimizasyon stratejisidir. Bununla birlikte, iyi yerleştirilmiş bir resim de bin kelimeden daha fazla bilgi aktarabilir. Bu nedenle, bu dengeyi bulmak size bağlıdır.
Ardından, daha iyi sonuçlar sunabilecek ancak daha verimli bir alternatif teknoloji olup olmadığını değerlendirmelisiniz:
- CSS efektleri (gölgeler veya renk geçişleri gibi) ve CSS animasyonları, her çözünürlükte ve yakınlaştırma düzeyinde her zaman keskin 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 küçük bir kısmını kullanır.
- Web yazı tipleri, metinleri seçme, arama ve yeniden boyutlandırma özelliklerini korurken güzel yazı tiplerinin kullanılmasını sağlar. Bu da kullanılabilirlik açısından önemli bir gelişmedir.
Bir resim öğesinde metin kodladığınızı fark ederseniz durup yeniden düşünün. İyi bir tasarım, markalaşma ve okunabilirlik için mükemmel bir yazı tipi kullanmak çok önemlidir. Ancak resimlere yerleştirilmiş metinler kötü bir kullanıcı deneyimi sunar: Metin seçilemez, aranamaz, yakınlaştırılamaz, erişilemez ve yüksek DPI'li cihazlar için uygun değildir. Web yazı tiplerinin kullanımı kendi optimizasyon grubunu gerektirir ancak bu yazı tipleri tüm bu endişeleri giderir ve metin görüntüleme için her zaman daha iyi bir seçimdir.
Doğru resim biçimini seçme
Bir resmin doğru seçenek olduğundan eminseniz iş için doğru resim türünü dikkatlice seçmeniz gerekir.
- Vektör grafikleri, bir resmi temsil etmek için çizgiler, noktalar ve poligonlar kullanır.
- Raster grafikler, her bir pikselin değerlerini dikdörtgen bir ızgara içinde kodlayarak bir resmi temsil eder.
Her biçimin kendine özgü avantajları ve dezavantajları vardır. Vektör biçimleri, logolar, metinler veya simgeler gibi daha az karmaşık geometrik şekillerden oluşan resimler için idealdir. Her çözünürlük ve yakınlaştırma ayarında keskin sonuçlar sunmaları, bu resimleri yüksek çözünürlüklü ekranlar ve farklı boyutlarda gösterilmesi gereken öğeler için ideal bir biçim haline getirir.
Ancak sahne karmaşık olduğunda (ör. fotoğraf) vektör biçimleri yetersiz kalır: Tüm şekilleri tanımlamak için gereken SVG işaretleme miktarı çok yüksek olabilir ve sonuç yine de "fotogerçekçi" görünmeyebilir. Bu durumda PNG, JPEG, WebP veya AVIF gibi bir raster resim biçimi kullanmanız gerekir.
Raster resimler, çözünürlük veya yakınlaştırmadan bağımsız olma gibi güzel özelliklere sahip değildir. Bir raster resmi büyüttüğünüzde sivri uçlu ve bulanık grafikler görürsünüz. Bu nedenle, kullanıcılarınıza en iyi deneyimi sunmak için bir raster resminin çeşitli çözünürlüklerde birden fazla sürümünü kaydetmeniz gerekebilir.
Yüksek çözünürlüklü ekranların sonuçları
İki farklı piksel türü vardır: CSS pikselleri ve cihaz pikselleri. Tek bir CSS pikseli doğrudan tek bir cihaz pikseli ile eşleşebilir veya birden fazla cihaz pikseli tarafından desteklenebilir. Bunun ne anlamı var? Cihazdaki piksel sayısı arttıkça ekranda gösterilen içeriğin ayrıntıları da o kadar ince olur.
Yüksek DPI (HiDPI) ekranlar güzel sonuçlar verir ancak bunun bir dezavantajı vardır: 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çlarla herhangi bir çözünürlükte oluşturulabildiğinden bu görev için idealdir. Daha ince ayrıntıları oluşturmak için daha yüksek bir işleme maliyeti ödemeniz gerekebilir ancak temel öğe aynıdır ve çözünürlükten bağımsızdır.
Öte yandan, raster resimler, resim verilerini piksel başına kodladığından çok daha büyük bir zorluk teşkil eder. Bu nedenle, piksel sayısı ne kadar büyükse raster resmin dosya boyutu da o kadar büyük olur. 100x100 (CSS) piksel olarak görüntülenen bir fotoğraf öğesi arasındaki farkı düşünün:
| 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ü ikiye katladığımızda toplam piksel sayısı dört katına çıkar: Yatay piksel sayısının iki katı, dikey piksel sayısının iki katı. Bu nedenle, "2x" ekran, gerekli piksel sayısını yalnızca ikiye değil, dört katına çıkarır.
Peki bu, pratikte ne anlama geliyor? Yüksek çözünürlüklü ekranlar, güzel resimler sunmanıza olanak tanır. Bu da mükemmel bir ürün özelliği olabilir. Ancak yüksek çözünürlüklü ekranlar için yüksek çözünürlüklü resimler de gereklidir. Bu nedenle:
- Çözünürlükten bağımsız oldukları ve her zaman keskin sonuçlar verdikleri için mümkün olduğunda vektör resimleri tercih edin.
- Rastır görüntü gerekiyorsa duyarlı resimler yayınlayın.
Farklı raster 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 resim için "doğru biçim" seçimi, uygun görsel sonuçların ve işlevsel koşulların 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. Modern tarayıcılar bu biçimlere ek olarak daha yeni WebP ve AVIF resim biçimlerini de destekler. Her iki yeni biçim de 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 resimleri kullanabilirsiniz. Daha fazla bilgi için WebP resimleri kullanma başlıklı makaleyi inceleyin.
Eski resim biçimleri söz konusu olduğunda aşağıdakileri göz önünde bulundurun:
- Animasyona mı ihtiyacınız var?
<video>öğelerini kullanın.- GIF'ler ne olacak? GIF, renk paletini en fazla 256 renkle sınırlar ve
<video>öğelerine kıyasla çok daha büyük dosya boyutları oluşturur. APNG, GIF'den daha fazla renk sunar ancak makul düzeyde eşdeğer görsel kaliteye sahip video biçimlerinden önemli ölçüde daha büyüktür. Animasyonlu GIF'leri videoyla değiştirme başlıklı makaleyi inceleyin.
- GIF'ler ne olacak? GIF, renk paletini en fazla 256 renkle sınırlar ve
- En yüksek çözünürlükte ince ayrıntıları korumanız gerekiyor mu? PNG veya kayıpsız WebP kullanın.
- PNG, renk paleti boyutunun seçiminin dışında kayıplı sıkıştırma algoritmaları uygulamaz. Sonuç olarak, en yüksek kaliteli görüntüyü oluşturur ancak diğer biçimlere kıyasla çok daha büyük dosya boyutları elde edersiniz. Dikkatli bir ş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 öğeyi vektör (SVG) biçimine dönüştürmeyi düşünebilirsiniz.
- Resim öğesi metin içeriyorsa durup yeniden düşünün. Resimlerdeki metin seçilemez, aranamaz veya "yakınlaştırılamaz". Markalaşma veya başka nedenlerle özel bir görünüm sunmanız gerekiyorsa bunun yerine bir web yazı tipi kullanın.
- Bir 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 azaltmak için kayıplı ve kayıpsız optimizasyonların bir kombinasyonunu kullanır. Öğeniz için en iyi kalite/dosya boyutu dengesini bulmak üzere çeşitli JPEG kalite düzeylerini deneyin.
- Kayıplı WebP veya kayıplı AVIF, web kalitesinde resimler için mükemmel JPEG alternatifleridir. Ancak kayıplı modun, daha küçük resimler elde etmek için bazı bilgileri attığını unutmayın. Bu nedenle, belirli renkler eşdeğer JPEG ile aynı olmayabilir.
Son olarak, platforma özel uygulamanızda içerik oluşturmak için WebView kullanıyorsanız istemci üzerinde tam kontrole sahip olduğunuzu ve WebP'yi özel olarak kullanabileceğinizi unutmayın. Facebook ve diğer birçok şirket, uygulamalarında tüm resimlerini yayınlamak için WebP'yi kullanır. Bu sayede, önemli ölçüde tasarruf sağlar.
Largest Contentful Paint (LCP) üzerindeki etki
Resimler LCP adayları olabilir. Yani 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.
Bir sayfanın algısal performansının tüm kullanıcılar için mümkün olduğunca hızlı olması amacıyla bu kılavuzda verilen tavsiyeleri 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örüntülendiğini ölçtüğü için algısal performansın bir parçasıdır.