Bir Web Sitesi için Görseller Hangi Boyutta Olmalı?

Aşırı büyük görseller, yavaş web sayfalarının en yaygın nedenidir ve sayfa hızı bir sıralama etkenidir. İşte boyutlar, dosya boyutu ve format için somut hedefler.

Yalnızca dönüştürücü mü gerekiyor? Ücretsizdir ve saniyeler sürer:

Hedef boyutlar

Dışa aktarılacak genişlikler bunlar. Altlarındaki kural basit: bir görseli, görüntüleneceği en büyük kutudan belirgin ölçüde geniş sunmayın.

Tam genişlik kapak veya banner: 1920 px genişlik
İçerik genişliğinde öne çıkan görsel: 1200–1600 px
Makale içi görsel: 800–1200 px
Kart veya önizleme küçük görseli: 400–600 px
Avatar veya ikon: 100–200 px
Open Graph sosyal önizleme: tam olarak 1200 × 630 px

Hedef dosya boyutları

Doğru boyutlar ve 75 civarı kaliteyle bunlara rahat ulaşılır. Çok üzerindeyseniz neden hemen her zaman kalite ayarı değil boyutlardır.

Kapak görseli: 200 KB altı
Makale görseli: 100 KB altı
Küçük önizleme: 30 KB altı
Tüm sayfa, tüm görseller toplamı: 1 MB altı

Bu, arama sıralamanızı neden etkiliyor

Google, Largest Contentful Paint'i — görünen en büyük öğenin çizilmesinin ne kadar sürdüğünü — ölçer ve sıralama sinyali olarak kullanır. Çoğu sayfada o en büyük öğe bir görseldir.

Etki mobilde katlanır. Ofis internetinde anında yüklenen 4 MB'lık bir kapak görseli, zayıf sinyalli bir telefonda saniyeler alabilir ve ziyaretçiler görünmeden ayrılır. Ziyareti ve sıralama sinyalini birlikte kaybedersiniz.

Retina ekranlar, abartmadan

Yüksek yoğunluklu ekranlar her CSS pikseline iki veya daha çok fiziksel piksel sığdırır; 800 px'te gösterilen bir görsel, daha çok veri vermezseniz yumuşak görünebilir. Standart öneri, görüntüleme boyutunun iki katında dışa aktarmaktır.

Pratikte 60 kalitede 2×, hem keskinlikte hem dosya boyutunda 90 kalitede 1×'i genellikle geçer — pikseller o kadar küçülünce sıkıştırma bozulmaları görünmez olur. En büyük görselinizi herkese sunmak yerine srcset ile seçimi tarayıcıya bırakın.

Hangi format

WebP'yi kullanımda olan her tarayıcı destekler ve eş kalitede JPEG'e göre tipik olarak %25–35 kazandırır. Görsel ağırlıklı bir sayfada bu, çoğu zaman eldeki en büyük tek hız iyileştirmesidir.

Fotoğraflar: WebP; çok eski tarayıcıları destekliyorsanız JPEG yedeğiyle.
Logolar, ikonlar, diyagramlar: mümkünse SVG, değilse PNG.
Ekran görüntüleri: PNG ya da bunları iyi işleyen WebP.
Saydamlık gereken her şey: PNG veya WebP, asla JPEG değil.

İki dakikalık bir iş akışı

Görselin görüntüleneceği en büyük genişliğe karar verin.
O genişliğe küçültün — yüksek yoğunluklu ekranlar için iki katına.
75 kalitede WebP'ye çevirin.
Dosya boyutunu yukarıdaki hedeflerle karşılaştırın.
Hâlâ büyükse, boyutları daha da düşürmeden önce kaliteyi 60'a indirin.