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

Sitenizde en iyi performans gösteren resimlerin kullanılmasını sağlamak için optimize edilmiş resim politikalarını kullanın.

Luna Lu
Luna Lu

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.

Varsayılan yeniden boyutlandırma davranışı.
Varsayılan yeniden boyutlandırma davranışı.

Aşağıdaki izin politikasını uygularsam bunun yerine yer tutucu resim görüyorum.

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

Resim, kapsayıcı için çok büyükse.
Resim kapsayıcı için çok büyük olduğunda.

Yalnızca genişliği veya yüksekliği düşürdüğümde benzer sonuçlar alıyorum.

Yeniden boyutlandırılan genişlik Yeniden boyutlandırılan yükseklik
Genişliği ve yüksekliği yeniden boyutlandırın.

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.

Optimize edilmiş bir resmi optimize edilmemiş bir resimle karşılaştırma.
Optimize edilmiş bir resmi optimize edilmemiş bir resimle karşılaştırma.

Aşağıdaki izin politikasını uygularsam bunun yerine yer tutucu resim görüyorum.

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

Resim optimize edilmediğinde.
Resim optimize edilmediğinde.

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!