Görsellerinizi küçültmeden sitenizi hızlandıramazsınız

Bir sayfayı ağırlaştıran şeyleri sıraya dizsek, çoğu sitede ilk sıra tartışmasız görsellerin olur. Kod, yazı tipi ve eklentiler toplandığında bile tek bir fotoğrafın ağırlığına ulaşamadığı durumlar sık. Üstelik bu, düzeltilmesi en kolay kalem: kod bilgisi istemez, tasarımı bozmaz ve etkisi hemen görülür. Bu yazıda görselin kendisiyle ne yapılacağını anlatıyoruz.

Boyut iki ayrı şey demektir

Görselde iki ayrı büyüklük var ve karıştırılıyor. Birincisi piksel ölçüsü: görselin eni ve boyu. İkincisi dosya ağırlığı: kaç kilobayt yer kapladığı. İkisi bağlantılıdır ama aynı şey değildir; aynı piksel ölçüsündeki iki fotoğraf, sıkıştırma ayarına göre kat kat farklı ağırlıkta olabilir. Doğru yol ikisine de bakmaktır: önce görseli sayfada kaplayacağı alana uygun piksel ölçüsüne indirin, sonra kaliteyi gözle takip ederek sıkıştırın. Kalite ayarını sonuna kadar açık bırakmak, kimsenin fark etmeyeceği bir netlik için sayfayı taşır.

Biçim seçimi: hangi görsel neye yazılır

Fotoğraflar için modern biçimler olan WebP ve AVIF, aynı görüntüyü belirgin şekilde daha küçük dosyada verir; tarayıcı desteği artık geniştir. Logo, ikon ve çizgi grafikler için doğru cevap genelde SVG’dir, çünkü vektördür: her boyutta net kalır ve dosyası küçüktür. Saydamlık gerekiyorsa PNG hâlâ kullanılabilir ama fotoğraflar için PNG kullanmak dosyayı gereksiz büyütür. Kural olarak: fotoğraf WebP, çizim SVG, gerisi istisnadır.

Telefona ve masaüstüne aynı dosyayı göndermeyin

Geniş ekranda tam genişlikte duran bir kapak görseli, telefonda çok daha dar bir alanda görünür. Buna rağmen çoğu sitede iki cihaza da aynı büyük dosya gider. Oysa tarayıcıya aynı görselin birkaç farklı ölçüsünü tanıtıp seçimi ona bırakmak mümkündür; tarayıcı ekran genişliğine göre uygun olanı indirir. Bunu yapmak sayfa tasarımını değiştirmez, sadece telefondan gelen ziyaretçinin indirdiği veri miktarını düşürür. Ziyaretçilerin büyük kısmı telefondan geldiği için, tek başına bu düzenleme çoğu sitede en büyük kazancı verir.

Sayfanın zıplamaması için en ve boy

Görsele en ve boy değeri verilmediğinde tarayıcı o alanın ne kadar yer kaplayacağını bilemez; görsel yüklendiği anda altındaki her şey aşağı iter. Kullanıcı tam okurken ya da bir bağlantıya basmak üzereyken sayfanın kaydığı o rahatsız edici an budur. Değerleri yazmak tek satırlık bir iştir ve hem kullanıcı deneyimini hem de Google’ın ölçtüğü kayma göstergesini doğrudan düzeltir.

Ücretsiz araçlarla nasıl yapılır

• Görselin kullanılacağı alanın genişliğini öğrenin; ekranda 800 piksel yer kaplayan bir alana 4000 piksellik dosya koymanın anlamı yok.
• Fotoğrafı o ölçüye indirin. Bilgisayardaki hazır görüntü uygulamaları bile bunu yapar.
• WebP’ye çevirin ve kalite ayarını gözle kontrol ederek düşürün; tarayıcıda çalışan ücretsiz dönüştürücüler bu iş için yeterli.
• Dosya adını anlamlı yazın: rastgele bir kod yerine işi anlatan kısa bir ad verin.
• Yüklemeden önce ağırlığa bakın. Sıradan bir içerik görselinin yüzlerce kilobayt olması için özel bir sebep olmalı.
• İlk ekranda görünmeyen görselleri geç yüklemeye bırakın; ilk ekrandakine bunu uygulamayın, orada ters çalışır.

Alt metni sadece Google için değil

Alt metni, görselin ne anlattığını yazıyla ifade eden alandır. İki işe yarar: ekran okuyucu kullanan ziyaretçiler görseli ancak bu metin sayesinde anlayabilir, ve Google görsel aramasında sayfanızı buradan tanır. Yazarken görüntüyü tarif edin, anahtar kelime doldurmayın. Sadece süs amaçlı, hiçbir bilgi taşımayan görsellerde alt metnini boş bırakmak doğru tercihtir; ekran okuyucu onu atlar ve gereksiz bir cümle dinletmez.

Bir de şu var: gereğinden fazla görsel

Bütün görseller optimize edilmiş olsa bile sayısı çoksa sayfa yine ağır olur. Bir hizmet sayfasında on beş dekoratif görselin ne işe yaradığını sorun; çoğu zaman cevap “boşluk doldursun diye” çıkıyor. Anlatıya katkısı olmayan görseli kaldırmak, onu küçültmekten daha etkilidir. Galeri gerekiyorsa küçük önizlemeleri gösterip büyük dosyaları yalnızca tıklandığında yüklemek makul bir orta yoldur.