Mobil cihazlara masaüstü boyutlu resimler sunmak, cihazlara kıyasla 2-4 kat daha fazla veri kullanımına neden olabilir gerekir. Kullanıcı deneyimini iyileştirmek için bu sayfadaki yönergeleri izleyin. farklı boyutlarda resimler yayınlayabilirsiniz.
Duyarlı resimler ve Core Web Vitals
Duyarlı resimler yayınladığınızda sayfanız, görüntüleme özelliklerini değerlendirir. görüntü önerilerinden birini seçerek görüntülü reklam için ideal olanı seçin. Bu sayede kullanıcılarınıza ait veriler kaydedilir, çoğunlukla daha küçük ekranlı cihazlara daha küçük resimler sunuyor.
Daha hızlı resim yüklemenin etkileri ayrıca, sayfanızın Largest Contentful Paint (LCP). Örneğin, sayfanız LCP öğesi bir resimdir ve yanıt vererek kaynak yükleme süresini azaltabilir.
Daha düşük kaynak yükleme süreleri, LCP görüntüsü için yükleme süresini kısaltarak sayfasının LCP puanını Düşük LCP, kullanıcıların sitenizin daha hızlı yüklendiğini göreceği anlamına gelir. Özellikle de en önemli içeriği (LCP öğesi) daha hızlı yükleniyor. Duyarlı resimler sunmak, diğer ağlar için bant genişliği anlaşmazlığını da azaltabilir. Bu, sayfanızın genel olarak yüklenme hızını iyileştirebilir.
Resimleri yeniden boyutlandır
En popüler iki görüntü yeniden boyutlandırma aracı sharp npm paketidir. ve ImageMagick CLI aracını kullanın.
Netlik paketi, resim yeniden boyutlandırmayı otomatikleştirmek için iyi bir seçenektir (örneğin, web sitenizdeki tüm videolar için birden çok boyutta küçük resim oluşturmak) için de kullanılabilir. Google hızlıdır ve derleme komut dosyaları ve araçlarıyla iyi entegre olur. ImageMagick daha tamamen komut dosyasına ait komut dosyasıyla çalıştığından, tek seferlik satırında görünür.
keskin
Net bir Düğüm komut dosyası olarak kullanmak için bu kodu sonra resimlerinizi dönüştürmek için çalıştırın:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Bir resmi orijinal boyutunun% 33'ü kadar olacak şekilde yeniden boyutlandırmak için aşağıdaki komutu terminaliniz:
convert -resize 33% flower.jpg flower-small.jpg
Bir resmi 300 piksel genişliğinde ve 200 piksel yüksekliğindeki bir alana sığacak şekilde yeniden boyutlandırmak için şu komutu kullanın:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Kaç görsel sürümü oluşturmanız gerekir?
Tek bir "doğru" yoktur bu soruyu yanıtlamıştım. Ancak, 3-5 farklı boyutta bir resim sunuyor. Daha fazla resim boyutu yayınlamak şunun için daha uygundur: performans gösterir ancak sunucularınızda daha fazla yer kaplar ve daha fazla HTML kodu içerir.
Diğer seçenekler
Thumbor (açık kaynak) gibi resim hizmetleri ve Cloudinary'yi de incelemenizi öneririz. Her ikisi de görseller sağlayan duyarlı resimler oluşturmanın basit yolları değişiklik gösterebilir. Thumbor'u kurmak için sunucunuza yükleyin. Cloudinary sunucu kurulumu gerekmez.
Birden fazla resim sürümü yayınlayın
Birden çok görsel sürümü belirlediğinizde, tarayıcı en iyisini seçer ve kullanın:
| Önce | Sonra |
|---|---|
| <img src="çiçek-büyük.jpg"> | <img src="çiçek-büyük.jpg" srcset="çiçek-kucuk.jpg 480g, büyük-çiçek.jpg 1080g" size="50vw"> |
<img> etiketinin
src,
srcset,
ve sizes
tüm özellikleri birbiriyle etkileşime girer.
"src" ilişkilendirmek
src özelliği,
srcset ve sizes desteklerini
özellikleri hakkında daha fazla bilgi edinin. Bu tarayıcılar,
src özelliği için de kullanılmaktadır.
"srcset" ilişkilendirmek
srcset özelliği, resim dosya adlarının ve bunların virgülle ayrılmış bir listesidir.
veya yoğunluk tanımlayıcılarını kullanın.
Bu örnekte,
genişlik tanımlayıcıları,
tarayıcıya bir resmin ne kadar geniş olduğunu bildirir ve böylece
resmine bakın. 480w bir genişlik tanımlayıcısıdır, tarayıcıya
flower-small.jpg 480 piksel genişliğinde. 1080w, bir genişlik tanımlayıcısıdır ve
flower-large.jpg 1.080 piksel genişliğinde bir tarayıcı.
Ekstra Kredi: Farklı resim boyutları sunmak için yoğunluk tanımlayıcılarını bilmeniz gerekmez. Ancak, yoğunluk tanımlayıcılarının nasıl çalıştığını merak ediyorsanız Çözüm değiştirme kodu laboratuvarı. Yoğunluk tanımlayıcıları, cihazın durumuna göre farklı görüntüler sunmak için kullanılır. piksel yoğunluğu.
"Boyutlar" ilişkilendirmek
Boyut özelliği, tarayıcıya resmin ne kadar geniş olacağını bildirir. ancak resmin görüntülenme boyutunu etkilemediğinden, bunun için CSS.
Tarayıcı, kullanıcı hakkında bildikleriyle birlikte bu bilgiyi kullanır. (boyutları ve piksel yoğunluğu dahil) kullanarak hangi resmin yükleyin.
Tarayıcı "sizes" özelliğini tanımazsa geri dönerse
"src" tarafından belirtilen resim yükleniyor özelliğini gönderin. (sizes ve srcset
her tarayıcı aynı anda kullanıma sunulduğundan
özellikleri olup olmadığını kontrol edin.)
Ekstra Kredi: Süslü isterseniz beden özelliğini belirtmek için de birden fazla alan boyutu kullanabilirsiniz. Bu, çeşitli öğeler için farklı düzenler kullanan web sitelerine boyutlarına ulaşabilirsiniz. Bu çok alanlı kod örneğine göz atın bunu nasıl yapacağınızı öğrenin.
(Daha fazla) Ek kredi
Yukarıda listelenen tüm ekstra kredilerin (resimler karmaşıktır!) yanı sıra, aynı kavramları farklı proje yönetimi yaklaşımları için de resim yönü kullanın. Sanatsal yönlendirme, tamamen farklı görünen resimler yayınlama uygulamasıdır. (aynı resmin farklı sürümleri yerine) farklı görüntü alanlarına uygulayabilirsiniz. Siz Daha fazla bilgi için Art Direction code lab'e göz atın.
Doğrula
Duyarlı resimleri uyguladıktan sonra, hiçbir resmi kaçırmadım. Lighthouse Performans Denetimini çalıştırma (Lighthouse > Seçenekler > Performans) tıklayın ve Resimleri uygun şekilde boyutlandırın denetimi. Bu sonuçlar, henüz yeniden boyutlandır'a dokunun.