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.
Şaşırtıcı bir şekilde, web'deki sitelerin yarısından fazlası kötü bir şekilde sıkıştırılmış veya gereksiz biçimde büyük resimler sunmaktadır. 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 anladığımı ve bunları nasıl optimize etmem gerektiğini nasıl anlayacağım?" diye sorabilirsiniz. Resim optimizasyonuyla ilgili yeni özellik politikalarını deniyoruz: oversized-images
, unoptimized-lossy-images
,
unoptimized-lossless-images
ve unoptimized-lossless-images-strict
.
Artık tüm bu özellikler kaynak denemelerinde 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
Birkaç örnek bunu göstermektedir. 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ğerleri (yani X küçültme oranı) (İsteğe bağlı)
2,0 veya daha düşük bir küçültme oranı önerilir. Çeşitli ekran boyutları, çözünürlükler vb. için görselleri en iyi şekilde sunmak için farklı çözünürlüklere sahip duyarlı resimler kullanmayı düşünün.
Diğer örnekler
Permissions-Policy: oversized-images *(2.0)
Politika, 2,0 eşik değeriyle tüm kaynaklarda uygulanır. Aşağı ölçeklendirme oranı 2,0'dan yüksek olan bir resme sahip tüm <img>
öğeleri için izin verilmez ve bu öğeler bir 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 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ş kayıplı resimler optimize edilmiş resimlerle aynı şekilde görüntülenebilir.
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
Bir unoptimized-{lossy,lossless}-images
politikası beyan etmek için şunları sağlamanız gerekir:
- Özellik adı, örneğin,
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 de 1 veya daha düşük bir bayt/piksel oranı önerilir.
WebP biçimleri, diğer biçimlerden daha iyi sıkıştırma oranlarına sahiptir. 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çimlerini 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, eşik değeri 0,5 (kayıplı biçimler için) ve 1 (kayıpsız biçimler için) olan tüm kaynaklarda uygulanır. Resminin piksel başına bayt oranı kısıtlamayı aşan herhangi bir <img>
öğesine izin verilmez ve bu öğeler bir 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 <img>
öğeleri ve aynı kaynaktan, iç içe yerleştirilmiş göz atma bağlamları yalnızca piksel başına bayt oranı bu kısıtlamaları karşılıyorsa normal bir ş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, üretim aşamasında ise yalnızca rapor modunu kullanabilirsiniz. (Daha fazla bilgi için İzin Politikası Raporlaması bölümüne bakın.) Permissions-Policy
HTTP üst bilgisine benzer şekilde, Permissions-Policy-Report-Only
üst bilgisi de ihlal raporlarını herhangi bir yaptırım olmadan gerçek zamanlı olarak gözlemlemenizi sağlar.
Sınırlamalar
Resim politikaları yalnızca HTML resim öğelerinde (<img>
, <source>
vb.) çalışır ve arka plan resimleri veya oluşturulmuş içeriklerde henüz 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 kullanmamız gerekip gerekmediğini öğrenmekten memnuniyet duyarız. Deneme süresinin sonuna doğru bir anket göndereceğiz. Bizi izlemeye devam edin!