Hızlı yükleme süreleri ve daha fazlası için resim politikaları

Sitenizin en iyi performans gösteren resimleri kullandığından emin olmak için optimize edilmiş resim politikalarını kullanın.

Resimler genellikle önemli miktarda görsel alan kaplar ve web sitelerindeki indirilen baytların büyük bir kısmını oluşturur. Resimleri optimize etmek, yükleme performansını iyileştirebilir ve ağ trafiğini azaltabilir.

Şaşırtıcı bir şekilde, web'deki sitelerin yarısından fazlası yetersiz şekilde sıkıştırılmış veya gereksiz şekilde büyük resimler sunmaktadır. Bu durum, yalnızca resimleri optimize ederek performans iyileştirmeleri için epey alan bırakır.

"Resimlerimin optimize edilip edilmediğini nasıl anladığımı ve onları nasıl optimize etmem gerektiğini nasıl anladığımı" sorabilirsin. Resim optimizasyonu için bir dizi yeni özellik politikasıyla deneme yapıyoruz: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images veunoptimized-lossless-images-strict. Artık bunların tümü kaynak denemelerinde kullanılabilir.

Optimize edilmiş resim politikaları

İzin politikası, resimler üzerinde geliştirme zamanında yaptırımla uygulanabilecek yeni kısıtlamalar getiriyor. Kısıtlamalardan herhangi birini ihlal eden resimler, kolayca tespit edilip düzeltilebilen yer tutucu resimler olarak oluşturulur. Bu politikalar, raporlar aracılığıyla ihlaller gözlemlenirken resimlerin yaptırım olmadan normal şekilde oluşturulacağı "yalnızca rapor" modunda belirtilebilir. (Ayrıntılar için aşağıdaki Sadece raporlama modu bölümüne bakın.)

aşırı-büyük-resimler

oversized-images izinleri politikası, bir görüntünün iç boyutlarını kapsayıcı boyutuyla ilişkili olarak kısıtlar.

Bir belge oversized-images politikasını kullandığında, içsel çözünürlüğü her iki boyutta da kapsayıcı boyutundan X kat daha büyük olan tüm <img> öğeleri bir yer tutucu resimle değiştirilir.

Neden?

Görüntüleme cihazının oluşturabileceğinden daha büyük resimler sunmak (ör. mobil bağlamlara masaüstü resimleri veya düşük piksel yoğunluklu bir cihaza yüksek piksel yoğunluklu resimler sunmak) ağ trafiğini ve cihaz belleğini boşa harcar. Resimlerinizi optimize etme hakkında bilgi edinmek için Resimleri doğru boyutlarla sunma ve Duyarlı resimler sunma başlıklı makaleleri okuyun.

Örnekler

Bu durumu birkaç örnekle açıklayabiliriz. Aşağıda, bir resmin ekran boyutunu yarıya indirirken varsayılan davranış gösterilmektedir.

Aşağıdaki izin politikasını uygularsam bunun yerine bir yer tutucu resim elde ediyorum.

Permissions-Policy: oversized-images *(2);

Yalnızca genişliği veya yüksekliği azaltırsam benzer sonuçlar alıyorum.

How to use

Özetlemek gerekirse, oversized-images politikası aşağıdakilerden biri aracılığıyla belirtilebilir:

• Permissions-Policy HTTP üst bilgisi
• <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 (İsteğe bağlı)
• Kaynaklar için parantez içinde belirtilen eşik değerleri (ör. aşağı ölçeklendirme oranı X) (İsteğe bağlı)

Ölçeklendirme oranının 2,0 veya daha düşük bir değerde olmasını öneririz. Çeşitli ekran boyutları, çözünürlükler ve benzeri durumlarda, resimleri 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, eşik değeri 2,0 olan tüm kaynaklarda uygulanır. Aşağı ölçeklendirme oranı 2,0'dan büyük olan bir resme sahip tüm <img> öğelerine izin verilmez ve bunlar 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 göz atma 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 her yerdeki <img> öğeleri normal şekilde oluşturulur.

optimize edilmemiş-{lossy,lossless}-görüntüler

unoptimized-lossy-images, unoptimized-lossless-images ve unoptimized-lossless-images-strict özellik politikaları bir resmin doğal çözünürlüğüyle ilişkili olarak dosya boyutunu kısıtlar:

unoptimized-lossy-images

Kayıp dosya biçimleri, X piksel başına bayt oranını aşmamalıdır ve sabit 1 KB ek yük payı almıştır. G x Y resmi için dosya boyutu eşiği G x Y x X + 1024 olarak hesaplanır.

unoptimized-lossless-images

Kayıpsız biçimler, X'in piksel başına bayt oranını geçmemelidir. Ayrıca, sabit 10 KB ek yük payı kabul edilir. G x Y resmi için dosya boyutu eşiği, G x Y x X + 10.240 şeklinde hesaplanır.

unoptimized-lossless-images-strict

Kayıpsız biçimler, X'in piksel başına bayt oranını aşmamalıdır ve sabit 1 KB ek yük payı almıştır. G x Y resmi için dosya boyutu eşiği G x Y x X + 1024 olarak hesaplanır.

Bir doküman bu politikalardan birini kullandığında, kısıtlamayı ihlal eden <img> öğeleri bir yer tutucu resimle değiştirilir.

Neden?

İndirme boyutu ne kadar büyük olursa görselin yüklenmesi o kadar uzun sürer. Bir resim optimize edilirken dosya boyutu mümkün olduğunca küçük tutulmalıdır: meta verileri çıkarma, iyi bir resim biçimi seçme, resim sıkıştırma kullanma 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ı bir resim, optimize edilmiş bir resimle aynı şekilde görüntülenebilir.

Aşağıdaki izin politikasını uygularsam bunun yerine bir yer tutucu resim elde ediyorum.

Permissions-Policy: unoptimized-lossy-images *(0.5);

How to use

İzin politikasını yeni kullanmaya başladıysanız daha fazla ayrıntı için İzin Politikasına Giriş bölümünü inceleyebilirsiniz.

Özetle, unoptimized-{lossy,lossless}-images politikaları aşağıdakiler aracılığıyla belirtilebilir:

• Permissions-Policy HTTP üst bilgisi
• <iframe> allow özelliği

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 (İsteğe bağlı)
• Kaynaklar için parantez içinde belirtilen eşik değerleri (ör. piksel başına bayt oranı X) (İsteğe bağlı)

unoptimized-lossy-images için 0,5 veya daha düşük bir bayt/piksel oranı, unoptimized-lossless-images ve unoptimized-lossless-images-strict için ise 1 veya daha düşük bir bayt/piksel oranı öneririz.

WebP biçimleri, diğer biçimlerden daha iyi sıkıştırma oranlarına sahiptir. Mümkünse tüm resimlerinizi WebP kayıplı biçimde sunun. Bu yeterli değilse WebP kayıpsız biçimini deneyin. WebP biçimlerini desteklemeyen tarayıcılarda JPEG kullanın. Hiçbir biçim işe yaramıyorsa PNG kullanın.

WebP biçimleri kullanıyorsanız daha katı eşiklerle 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. Resmi, kısıtlamayı aşan piksel başına bayt oranına sahip olan <img> öğelerine izin verilmez ve bu öğelerin yerini bir yer tutucu resim alır.

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 (kayıplı biçimler için) ve 0,8 (kayıpsız biçimler için) eşik değeriyle uygulanır. Üst düzey tarama bağlamlarındaki <img> öğeleri ve aynı kaynakta iç içe yerleştirilmiş tarama bağlamları, yalnızca piksel başına bayt oranı bu kısıtlamaları karşılıyorsa normal şekilde oluşturulur. Diğer her yerde <img> öğeleri normal şekilde oluşturulur.

Kullanımda yalnızca rapor modu

Yer tutucu resimler içeren bir site yayınlamak istediğiniz olmayabilir. Geliştirme ve hazırlık sırasında politikaları yaptırım modunda (optimize edilmemiş resimler yer tutucu resimler olarak oluşturulmuş şekilde) ve üretimde yalnızca rapor modunu kullanabilirsiniz. (Daha fazla bilgi için İzin Politikası Raporlama'ya göz atın.) Permissions-Policy HTTP üst bilgisine benzer şekilde Permissions-Policy-Report-Only başlığı da ihlal raporlarını hiçbir yaptırım gerekmeden anında gözlemlemenizi sağlar.

Sınırlamalar

Resim politikaları yalnızca HTML resim öğelerinde (<img>, <source> vb.) çalışır ve arka plan resimlerinde veya oluşturulan içeriklerde henüz desteklenmemektedir. Daha geniş kapsamlı içeriklerle ilgili politikaların desteklenmesini istiyorsanız lütfen bize bildirin.

Resimlerinizi optimize etme

Resimlerinizi optimize etmekten epey bahsettim ama henüz bunu nasıl yapacağımı söylemedim. Bu konu, bu makalenin kapsamı dışındadır ancak aşağıdaki bağlantılardan ve makalenin sonunda listelenen codelab'lerden daha fazla bilgi edinebilirsiniz.

• Resimleri optimize etme
• Resimleri doğru boyutlarla sunma

Lütfen görüşlerinizi bizimle paylaşın

Bu makalenin resim politikalarını iyi anladığınızı ve sizi heyecanlandırdığını umuyorum. Politikaları deneyip bize geri bildirimde bulunmanızı çok isteriz.

Bu makalede bahsedilen özelliklerin her biri için posta listemize şu adresten geri bildirim gönderebilirsiniz: feature-control@chromium.org.

Hangi eşik değerlerini kullandığınızı ve bunları faydalı bulduğunuzu öğrenmek isteriz. unoptimized-lossless-images ile unoptimized-lossless-images-strict kullanımlarının daha sezgisel ve kolay olduğunu ya da bunun yerine farklı genel giderler mi kullanmamız gerektiğini bilmek isteriz. Deneme süresinin sonuna doğru bir anket göndereceğiz. Bizi izlemeye devam edin!