Sitenizde en iyi performans gösteren resimlerin kullanılmasını sağlamak için optimize edilmiş resim politikalarını kullanın.
Görseller genellikle önemli miktarda görsel alan kaplar ve bir web sitesinde indirilen baytların çoğunu oluşturur. Resimleri optimize etmek, yükleme performansını artırabilir ve ağ trafiğini azaltabilir.
Web'deki sitelerin yarısından fazlasının, yeterince sıkıştırılmamış veya gereksiz yere büyük resimler yayınladığını görmek şaşırtıcı. Bu sayede, yalnızca resimleri optimize ederek performansı iyileştirmek için çok fazla alanınız olur.
Resimlerimin optimize edilip edilmediğini nasıl öğrenebilirim ve bunları nasıl optimize etmeliyim? Resim optimizasyonu için yeni bir özellik politikası grubuyla deneme yapıyoruz: oversized-images
, unoptimized-lossy-images
, unoptimized-lossless-images
ve unoptimized-lossless-images-strict
.
Artık tüm bu özellikler orijinal deneme sürümlerinde kullanılabilir.
Optimize edilmiş resim politikaları
İzinler politikası, geliştirme aşamasında uygulanabilecek yeni bir resim kısıtlaması grubunu kullanıma sunuyor. Kısıtlamalardan herhangi birini ihlal eden resimler, yer tutucu resimler olarak oluşturulur. Bu resimleri tespit etmek ve düzeltmek kolaydır. Bu politikalar, ihlallerin raporlar aracılığıyla gözlemlendiği ve yaptırım uygulanmadan görüntülerin normal şekilde oluşturulduğu yalnızca rapor modunda belirtilebilir. (Ayrıntılar için aşağıdaki Yalnızca raporlama modu bölümüne bakın.)
oversized-images
oversized-images
izin politikası, bir resmin kapsayıcı boyutuyla ilgili olarak doğal boyutlarını kısıtlar.
Bir dokümanda oversized-images
politikası kullanıldığında, doğal çözünürlüğü her iki boyutta da kapsayıcı boyutundan X katından fazla olan tüm <img>
öğeleri yer tutucu resimle değiştirilir.
Neden?
Görüntüleme cihazının oluşturabileceğinden daha büyük resimler yayınlamak (ör. masaüstü resimlerini mobil bağlamlarda yayınlamak veya yüksek piksel yoğunluğuna sahip resimleri düşük piksel yoğunluğuna sahip bir cihazda yayınlamak) ağ trafiğini ve cihaz belleğini boşa harcar. Resimlerinizi optimize etme hakkında bilgi edinmek için Resimleri doğru boyutlarda yayınlama ve Duyarlı resimler yayınlama konularını okuyun.
Örnekler
Aşağıda bu durumu açıklayan birkaç örnek verilmiştir. Aşağıda, bir resmin görüntü boyutu ikiye bölündüğünde varsayılan davranış gösterilmektedir.
Aşağıdaki izin politikasını uygularsam bunun yerine yer tutucu resim görüyorum.
Permissions-Policy: oversized-images *(2);
Yalnızca genişliği veya yüksekliği düşürdüğümde benzer sonuçlar alıyorum.
Nasıl kullanılmalı?
Özetlemek gerekirse oversized-images
politikası aşağıdaki yöntemlerden biri kullanılarak belirtilebilir:
Permissions-Policy
HTTP üstbilgisi<iframe>
allow
özelliği
oversized-images
politikasını beyan etmek için şunları sağlamanız gerekir:
- Özellik adı,
oversized-images
(Zorunlu) - Kaynakların listesi (isteğe bağlı)
- Kaynaklar için parantez içinde belirtilen eşik değerler (ör. küçültme oranı X) (İsteğe bağlı)
2,0 veya daha düşük bir küçültme oranı önerilir. Resimleri çeşitli ekran boyutlarında, çözünürlüklerde vb. en iyi şekilde sunmak için farklı çözünürlüklere sahip duyarlı resimler kullanmayı değerlendirin.
Diğer örnekler
Permissions-Policy: oversized-images *(2.0)
Politika, 2,0 eşik değeriyle tüm kaynaklarda uygulanır. Resim küçültme oranı 2,0'dan yüksek olan resim içeren <img>
öğelerine izin verilmez ve bu öğeler yer tutucu resimle değiştirilir.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
Politika, sitenin kaynağında 1,5 eşik değeriyle uygulanır.
Üst düzey tarama bağlamlarındaki ve aynı kaynakta iç içe yerleştirilmiş tarama bağlamlarındaki <img>
öğeleri yalnızca küçültme oranı 1,5'ten küçük veya 1,5'e eşitse normal şekilde oluşturulur. Diğer tüm yerlerdeki <img>
öğeleri normal şekilde oluşturulur.
unoptimized-{lossy,lossless}-images
unoptimized-lossy-images
, unoptimized-lossless-images
, unoptimized-lossless-images-strict
özellik politikaları, bir resmin dosya boyutunu doğal çözünürlüğüyle ilişkili olarak kısıtlar:
unoptimized-lossy-images
- Kayıplı biçimler, sabit bir 1 KB ek yük payıyla X piksel başına bayt oranını aşmamalıdır. G x Y boyutlarında bir resim için dosya boyutu eşiği, G x Y x X + 1024 olarak hesaplanır.
unoptimized-lossless-images
- Kayıpsız biçimler, sabit bir 10 KB ek yük payıyla X piksel başına bayt oranını aşmamalıdır. G x Y boyutlarında bir resim için dosya boyutu eşiği, G x Y x X + 10240 olarak hesaplanır.
unoptimized-lossless-images-strict
- Kayıpsız biçimler, sabit bir 1 KB ek yük payıyla X piksel başına bayt oranını aşmamalıdır. G x Y boyutlarında bir resim için dosya boyutu eşiği, G x Y x X + 1024 olarak hesaplanır.
Bir dokümanda bu politikalardan herhangi biri kullanıldığında, kısıtlamayı ihlal eden tüm <img>
öğeleri bir yer tutucu resimle değiştirilir.
Neden?
İndirme boyutu ne kadar büyükse resmin yüklenmesi de o kadar uzun sürer. Bir resmi optimize ederken dosya boyutu mümkün olduğunca küçük tutulmalıdır: Meta verileri kaldırma, iyi bir resim biçimi seçme, resim sıkıştırma vb. Resimlerinizi optimize etme hakkında bilgi edinmek için Resimleri sıkıştırmak için Imagemin'i kullanma ve WebP resimlerini kullanma başlıklı makaleleri okuyun.
Örnek
Aşağıda, varsayılan tarayıcı davranışı gösterilmektedir. İzin politikası olmadan, optimize edilmemiş ve kayıplı bir resim, optimize edilmiş bir resimle aynı şekilde gösterilebilir.
Aşağıdaki izin politikasını uygularsam bunun yerine yer tutucu resim görüyorum.
Permissions-Policy: unoptimized-lossy-images *(0.5);
Nasıl kullanılmalı?
İzinler Politikası'nı yeni kullanmaya başladıysanız daha fazla bilgi için lütfen İzinler Politikası'na Giriş başlıklı makaleyi inceleyin.
Özetlemek gerekirse unoptimized-{lossy,lossless}-images
politikaları aşağıdaki yöntemlerle belirtilebilir:
Permissions-Policy
HTTP üstbilgisi<iframe>
allow
özelliği
unoptimized-{lossy,lossless}-images
politikası beyan etmek için şunları sağlamanız gerekir:
- Özellik adı (ör.
unoptimized-lossy-images
) (Zorunlu) - Kaynakların listesi (isteğe bağlı)
- Kaynaklar için eşik değerleri (ör. piksel başına bayt oranı X), parantez içinde belirtilir (İsteğe bağlı)
unoptimized-lossy-images
için piksel başına bayt oranının 0,5 veya daha düşük, unoptimized-lossless-images
ve unoptimized-lossless-images-strict
için piksel başına bayt oranının 1 veya daha düşük olması önerilir.
WebP biçimlerinin sıkıştırma oranları diğer biçimlere göre daha iyidir. Mümkünse tüm resimlerinizi kayıplı WebP biçiminde sunun. Bu yeterli değilse kayıpsız WebP biçimini deneyin. WebP biçimlerini desteklemeyen tarayıcılarda JPEG kullanın. Bu biçimlerden hiçbiri işe yaramazsa PNG kullanın.
WebP biçimleri kullanıyorsanız daha katı eşikler kullanmayı deneyin:
- WEBPV8 için 0,2
- WEBPL için 0,5
Diğer örnekler
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
Bu politika, 0,5 (kaybedilen biçimler için) ve 1 (kaybetmeyen biçimler için) eşik değeriyle tüm kaynaklarda zorunlu kılınmıştır. Resimdeki piksel başına bayt oranı kısıtlamayı aşan tüm <img>
öğelerine izin verilmez ve bu öğeler yer tutucu resimle değiştirilir.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
Bu politika, sitenin kaynağında 0,3 (kaybedilen biçimler için) ve 0,8 (kaybetmeyen biçimler için) eşik değeriyle uygulanır. Üst düzey tarama bağlamlarındaki ve aynı kaynakta iç içe yerleştirilmiş tarama bağlamlarındaki <img>
öğeleri yalnızca piksel başına bayt oranı bu kısıtlamaları karşılıyorsa normal şekilde oluşturulur. Diğer yerlerdeki <img>
öğeleri normal şekilde oluşturulur.
Yalnızca raporlama modu kullanımda
Yer tutucu resimler içeren bir site yayınlamak istemeyebilirsiniz. Geliştirme ve hazırlık aşamasında politikaları yaptırım modunda (optimizasyon yapılmamış resimler yer tutucu resim olarak oluşturulur) kullanabilir, üretimde ise yalnızca rapor modunu kullanabilirsiniz. (Daha fazla bilgi için İzinler Politikası'ndaki Bildirim bölümüne göz atın.) Permissions-Policy
HTTP başlığına benzer şekilde Permissions-Policy-Report-Only
başlığı, ihlal raporlarını herhangi bir yaptırım uygulamadan gözlemlemenizi sağlar.
Sınırlamalar
Resim politikaları yalnızca HTML resim öğelerinde (<img>
, <source>
vb.) çalışır ve henüz arka plan resimlerinde veya oluşturulan içeriklerde desteklenmemektedir. Politikaların daha geniş içeriklerde desteklenmesini istiyorsanız lütfen bize bildirin.
Resimlerinizi optimize etme
Resimlerinizi optimize etme hakkında çok konuştuk ancak bunu nasıl yapacağınızı söylemedik. Bu konu bu makalenin kapsamı dışındadır ancak aşağıdaki bağlantılardan ve makalenin sonunda listelenen kod laboratuvarlarından daha fazla bilgi edinebilirsiniz.
Lütfen geri bildirimde bulunun
Bu makalenin, resim politikalarını iyi anlamanıza ve heyecanlanmanıza yardımcı olduğunu umuyoruz. Politikaları deneyip geri bildirimde bulunmanızı çok isteriz.
Bu makalede bahsedilen özelliklerin her biri için bize geri bildirim gönderebilirsiniz. Bunun için posta listemizi kullanabilirsiniz: feature-control@chromium.org.
Hangi eşik değerlerini kullanıp faydalı bulduğunuzu öğrenmekten memnuniyet duyarız. unoptimized-lossless-images
veya unoptimized-lossless-images-strict
'ün daha sezgisel ve kullanımı kolay olup olmadığını ya da bunun yerine farklı bir genel gider ödeneği kullanıp kullanmamız gerektiğini öğrenmekten memnuniyet duyarız. Deneme süresinin sonuna doğru bir anket göndereceğiz. Bizi izlemeye devam edin!