Web Siteniz İçin Görsel Optimizasyonu: Pratik Rehber

Görseller çoğu zaman sayfa aktarımının büyük bölümüdür ve keşif, çözme, düzen ile Largest Contentful Paint’i etkileyebilir. Optimizasyon anlamlı kazanç sağlayabilir, fakat sabit tasarruf veya sıralama sonucu her sayfaya uygulanmaz. İşte adım adım ölçülebilen akış.

Gorsel Optimizasyonu Neden Her Zamankinden Onemli?

HTTP Archive sayfa ağırlığı raporu, medyanlar değişse de görsellerin birçok sayfada önemli kaldığını gösterir. Largest Contentful Paint (LCP), görünümdeki en büyük uygun öğenin çizilme zamanını ölçer; çoğu zaman görseldir, her zaman değil.

Google’ın LCP eşikleri ziyaretlerin 75. yüzdelik diliminde 2.5 saniyeye kadar iyi, 4 saniyenin üstünü kötü sayar. LCP kaynağı darboğazsa görsel çalışması sayfayı eşikler arasında taşıyabilir, fakat tek başına Core Web Vitals geçişi veya arama konumu garanti etmez.

Adim 1: Dogru Formati Secin

Format seçimi boyut ve yetenekleri güçlü biçimde etkiler. Aşağıdaki karşılaştırma nitelikseldir; testler kaynağa, kodlayıcıya, ayarlara ve kalite hedefine bağlıdır:

WebP yararlı bir varsayılan adaydır, evrensel yanıt değildir. Süreç ve kitle AVIF destekliyorsa, WebP veya JPEG yedeğiyle daha erken <source> olarak test edin. Vizua’da JPG’yi WebP’ye veya AVIF’e dönüştürebilirsiniz; dosya tarayıcıda işlenir, sunucumuza gönderilmez.

Daha ayrıntılı karşılaştırma için WebP ve AVIF ile kayıplı ve kayıpsız sıkıştırma açıklamasına bakın.

Adim 2: Gercek Gorunum Boyutlarina Yeniden Boyutlandirin

4000 × 3000 piksellik fotoğraf 800 × 600 gösterildiğinde alandan çok daha fazla kaynak piksel taşır. Yüksek yoğunluklu duyarlı ekran daha büyük aday isteyebilir, fakat kamera aslını göndermek genellikle gereksiz aktarım ve çözme ekler.

İlke çizilen boyut ve yoğunluğa yakın adaylar sunmaktır. srcset ile sizes kullanın; sabit “Retina” çarpanı yerine düzen genişliği, cihaz yoğunluğu, kalite, yakınlaştırma ve sanat yönünü hesaba katın.

Düzeninize uyarlayacağınız örnek başlangıç boyutları:

• Tam genişlik hero: en büyük çizilen alandan başlayıp ilgili yoğunluk ve breakpoint adayları üretin
• İçerik görseli: içerik sütunu ve daha geniş duyarlı durumla eşleştirin
• Küçük resim: hero kullanmak yerine her kart boyutuna yakın aday üretin
• Avatar: gösterilen daire veya kare, cihaz yoğunluğu ve ayrıntılı profili hesaba katın

Sıkıştırmadan önce Vizua görsel boyutlandırıcı ile uygun adaylar oluşturun. Tasarruf ilk ve hedef piksel sayısına bağlıdır; dosyaları ölçün.

Adim 3: Dogru Kalite Ayariyla Sikistirin

Format ve boyuttan sonra kodlayıcıyı ayarlayın. Kalite ölçekleri doğrusal değildir ve kodlayıcılar veya formatlar arasında standart değildir. Kayıplı kodlayıcıda düşük değer genellikle daha az bayt için daha çok bilgi verir; boyut ve görünür değişimi gerçek çıktıda ölçün.

Onerilen kalite ayarlari:

• JPEG: 75–85 fotoğraflar için temkinli başlangıç olabilir. Ölçekler farklıdır; çıktıyı inceleyin.
• WebP: 75–80 başlangıç aralığıdır, JPEG değerine eşitlik garantisi değildir.
• AVIF: 60–75 bazı araçlarda başlangıç olabilir; ölçek ve kodlayıcı farklıdır.
• PNG: önce daha güçlü kayıpsız sıkıştırmayı deneyin. Paleti en fazla 256 girdiye indirgemek daha çok tasarruf sağlayabilir, ancak kayıplı renk azaltımıdır ve incelenmelidir.

Vizua JPEG sıkıştırıcı kalite ayarlayıp çıktıyı inceletir. Ayrıntılı yöntem için kalite kaybetmeden sıkıştırma rehberine bakın.

Adim 4: Gorselleri Verimli Sunun

Iyi sikistirma isinin yalnizca yarisidir. Gorselleri tarayiciya nasil sundudunuz performans icin en az o kadar onemlidir.

Acik boyutlar belirleyin

Her <img> için doğru içsel width ve height verin ya da alanı düzen kuralıyla ayırın. Tarayıcı oranı erken kurar. Bu görsel kaynaklı hareketi azaltır; fontlar, eklenen içerik, animasyon ve yanlış duyarlı stil yine Cumulative Layout Shift (CLS) etkiler.

Ekranin altindaki gorsellere tembel yukleme uygulayin

İlk görünümden yeterince uzaktaki görseller için loading="lazy" düşünün. LCP görseline veya hemen gereken içeriğe otomatik uygulamayın. Tarayıcı sezgileri, karuseller, baskı, hızlı kaydırma ve gizli düzenler test gerektirir.

Hero gorselinize oncelik verin

Olası LCP görselini ertelemeyin. Gerçekten erken bant genişliğini hak ediyorsa fetchpriority="high" düşünün ve başlangıç HTML’inde keşfedilsin. Yüksek önceliği geniş vermeyin; etkisini trace ve saha verisinde doğrulayın.

Duyarli gorseller kullanin

srcset ve sizes adayları ve beklenen alanı tanımlar. Tarayıcı görünüm, yoğunluk, önbellek ve uygulamayı düşünür. sizes gerçek düzenle eşleşmeli; yanlış değer büyük veya küçük aday seçebilir.

Adım 5: düzenli denetleyin ve ölçün

Optimizasyon tek seferlik bir is degildir. Eklediginiz her yeni gorsel gerileme firsatidir.

• PageSpeed Insights: temsili sayfalarda PageSpeed Insights çalıştırın. Saha ve laboratuvar LCP’yi ayrı inceleyin, değişebilir denetim etiketi yerine güncel tanılara bakın.
• DevTools Network: istekleri boyuta göre sıralayıp büyük görselleri bağlamda inceleyin. Evrensel KB sınırı yerine boyut, format, sıkıştırma, önbellek ve önceliğin role uyumunu sorun.
• Otomatikleştirin: büyük görselleri yayından önce bulmak için optimizasyonu build sürecine ekleyin.

Hizli Kontrol Listesi

• Uygun JPEG, WebP, AVIF, PNG veya SVG varyantlarını üretip karşılaştırın
• Gerçek gösterim boyutuna küçültün, gerekenden geniş olmayın
• Temkinli ayarlarla başlayıp bayt ve görünümü karşılaştırın; formatlar arası kalite sayılarını eşitlemeyin
• Her <img> için genellikle içsel width ve height ile doğru alan ayırın
• Olası LCP için fetchpriority="high" düşünün, sonra ölçün
• Uygun ekran dışı görselleri erteleyin; kaydırma ve düzeni test edin
• Duyarli dagitim icin srcset/sizes kullanin
• Performans bütçesini sayfa, kitle ve saha verisinden belirleyin
• Gereksiz özel meta veriyi silin, gereken renk profili ve veriyi koruyun — EXIF ve gizlilik
• PageSpeed Insights ile duzenli denetim yapin

Sik Sorulan Sorular