Görseller genellikle bir sayfadaki en ağır şeydir, ki bu onları kontrol ettiğiniz en büyük hız kolu yapar. Boyutlarını ve dosya ağırlığını doğru ayarlayın, sayfalar anında gibi hissettirir. Yanlış ayarlayın, kodunuz ne kadar temiz olursa olsun Core Web Vitals'ta başarısız olursunuz. İşte hedefler ve onları tutturacak iş akışı.
Boyut hedefleri
Görselin piksel boyutunu, gerçekte göründüğü yere uydurun. Kaba kılavuz:
- Tam genişlikte hero: 1600–2000 px genişlik çoğu masaüstü düzenini kapsar. Daha geniş gitmek nadiren yardımcı olur ve çok bayta mal olur.
- İçerik içi fotoğraf: içerik sütununuzun genişliği, çoğunlukla 800–1200 px.
- Küçük resim / kart görseli: 300–500 px.
- Avatar / simge: görüntülendiği boyutta 48–200 px.
800px'lik bir alana 4000px'lik bir görsel sunmak, tarayıcının hiç göstermeyeceği piksellerin 25 katını indirip çözmesi demektir. Bu saf israftır — ve büyük görselleri çözmek ana iş parçacığını da takar.
Ağırlık hedefleri
Boyutlar tavanı belirler; sıkıştırma gerçek ağırlığı belirler. Şunu hedefleyin:
- Hero görseli: 200 KB'nin altında (ideal olarak 100–150 KB).
- İçerik içi fotoğraf: 80–150 KB.
- Küçük resim: 10–30 KB.
- Sayfa başına toplam görsel: tüm sayfa için ~1 MB'nin altında kalmaya çalışın.
Tek bir görsel ~300 KB'yi aşıyorsa, onu araştırılacak bir hata olarak ele alın.
Bu neden Core Web Vitals'ı etkiler
Google'ın Largest Contentful Paint (LCP) metriği, ekrandaki en büyük öğenin oluşturulmasının ne kadar sürdüğünü ölçer — ve çoğu sayfada o en büyük öğe bir görseldir (genellikle hero). Ağır, aşırı büyük bir hero, LCP'yi doğrudan şişirir. İyi bir LCP 2,5 saniyenin altındadır; şişkin bir hero mobil bağlantılarda bunu tek başına aşabilir.
Görsele bağlı iki kazanım daha:
- Genişlik ve yükseklik özniteliklerini ayarlayın, böylece tarayıcı yer ayırır — bu, Cumulative Layout Shift (CLS) puanınızı korur.
- Hero'ya öncelik verin (LCP görselini geç yükleme yapmayın) ve ekranın altındaki her şeyi geç yükleyin.
İki adımlı iş akışı
Adım 1 — gerçek görüntüleme genişliğine yeniden boyutlandırın. Her görseli göründüğü boyuta indirmek için Görsel Boyutlandırıcı kullanın. En-boy kilidi açık, yüksek kaliteli küçültme. Tek başına bu, çoğu zaman ağırlığı %80–90 keser.
Adım 2 — sıkıştırın. Yeniden boyutlandırılmış dosyaları Görsel Sıkıştırıcıya verin: fotoğraflar için kalite 75–85 (görsel olarak kayıpsız), PNG'ler için 256 renk nicemleme. Asla orijinalden büyük bir dosya çıkarmaz, toplu işleri halleder ve isteğe bağlı bir genişlik sınırı vardır, böylece her iki adımı da tek seferde yapabilirsiniz. Modern tarayıcılar için fotoğrafları WebP'ye dönüştürmek bir %25–35 daha sıkar.
Ölçün, tahmin etmeyin
Görselleriniz optimize edildikten sonra, sayfanın gerçekten hızlandığını doğrulayın. IMG.DIY'nin Sayfa QA aracı, canlı bir URL'yi Google PageSpeed Insights üzerinden denetler ve sayfanın görsel ağırlığını raporlar, böylece hâlâ fazla ağır olan herhangi bir dosyayı yakalayabilirsiniz. Bir uyarı: Sayfa QA bir internet bağlantısına ihtiyaç duyar — görsel araçlarının aksine, Google'ın PageSpeed API'sini çağırır, dolayısıyla çevrimdışı çalışamaz. Gerçek LCP'nizi ve görsel bütçenizi kontrol etmek için yayına aldıktan sonra kullanın.
Varsayılan olarak gizli
Yeniden boyutlandır, sıkıştır ve dönüştür araçları Canvas ve WebAssembly ile tamamen tarayıcınızda çalışır — hiçbir şey yüklenmez ve ilk ziyaretinizden sonra önbelleğe alınır ve çevrimdışı çalışır. Bütün bir sitelik görseli bağlantı olmadan hazırlayabilir, sonra sayfa yayına girdiğinde Sayfa QA'yı çevrimiçi çalıştırabilirsiniz.
Hızlı özet: boyutları doğru ayarlayın, ağırlık hedeflerine sıkıştırın, LCP için hero'ya öncelik verin ve Sayfa QA ile doğrulayın.