Hepimizin başına gelmiştir: Bir resmi sayfaya eklemeden önce ölçeğini azaltmayı unutmak. Resim iyi görünüyor ancak kullanıcıların verilerini boşa harcıyor ve sayfa performansını olumsuz etkiliyor.
Boyutu yanlış olan resimleri belirleme
Lighthouse, yanlış boyutlandırılmış resimleri kolayca belirlemenizi sağlar. Performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın ve Resimleri uygun şekilde boyutlandırın denetiminin sonuçlarını inceleyin. Denetleme, yeniden boyutlandırılması gereken tüm resimleri listeler.
Doğru resim boyutunu belirleme
Görüntü boyutlandırma işlemi yanıltıcı derecede karmaşık olabilir. Bu nedenle, "iyi" ve "daha iyi" olmak üzere iki yaklaşım sunuyoruz. Her iki yaklaşım da performansı artırır ancak "daha iyi" yaklaşımı anlamak ve uygulamak biraz daha uzun sürebilir. Ancak bu, daha büyük performans iyileştirmeleriyle de sonuçlanır. Sizin için en iyi seçenek, uygulamaktan çekinmeyeceğiniz seçenektir.
CSS birimleri hakkında kısa bir not
Resimler de dahil olmak üzere HTML öğelerinin boyutunu belirtmek için 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österilir. Geçerli ve mutlak CSS birimlerine örnekler: px, cm, mm, in.
- Göreceli birimler: Göreceli birimler kullanılarak stillendirilen öğeler, belirtilen göreceli uzunluğa bağlı olarak farklı boyutlarda gösterilir. Geçerli, göreli CSS birimlerine örnekler: %, vw (1 vw = görüntü alanının genişliğinin% 1'i), em (1,5 em = yazı tipi boyutunun 1,5 katı).
"İyi" Yaklaşım
Boyutlandırması şu ölçütlere göre yapılan resimler için:
- Bağıl birimler: Resmi tüm cihazlarda çalışacak bir boyuta yeniden boyutlandırın.
Kullanıcılarınızın hangi ekran boyutlarını en çok tercih ettiğini görmek için analiz verilerinizi (ör. Google Analytics) kontrol etmeniz faydalı olabilir. Alternatif olarak, screensiz.es, birçok yaygın cihazın ekranları hakkında bilgi sağlar. - Mutlak birimler: Resmi, görüntülendiği boyuta uyacak şekilde yeniden boyutlandırın.
Bir resmin hangi boyutta görüntülendiğini belirlemek için Geliştirici Araçları Öğeler paneli kullanılabilir.
"Daha iyi" yaklaşımı
Hem mutlak hem de göreli boyutlandırma içeren resimlerde, farklı ekran yoğunluklarına farklı resimler sunmak için srcset ve sizes özelliklerini kullanın.
Duyarlı görsellerle ilgili kılavuzu okuyun.
"Ekran yoğunluğu", farklı ekranların farklı piksel yoğunluklarına sahip olmasını ifade eder. 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, kullanıcıların cihazlarının piksel yoğunluğundan bağımsız olarak mümkün olan en net görüntüleri deneyimlemesini istiyorsanız birden fazla resim sürümü gerekir.
Duyarlı resim teknikleri, birden fazla resim sürümü listelemenize ve cihazın kendisi için en uygun resmi seçmesine olanak tanıyarak bunu mümkün kılar.
Tüm cihazlarda çalışan bir resim, daha küçük cihazlar için gereksiz yere büyük olur. Duyarlı resim teknikleri (özellikle srcset ve sizes), birden fazla resim sürümü belirtmenize ve cihazın kendisine en uygun boyutu seçmesine olanak tanır.
Resimleri yeniden boyutlandırma
Seçtiğiniz yaklaşımdan bağımsız olarak, resimlerinizi yeniden boyutlandırmak için ImageMagick'i kullanmanız faydalı olabilir. ImageMagick, resim oluşturma ve düzenleme için en popüler komut satırı aracıdır. Çoğu kullanıcı, komut satırı arayüzünü kullanarak GUI tabanlı bir görüntü düzenleyiciye kıyasla görüntüleri çok daha hızlı yeniden boyutlandırabilir.
Resmi orijinal boyutunun% 25'i 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" olacak ş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 işlemi otomatikleştirmek için komut dosyası veya hizmet kullanmak daha uygun olabilir. Bu konu hakkında daha fazla bilgiyi Duyarlı Resimler Kılavuzu'nda bulabilirsiniz.
Boyutları belirterek düzen kaymalarını önleme
Bu kılavuzda, indirilen gereksiz bayt miktarını azaltma bağlamında resim boyutları ele alınsa da düzen içinde resimler için doğru alanı ayırmanın, bir sayfanın Cumulative Layout Shift metriğini en aza indirmenin bir diğer önemli bileşeni olduğunu belirtmek gerekir. Resimleri HTML'de yayınlarken tarayıcının düzende resim için ne kadar alan ayıracağını bilmesi amacıyla 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 boyutlandırması olmadan tarayıcı, yüklenene kadar resmin ne kadar alan kaplayacağını bilemez. Bu durum, belgede düzen kaymalarına neden olur. İçerik tüketmeye başladıktan sonra içeriğin taşınması kullanıcıları rahatsız edebilir. Bu durum, kullanıcıların okurken yerlerini kaybetmesine veya amaçladıkları hedefi "kaçırmalarına" ve sayfa yüklenirken istemeden başka bir şeyi tıklamalarına neden olabilir.
Genişlik ve yüksekliği açıkça belirtmek yerine, resimde CSS aspect-ratio özelliğini kullanabilirsiniz. Bu özellik, kapsayıcının tutarlı bir en-boy oranı koruması açısından width ve height özellikleriyle benzer bir etkiye sahiptir. Ancak bu durum, resmin sağlandığı en-boy oranından farklı bir en-boy oranının kullanılmasına neden olabilir. Bu nedenle, resmin bu açık 16/9 görünümünde bozulmamasını sağlamak için object-fit ayarını kullanmanız önerilir:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Doğrula
Tüm resimlerinizi yeniden boyutlandırdıktan sonra, bir şeyi atlamadığınızı doğrulamak için Lighthouse'u tekrar çalıştırın.