Hepimizin başına gelmiştir: Bir resmi sayfaya eklemeden önce ölçeğini küçültmeyi unutmuşsunuzdur. Resim iyi görünüyor ancak kullanıcı verilerini boşa harcıyor ve sayfa performansını düşürüyor.
Yanlış boyutlandırılmış resimleri tanımlama
Lighthouse, yanlış boyutlandırılmış resimlerin tanımlanmasını kolaylaştırır. Performans Denetimi'ni (Lighthouse > Seçenekler > Performans) çalıştırın ve Görüntüleri uygun şekilde boyutlandır denetiminin sonuçlarını bulun. Denetimde, yeniden boyutlandırılması gereken resimler listelenir.
Doğru resim boyutunu belirleme
Resim boyutlandırma yanıltıcı olabilir. Bu nedenle, iki yaklaşım sunuyoruz: "iyi" ve "daha iyi". Her ikisi de performansı artırır ancak "daha iyi" yaklaşımın anlaşılması ve uygulanması biraz daha uzun sürebilir. Bununla birlikte, daha büyük performans iyileştirmeleri de sağlar. Sizin için en iyi seçenek, uygulama konusunda rahat hissettiğiniz uygulamadır.
CSS birimleri hakkında kısa bir not
HTML öğelerinin boyutunu belirtmek için resimler de dahil olmak üzere iki tür CSS birimi vardır:
- Mutlak birimler: Mutlak birimler kullanılarak stillendirilen öğeler, cihazdan bağımsız olarak her zaman aynı boyutta görüntülenir. Geçerli ve mutlak CSS birimi örnekleri: px, cm, mm, in
- Göreli birimler: Göreli birimler kullanılarak stilize edilen öğeler, belirtilen göreli uzunluğa bağlı olarak farklı boyutlarda görüntülenir. Geçerli, göreli CSS birimi örnekleri: %, vw (1vw = görüntü alanının genişliğinin% 1'i), em (1,5 em = 1,5 kat yazı tipi boyutu).
"İyi" Yaklaşımı
Boyutlandırma şu kriterlere sahip resimler için:
- Göreli birimler: Resmi, tüm cihazlarda çalışacak bir boyuta yeniden boyutlandırın.
Kullanıcılarınızın hangi görüntülü reklam boyutlarını yaygın olarak kullandığını görmek için analiz verilerinizi (ör. Google Analytics) kontrol edebilirsiniz. Alternatif olarak, screensiz.es birçok yaygın cihazın ekranları hakkında bilgi sağlar. - Mutlak birim sayısı: Resmi, görüntülendiği boyuta uyacak şekilde yeniden boyutlandırın.
DevTools'un Öğeleri paneli, bir resmin hangi boyutta görüntüleneceğini belirlemek için kullanılabilir.
"Daha iyi" yaklaşım
Hem mutlak hem de göreli boyuta sahip resimlerde farklı görüntü yoğunluklarında farklı görüntüler sunmak için srcset ve sizes özelliklerini kullanın.
Duyarlı resimlerle ilgili rehberi okuyun.
"Görüntü yoğunluğu" farklı görüntülerin farklı piksel yoğunluklarına sahip olduğunu belirtir. Diğer her şey eşit olduğunda, yüksek piksel yoğunluğuna sahip bir ekran, düşük piksel yoğunluğuna sahip bir ekrandan daha net görünür.
Bu nedenle, cihazların piksel yoğunluğundan bağımsız olarak kullanıcıların mümkün olan en berrak resimleri yaşamasını istiyorsanız birden fazla resim sürümü gereklidir.
Duyarlı resim teknikleri, birden fazla resim sürümünü listelemenize ve cihazın bu sürüm için en uygun resmi seçmesine olanak tanıyarak bunu mümkün kılar.
Tüm cihazlarda kullanılabilecek bir resim, daha küçük cihazlarda gereksiz derecede büyük olacaktır. Duyarlı resim teknikleri, özellikle srcset ve sizes özellikleri, birden fazla resim sürümü belirtmenize ve cihazın kendisi için en uygun boyutu seçmesine olanak tanır.
Resimleri yeniden boyutlandırma
Hangi yaklaşımı seçerseniz seçin, resimlerinizi yeniden boyutlandırmak için ImageMagick'i kullanmak faydalı olabilir. ImageMagick resim oluşturmak ve düzenlemek için kullanılan en popüler komut satırı aracıdır. Çoğu kişi KSA kullanırken resimleri GUI tabanlı bir resim düzenleyiciye kıyasla çok daha hızlı bir şekilde yeniden boyutlandırabilir.
Resmi, orijinal boyutunun% 25'i oranında yeniden boyutlandır:
convert flower.jpg -resize 25% flower_small.jpg
Resmi "200 piksel genişlik ve 100 piksel yükseklik" değerine 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
Birçok resmi yeniden boyutlandıracaksanız işlemi otomatikleştirmek için bir komut dosyası veya hizmet kullanmak sizin için daha uygun olabilir. Duyarlı Resimler kılavuzunda bu konu hakkında daha fazla bilgi edinebilirsiniz.
Boyutları belirterek düzen kaymalarını önleyin
Bu kılavuzda, indirilen gereksiz bayt miktarının azaltılması bağlamında resim boyutları ele alınmaktadır. Ancak, düzendeki resimler için doğru alanın ayrılmasının, bir sayfanın Cumulative Layout Shift metriğini en aza indirmeyle ilgili bir diğer önemli bileşen olduğunu da unutmamak gerekir. HTML'de resim sunarken tarayıcının, resmin düzeninde ne kadar alan ayıracağını bilmesi için uygun 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 boyutları olmadan, tarayıcı, resim yüklenene kadar resmin ne kadar yer kaplayacağı konusunda hiçbir fikir sahibi değildir. Bu durum, dokümanda düzen kaymalarına neden olur ve kullanıcılar içeriği tüketmeye başladıktan sonra başka bir yere taşınırsa bu durum kullanıcılar için can sıkıcı olabilir. Bu, kullanıcıların okurken yerlerini kaybetmesine veya amaçladıkları isabet hedefini "kaçıp" ve sayfa yüklenirken istemedikleri başka bir şeyi tıklamalarına neden olabilir.
Genişliği ve yüksekliği açıkça belirtmeye alternatif olarak, resim üzerinde CSS aspect-ratio özelliğini kullanabilirsiniz. Bu, kapsayıcının tutarlı bir en boy oranı sağlaması açısından width ve height özelliklerinin yaptığı gibi bir öğenin boyutu üzerinde benzer bir etkiye sahiptir. Ancak aradaki fark, bunun resmin sağlandığından farklı bir en boy oranının kullanılmasına neden olabileceğinden, resmin 16/9'daki bu açık görünümde 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, hiçbir şeyi kaçırmadığınızı doğrulamak için Lighthouse'u tekrar çalıştırın.