Kısaca: Web için görsel hazırlamanın üç kuralı var: doğru format, doğru boyut, doğru sıkıştırma. Fotoğraflar için WebP ya da AVIF, saydam arka planlı grafikler için WebP ya da PNG, logo ve ikonlar için SVG kullanın. Görseli sayfada gösterileceği en büyük boyuta (yüksek çözünürlüklü ekranlar için iki katına) küçültün. Favicon için bugün çoğu sitede beş dosya yeterli: 32 piksel ICO, bir SVG, 180 piksel Apple simgesi ve 192 ile 512 piksel iki PNG.
Kısa cevap
Bir web sayfasının ağırlığının büyük kısmı genellikle görsellerdir. Telefonla çekilmiş bir fotoğrafı olduğu gibi yüklemek, sayfayı megabaytlarca ağırlaştırabilir. Siteniz neden yavaş yazısında devraldığım sitelerde en sık gördüğüm sorunun büyük görseller olduğunu yazmıştım. Bu yazıda görselleri web’e uygun hâle getirmenin kurallarını ve site simgesi (favicon) dosyalarını anlatıyorum.
1. Doğru format
| Format | Tür | Saydamlık | Ne için? |
|---|---|---|---|
| AVIF | Piksel, çok iyi sıkıştırma | Var | Fotoğraflar; en küçük dosya boyutu |
| WebP | Piksel, iyi sıkıştırma | Var | Fotoğraflar ve grafikler; güvenli varsayılan |
| JPG | Piksel, kayıplı | Yok | Eski sistemlerle uyum gereken fotoğraflar |
| PNG | Piksel, kayıpsız | Var | Keskin kenarlı grafikler, ekran görüntüleri |
| SVG | Vektör | Var | Logolar, ikonlar, basit çizimler |
WebP bugün bütün güncel tarayıcılarda destekleniyor. AVIF de bütün büyük tarayıcılarda destekleniyor ve aynı kalitede genellikle daha küçük dosya üretiyor. WordPress, 5.8 sürümünden beri WebP’yi, 6.5 sürümünden beri AVIF’i destekliyor; AVIF için sunucunuzun görsel işleme kütüphanesinin de bu biçimi desteklemesi gerekiyor. Bunu panelde Araçlar → Site Sağlığı → Bilgi → Ortam İşleme bölümünden kontrol edebilirsiniz (WordPress).
Logo dosyalarının hangi formatta teslim edileceğini logo dosya formatları yazısında ayrıntılı anlattım.
2. Doğru boyut
Bir görsel ekranda 800 piksel genişliğinde gösteriliyorsa, 4000 piksellik orijinalini yüklemek ziyaretçiye 25 kat fazla piksel indirtmek demektir. Kural basit:
- Görselin sitede gösterileceği en büyük genişliği bulun (örneğin içerik alanı 800 piksel).
- Yüksek çözünürlüklü (retina) ekranlar için bunun iki katına küçültün: 1600 piksel.
- WordPress yükleme sırasında farklı boyutlar üretir ve
srcsetile her ekrana uygun olanı sunar; bu yüzden en büyük boyutu doğru seçmeniz yeterli. - Tam genişlik kapak görselleri için 1920–2400 piksel genellikle yeterlidir. WordPress 2560 pikselden büyük görselleri zaten otomatik küçültür.
3. Doğru sıkıştırma
Kayıplı formatlarda (AVIF, WebP, JPG) kalite ayarı dosya boyutunu belirler. Fotoğraflar için %75–85 kalite, gözle fark edilmeyen bir kayıpla dosyayı ciddi ölçüde küçültür. Grafik ve metin içeren görsellerde kaliteyi biraz daha yüksek tutun; düşük kalitede yazıların kenarları bulanıklaşır.
Ücretsiz Squoosh gibi tarayıcı tabanlı araçlar, farklı format ve kalite ayarlarını yan yana karşılaştırmanızı sağlar. Çok sayıda görsel için WordPress görsel optimizasyon eklentileri ya da hosting firmanızın sunduğu otomatik dönüştürme özellikleri işi kolaylaştırır.
4. Görsel ayrıntıları: dosya adı, alt metin, yükleme
- Anlamlı dosya adı:
IMG_4532.jpgyerineistanbul-ofis-toplanti-odasi.webp. Türkçe karakter ve boşluk kullanmayın. - Alt metin: Görselin sayfadaki işlevini anlatan kısa bir açıklama. Kurallarını web erişilebilirliği yazısında anlattım.
- Boyut bilgisi:
widthveheightdeğerleri, görsel yüklenirken sayfanın kaymasını (CLS) önler. WordPress bunu kendi eklediği görsellerde otomatik yapar. - Gecikmeli yükleme: Sayfanın aşağısındaki görseller
loading="lazy"ile kullanıcı yaklaşınca yüklenir. İlk ekrandaki ana görselde ise bunu kullanmayın; o görselin hemen yüklenmesi gerekir.
Favicon (site simgesi) nasıl hazırlanır?
Favicon, tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında sitenizin yanında görünen küçük simgedir. Eskiden onlarca farklı boyut hazırlanırdı. Evil Martians’ın sık güncellenen rehberine göre bugün çoğu site için beş dosya yeterli (Evil Martians):
- favicon.ico (32 × 32): Eski tarayıcılar ve sitenin kök dizininde bu dosyayı arayan araçlar için.
- icon.svg: Modern tarayıcılar için; vektör olduğu için her boyutta keskindir ve içine yazılan CSS ile karanlık temaya uyum sağlayabilir.
- apple-touch-icon.png (180 × 180): iPhone ve iPad’de siteyi ana ekrana eklediğinizde görünen simge. Saydam arka plan kullanmayın; iOS saydam alanları siyahla doldurur.
- icon-192.png ve icon-512.png: Android ve uygulama gibi yüklenebilen siteler (PWA) için, web uygulama bildirimi (manifest) dosyasında tanımlanır.
Favicon tasarımında dikkat edilecekler
- Logonun tamamı değil, en ayırt edici parçası (simge ya da baş harf) kullanılır; 16 piksellik bir sekmede yazı okunmaz.
- Kalın çizgiler ve yüksek kontrast seçin.
- Açık ve koyu sekme temalarında ayrı ayrı test edin.
- WordPress’te Görünüm → Özelleştir → Site Kimliği bölümünden en az 512 piksellik kare bir görsel yükleyerek temel simgeleri otomatik oluşturabilirsiniz; SVG favicon için temaya kod eklemek gerekir.
Sık sorulan sorular
WebP mi AVIF mi kullanmalıyım?
İkisi de iyi seçim. Sunucunuz ve iş akışınız AVIF’i destekliyorsa daha küçük dosyalar elde edersiniz. Emin değilseniz WebP güvenli ve yaygın bir varsayılandır.
PNG’yi tamamen bırakmalı mıyım?
Hayır. Kayıpsız kalite gereken ekran görüntüleri ve keskin kenarlı grafikler için PNG hâlâ kullanışlıdır. Ama fotoğraf için PNG, gereksiz büyük dosya demektir.
Görselleri yüklemeden önce mi küçültmeliyim, eklenti mi kullanmalıyım?
İkisi birlikte en iyisidir: Yüklemeden önce doğru boyuta küçültün; eklenti ya da sunucu tarafı optimizasyon da format dönüştürme ve sıkıştırmayı üstlensin.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
