Web görsel dosya boyutları ve formatları için pratik rehber

Her görsel ağ, çözme, bellek ve işleme kaynakları için yarışır. Yararlı bütçe sayfaya özeldir; görselin rolünü, kitleyi, önbelleği, görünüm alanını ve kaliteyi hesaba katar. Aşağıdaki aralıklar test başlangıçlarıdır, evrensel geçme sınırları değildir.

Kullanıma göre başlangıç bütçeleri

Bu aralıklar ölçülü bir web teslim bütçesini gösterir. JPEG, WebP veya AVIF sonuçlarınız üstte ya da altta olabilir; kaynağa, kodlayıcıya, gösterim boyutuna, saha performansına ve görsel incelemeye göre ayarlayın.

Başlangıç aralıklarını bütçenize dönüştürme

HTTP Archive sayfa ağırlığı raporu güncel dağılım verir, ancak küresel ortanca kitleniz değildir. Google’ın yayımladığı “iyi” LCP eşiği ziyaretlerin 75. yüzdelik diliminde 2,5 saniyedir. Saha verileri ve şelale grafiğiyle süreyi sunucu yanıtı, kaynak keşfi, aktarım, çözme ve işleme gecikmesine bölün.

Sayfa düzeyinde aktarım bütçesiyle başlayıp kullanıcıya en çok değer veren görsellere daha fazla pay ayırın. Düzen, görsel sayısı, kitle veya kalite gereksinimi değişince tablo aralıklarını gözden geçirin.

Format temel değişkenlerden biridir

Aynı kaynak kodlayıcıya ve kalite hedefine göre çok farklı boyutlar üretebilir. Bu tablo, 1200 piksellik fotoğraf için evrensel ölçüt değil, karşılaştırılacak davranışları gösterir.

Bazı karşılaştırmalarda WebP veya AVIF JPEG çıktısını geçebilir, fakat sabit bir yüzde tüm kaynaklar ve kodlayıcılar için geçerli değildir. İki modern format da saydamlığı destekler. WebP ve AVIF rehberine bakın.

JPG’den WebP’ye, listelenen girişler için AVIF’e dönüştürme veya aracın gösterdiği formatlar için Toplu dönüştürme ile adaylar oluşturun.

Piksel Boyutlari: Gizli Carpan

Piksel sayısı, içerik, bit derinliği, meta veriler, format, kodlayıcı ve ayarlar dosya boyutunu etkiler. Gereksiz boyutları azaltmak kodlayıcının temsil edeceği veriyi çoğu zaman büyük ölçüde azaltır.

4000 × 3000 görsel 12 milyon piksele; 1200 × 900 ise 1,08 milyon piksele sahiptir ve 91% daha azdır. Aynı kanal sayısı ve hassasiyette kodlayıcıya verilen sıkıştırılmamış raster büyük ölçüde azalır; nihai bayt tasarrufu yine içerik ve ayarlara bağlıdır.

Duyarlı kural: olası gösterim genişliklerine ve yoğunluklarına yakın adaylar sunun. İçerik alanı 720 CSS piksel genişliğindeyse 1440px aday 2× ekrana uyabilir; yakınlaştırma, kırpma, düzen değişikliği ve daha yüksek yoğunluk seçimi değiştirebilir. Seçenekleri srcset ve sizes ile açıklayın.

Vizua Resim Boyutlandırma ile düzenin ihtiyaç duyduğu adayı oluşturun. Sonra uygun JPEG veya PNG sıkıştırıcıyı test edin; önceden optimize edilmiş kaynak küçülmeyebilir.

Sikistirma Kalitesi: Dogru Dengeyi Bulmak

Gorseliniz dogru boyutta ve dogru formatta olduqunda, sikistirma kalitesi son ayar kadrandir. Iste bu uc kaldiracion birlikte nasil calistigini gosteren pratik bir senaryo:

Örnek akış: 4000 × 3000 ana dosyayla başlayıp teslim kümesinin dışında tutun.

1. Alan ve hedef yoğunluğa uyuyorsa 1200 × 900 gibi bir adaya boyutlandırın
2. Seçilen başlangıç kalitesinde WebP adayı dışa aktarın ve gerçek dosyayı inceleyin
3. Yığın destekliyorsa AVIF adayı dışa aktarın; boyut, görünüm ve kodlama maliyetini karşılaştırın

Kullanımı karşılayan en küçük adayı seçin. Nihai tasarruf ve görünür fark yalnız örnek boyutlardan değil gerçek kaynak ve çıktılardan gelir.

Format bazinda detayli kalite onerileri icin rehberimize goz atin: Kalite kaybetmeden resim sikistirma.

Ozel Durumlar

E-ticaret urun sayfalari

Ürün fotoğrafları mağazanın desteklediği yakınlaştırmada kullanışlı kalmalıdır. Korunan ana dosyadan duyarlı adaylar üretin, ayrıntıları test edin ve ızgara, ana görünüm, yakınlaştırma için ayrı bütçeler koyun. Pazaryeri yükleme gereksinimleri mağaza tesliminden farklı olabilir.

Fotograf portfoyleri

Portföyler duyarlı önizlemeler sunup uygun olduğunda bilinçli yüksek çözünürlük görünümü sağlayabilir. Boyutları ve bayt bütçelerini düzenden ve beklenen ekranlardan çıkarıp doku, geçiş ve renk profillerini inceleyin.

Sosyal medya paylasimi (Open Graph)

Open Graph önerileri ve kabul edilen formatlar platforma göre değişir ve güncellenebilir. 1200 × 630 JPEG veya PNG yaygın bir başlangıçtır; güncel hedef kılavuzunu ve önizlemeyi doğrulayın. Tarayıcı botları bu dosyaları sayfanın tembel yüklemesinden bağımsız alır.

Toplam Sayfa Gorsel Butcesi

Performans hedefinizden sayfa bütçesi oluşturun. Test edilebilecek bir ilk dağılım şöyledir:

• 1 hero gorsel: ~150 KB
• 3-4 icerik gorseli: her biri ~100 KB, toplam ~300-400 KB
• Kucuk resimler, avatarlar, ikonlar: toplam ~50 KB

Bu örnek hız garantisi değildir. Galeri ve ürün ızgaraları uygun ekran dışı görselleri erteleyebilir, fakat tembel yüklenen kaynaklar istendiğinde veri tüketir ve kaydırmayı etkileyebilir. Başlangıç ve etkileşim performansını temsili cihaz ve ağlarda ölçün.

Sik Sorulan Sorular