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.

Ş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.

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.

Genişlik yeniden boyutlandırıldı 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ğ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.

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

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!