Kendinize sormanız gereken ilk soru şudur: Bir görselin aslında istediğiniz etkiye ulaşmak için gereklidir. İyi tasarım basittir ve her zaman en iyi performansı verir. Bir görüntü kaynağını ortadan kaldırabilirseniz genellikle HTML, CSS, JavaScript ve sayfadaki diğer öğelere göre çok sayıda bayt gerektirir ve her zaman en iyi optimizasyon stratejisi budur. Bununla birlikte, iyi yerleştirilmiş bir görsel bin kelimeye kıyasla daha fazla bilgi verebilir. dengeyi bulmanız size kalmış.
Ardından, istenen sonuçları sağlayabilecek alternatif bir teknolojinin olup olmadığını değerlendirmelisiniz, daha verimli bir şekilde uygulayabilirsiniz:
- 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 üretmek için kullanılabilir. genelde bir resim dosyasının gerektirdiği baytın altında olur.
- Web yazı tipleri birbirinden güzel yazı tiplerinin kullanımını sağlar seçme, arama ve otomatik arama işlevlerini korur. Bu da kullanılabilirlikte önemli bir artış sağladı.
Bir resim öğesinde metin kodlarsanız durup tekrar düşünün. İyi bir yazı biçimi; iyi bir tasarım, marka bilinci oluşturma ve okunabilirlik için ancak resim içinde metin kötü bir kullanıcı deneyimi sunar: metin seçilemiyor, aranamıyor, yakınlaştırılamıyor, ve yüksek DPI'ya sahip cihazlarda uyumlu değildir. Web yazı tiplerinin kullanımı için kendi optimizasyon seçeneklerini gerekir. Ancak tüm bu endişeleri giderir ve metin görüntülemek için her zaman daha iyi bir seçenektir.
Doğru resim biçimini seçin
Bir resmin doğru seçenek olduğundan eminseniz iş için doğru resim türünü dikkatli bir şekilde seçmelisiniz.
- Vektör grafikleri bir görüntüyü temsil etmek için çizgi, nokta ve poligonları kullanma.
- Raster grafikler dikdörtgen bir ızgara içine her pikselin ayrı değerlerini kodlayarak bir resmi temsil eder.
Her biçimin kendine özgü artıları ve eksileri vardır. Vektör biçimleri ideal olarak logo, metin veya simge gibi basit geometrik şekillerden oluşan resimler için uygundur. Her çözünürlük ve yakınlaştırma ayarında net sonuçlar verir. Bu nedenle, farklı boyutlarda görüntülenmesi gereken yüksek çözünürlüklü ekranlar ve öğeler için ideal bir biçimdir.
Ancak, sahne karmaşık olduğunda (örneğin, bir fotoğraf) vektör biçimleri yetersiz kalır: tüm şekilleri tanımlamak için kullanılan SVG işaretlemesinin miktarı aşırı yüksek olamayabilir Ayrıca çıkış "fotogerçekçi" görünmeyebilir. Bu gibi durumlarda kafes resim biçimini kullanmalısınız. (ör. PNG, JPEG, WebP veya AVIF).
Kafes resimler, çözünürlük veya yakınlaştırmadan bağımsız olmakla aynı güzel özelliklere sahip değil. bir kafes resmin ölçeğini artırdığınızda pürüzlü ve bulanık grafikler görürsünüz. Sonuç olarak, bir kafes görüntüsünün farklı çözünürlüklerde birden fazla sürümünü kaydetmeniz gerekebilir. özelliklerini kullanarak kullanıcılarınıza en iyi deneyimi sunabilirsiniz.
Yüksek çözünürlüklü ekranların etkileri
CSS pikselleri ve cihaz pikselleri olmak üzere iki farklı piksel türü vardır. Tek bir CSS pikseli, doğrudan tek bir cihaz pikseline karşılık gelebilir veya birden fazla cihaz pikseliyle desteklenebilir. Bunun anlamı nedir? Ne kadar çok cihaz pikseli varsa ekranda görüntülenen içeriğin ayrıntısı da o kadar hassas olur.
Yüksek DPI (HiDPI) ekranlar güzel sonuçlar üretir, ancak bariz bir husus vardır: Resim öğeleri, daha yüksek cihaz piksel sayılarından yararlanmak için daha fazla ayrıntı gerektirir. Ancak iyi bir haberimiz var. Bu görev için ideal olarak vektör resimler uygundur. Çünkü bu dosyalar her çözünürlükte keskin sonuçlar verebilir. ince ayrıntıları oluşturmak için daha yüksek bir işleme maliyeti Ancak dayanak varlık aynıdır ve çözümden bağımsızdır.
Öte yandan raster görüntüler, resim verilerini piksel bazında kodladıkları için çok daha büyük bir zorluk oluşturur. Dolayısıyla, piksel sayısı ne kadar büyükse kafes resmin dosya boyutu da o kadar büyük olur. Örneğin, 100x100 (CSS) piksellerde görüntülenen bir fotoğraf öğesi arasındaki farkı ele alalım:
| 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 ise iki katı. Dolayısıyla, "2x" ekran yalnızca iki katına çıkmakla kalmaz, gerekli piksellerin sayısını da dörde katlar!
Peki pratikte bu ne anlama geliyor? Yüksek çözünürlüklü ekranlar, birbirinden güzel resimler sunmanızı sağlar. Bu da mükemmel bir ürün özelliği olabilir. Bununla birlikte, yüksek çözünürlüklü ekranlar da yüksek çözünürlüklü resimler gerektirir. Bu nedenle:
- Çözünürlüğünden bağımsız oldukları ve her zaman keskin sonuçlar sağladığı için, mümkün olduğunda vektör resimleri tercih edin.
- Kafes resim gerekirse duyarlı resimler yayınlayın.
Farklı raster resim biçimlerinin özellikleri
Farklı kayıplı ve kayıpsız sıkıştırma algoritmalarına ek olarak, Farklı resim biçimleri, animasyon ve şeffaflık (alfa) kanalları gibi farklı özellikleri destekler. Bu nedenle, "doğru biçimin" seçilmesi özel bir resim, istenen görsel sonuçların ve işlevsel gereksinimlerin bir birleşimidir.
| Biçim | Şeffaflık | Animasyon | Tarayıcı |
|---|---|---|---|
| PNG | Evet | Hayır | Tümü |
| JPEG | Hayır | Hayır | Tümü |
| WebP | Evet | Evet | Tüm modern tarayıcılar. Daha fazla bilgi için Kullanabilir miyim? |
| AVIF | Evet | Evet | Hayır. Kullanabilir miyim? başlıklı makaleyi inceleyin. |
Evrensel olarak desteklenen iki kafes resim biçimi vardır: PNG ve JPEG. Bu biçimlere ek olarak modern tarayıcılar yeni WebP biçimini, 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. Peki, 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ünse kullanılmalıdır. WebP veya AVIF resimlerini, JPEG veya PNG resmiyle birlikte yedek olarak kullanabilirsiniz. Daha fazla ayrıntı için WebP resimlerini kullanma bölümüne bakın.
Eski resim biçimleri için aşağıdakileri göz önünde bulundurun:
- 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şturuyor. Görüntüleyin Animasyonlu GIF'leri video ile değiştirin.
- Peki ya GIF? GIF, renk paletini en fazla 256 renkle sınırlandırır.
ve
- İ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 paletinin boyutu seçimi dışında herhangi bir kayıplı sıkıştırma algoritması uygulamaz. Sonuç olarak, en yüksek kaliteli resmi üretir, daha yüksek bir dosya boyutuna sahiptir. Akıllı 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 bir vektör (SVG) biçimine dönüştürmeyi düşünün.
- Resim öğesinde metin varsa işlemi durdurun ve yeniden değerlendirin. Resimlerdeki metinler seçilebilir, aranamaz veya "yakınlaştırılabilir" değildir. Özel bir görünüm iletmeniz gerekiyorsa (marka bilinci oluşturma veya başka nedenlerle) bunun yerine web yazı tipi kullanın.
- 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 optimizasyonu birlikte kullanır. Öğenizin dosya boyutu karşısında en iyi kaliteyi bulmak için birkaç JPEG kalite düzeyini deneyin.
- Kayıplı WebP veya kayıplı AVIF, kabul edilebilir JPEG alternatifleri olabilir. Ancak özellikle WebP'nin kayıplı modunun, daha küçük resimler elde etmek için bazı renk bilgilerini yoksaydığını unutmayın. Bu nedenle, belirli renkler eşdeğer bir JPEG ile aynı olmayabilir.
Son olarak, platforma özel uygulamanızda içerik oluşturmak için bir WebView kullanıyorsanız, istemcinin tam kontrolü sizde olur ve yalnızca WebP'yi kullanabilirsiniz! Facebook ve diğer pek çok kişi, tüm resimlerini uygulamalarında sunmak için WebP'yi kullanıyor. elde edeceğim tasarruf kesinlikle buna değer.
Largest Contentful Paint (LCP) üzerindeki etkisi
Görüntüler LCP adayları olabilir. Bu durum, bir resmin boyutunun yükleme süresini etkilediği anlamına gelir. Bir resim LCP adayıysa bu resmi verimli bir şekilde kodlamak LCP'yi iyileştirmek açısından çok önemlidir.
Bir sayfanın algısal performansının tüm kullanıcılar için olabildiğince hızlı olması için bu makalede verilen tavsiyeyi 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ündüğünü ölçtüğü için algısal performansın bir parçasıdır.