Hepimiz bunu yaşadık: Bir resmi sayfasını ziyaret edin. Resim iyi görünüyor, ancak kullanıcıları boşa harcıyor veriler ve zarar veren sayfa bazı yolları da görmüştük.
Yanlış boyutlu resimleri tanımlama
Lighthouse, yanlış boyutlu resimlerin tanımlanmasını kolaylaştırır. (Lighthouse > Seçenekler > Performans) tıklayın ve Resimleri uygun şekilde boyutlandırın denetiminin sonuçlarını içerir. Denetimde, feed'de bulunan ve yeniden boyutlandırılması gerekiyor.
Doğru resim boyutunu belirleyin
Resim boyutlandırma yanıltıcı olabiliyor. Bu nedenle, hemfikir olmak için yaklaşımları: “iyi” ve "daha iyisini". Her ikisi de performansı artırır ancak "daha iyi" bu yaklaşımın anlaşılması ve uygulanması biraz daha uzun sürebilir. Ancak, daha da büyük performans iyileştirmeleriyle ödüllendirilir. Şu rol için en iyi seçenektir: uygulamayı rahatça siz belirlersiniz.
CSS birimleriyle ilgili kısa bir not
HTML öğelerinin boyutunu belirtmek için iki tür CSS birimi vardır: (resimler dahil):
- Mutlak birimler: Mutlak birimler kullanılarak stilize edilen öğeler her zaman cihazdan bağımsız olarak aynı boyutta görüntülenir. Geçerli, mutlak CSS birimleri: px, cm, mm, in.
- Göreli birimler: Göreli birimler kullanılarak stilize edilen öğeler şurada görüntülenir: göreceli uzunluğa göre değişen boyutlarda gösterilebilir. Örnekler geçerli, göreli CSS birimleri: %, vw (1vw = görünümün genişliğinin% 1'i), em (1,5 em = 1,5 kat yazı tipi boyutu).
"İyi" Yaklaşım
Boyutlandırma ölçütü olarak kullanılan resimler için...
- Göreli birimler: Resmi, tüm cihazlarda çalışacak bir boyuta yeniden boyutlandırın.
Analiz verilerinizi (ör. Google Analytics) inceleyerek kullanıcılarınızın en sık kullandığı ekran boyutlarını görebilirsiniz. Alternatif olarak, screensiz.es pek çok yaygın cihazın ekranı hakkında bilgi sağlar. - Mutlak birimler: Resmi, gösterildiği boyuta uyacak şekilde yeniden boyutlandırın.
Geliştirici Araçları Öğeleri paneli, bir resmin boyutunu belirlemek için kullanılabilir görüntülenme zamanı.
"Better" (Daha İyi) yaklaşım
Hem mutlak hem de göreli boyutlandırmaya sahip resimler için srcset değerini kullanın.
ve sizes
özelliklerini kullanır.
Duyarlı resimlerle ilgili rehberi okuyun.
"Görüntü yoğunluğu" farklı ekranların birbirinden farklı piksel yoğunlukları. Diğer her şey eşit olduğunda, yüksek piksel yoğunluğu görüntü, düşük piksel yoğunluğuna sahip bir ekrandan daha keskin görünür.
Sonuç olarak, kullanıcıların belirli bir reklamı görüntülemesini piksel yoğunluğundan bağımsız olarak mümkün olan en net resimleri elde etmek erişim izni isteyebilir.
Duyarlı resim teknikleri sayesinde, birden fazla reklamı uygulamanın çalışan imajı seçmesine yardımcı olması için de en iyisidir.
Tüm cihazlarda çalışan bir resim, daha küçük cihazlarda Duyarlı resim teknikleri, özellikle srcset ve boyutlar, birden fazla resim sürümü belirtmenizi ve cihazın seçim yapmasına olanak tanır. bir boyutu seçmemiz gerekir.
Resimleri yeniden boyutlandır
Seçtiğiniz yaklaşım ne olursa olsun, Resimlerinizi yeniden boyutlandırmak için ImageMagick'i kullanın. ImageMagick ise dünyanın en popüler komut satırı aracı ile resim oluşturabilir ve düzenleyebilirsiniz. Çoğu kullanıcı resimleri yeniden boyutlandırabilir çok daha hızlı çalışmasını sağlar.
Resmin boyutunu orijinalden% 25 oranında olacak şekilde yeniden boyutlandırın:
convert flower.jpg -resize 25% flower_small.jpg
Resmi "200 piksel genişliğinde ve 100 piksel yüksekliğinde" sığacak şekilde ölçeklendirin:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Çok sayıda resmi yeniden boyutlandıracaksanız, bir boyut oluşturmak için bir komut dosyası veya hizmet kullanarak süreci otomatikleştirin. Şuradan daha fazla bilgi edinebilirsiniz: Duyarlı Resimler kılavuzu.
Boyut belirterek düzen kaymalarını önleyin
Bu kılavuzda resim boyutları, indirilen gereksiz bayt miktarını azaltma bağlamında ele alınmaktadır. Bununla birlikte, düzende resimler için doğru alanı ayırmanın, bir sayfaya ait Cumulative Layout Shift metriğini en aza indirmenin başka bir önemli bileşeni olduğunu unutmayın. HTML'de resim sunarken tarayıcının resim düzeninde ne kadar alan ayrılması gerektiğini bilmesi için doğru width ve height özelliklerini kullandığınızdan emin olun:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Bu özellikler veya eşdeğer CSS boyutlandırması olmadan, tarayıcının resim yüklenene kadar ne kadar yer kaplayacağı konusunda fikri yoktur. Bu durum, dokümanda düzen kaymalarına neden olur. Bu durum, içeriğin tüketilmeye başladıktan sonra taşınmasını kullanıcılar için can sıkıcı hale getirebilir. Bu durum, kullanıcıların okurken yerlerini kaybetmelerine veya bilgileri "gözden kaçırmalarına" neden olabilir. amaçlanan isabet hedefini bulmak ve sayfa yüklenirken istemeden başka bir şeyi tıklamaktır.
Genişlik ve yüksekliği açıkça sağlamanın alternatifi, resimde CSS aspect-ratio özelliğini kullanmaktır. Bu durum, öğelerin boyutu üzerinde, kapsayıcının tutarlı bir en boy oranı sağlaması bakımından width ve height özelliklerine benzer bir etkiye sahiptir. Ancak aradaki fark, resmin sağlandığından farklı bir en boy oranının kullanılmasına neden olabileceğidir. Bu nedenle, bu açık 16/9 görünümünde resmin bozulmadığından emin olmak için bir object-fit ayarı kullanmak isteyebilirsiniz:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Doğrula
Tüm resimlerinizi yeniden boyutlandırdıktan sonra, yeniden boyutlandırmadığınızdan emin olmak için Lighthouse'u yeniden çalıştırın hiçbir şeyi özlediniz.