---
title: "WebP ve AVIF Nedir? Web Sitesi Görselleri Hangi Formatla Yüklenmeli?"
id: "2325"
type: "post"
slug: "webp-ve-avif-nedir"
published_at: "2026-11-04T23:57:47+00:00"
modified_at: "2026-11-04T23:57:50+00:00"
url: "https://zeymedya.com/webp-ve-avif-nedir/"
markdown_url: "https://zeymedya.com/webp-ve-avif-nedir.md"
excerpt: "WEB TASARIM VE SİTE YÖNETİMİ · GÖRSEL OPTİMİZASYONU Bir web sitesinin ana sayfasında büyük bir fotoğraf, blog yazısında çok sayıda görsel veya e-ticaret sitesinde yüksek çözünürlüklü ürün fotoğrafları bulunabilir. Görseller doğru hazırlanmadığında gereksiz dosya boyutları oluşturabilir ve özellikle mobil bağlantılarda..."
taxonomy_category:
  - "Web Tasarım ve Site Yönetimi"
taxonomy_post_tag:
  - "WebP ve AVIF nedir"
---

WebP ve AVIF Nedir? Web Sitesi Görselleri Hangi Formatla Yüklenmeli?

Bir görselin kaliteli olması, mutlaka büyük dosya boyutuna sahip olması gerektiği anlamına gelmez. Doğru format, uygun çözünürlük ve dengeli sıkıştırma kullanıldığında aynı görsel daha düşük veri aktarımıyla sunulabilir.

Bununla birlikte en küçük dosyayı üretmek her zaman en doğru çözüm değildir. Ürün fotoğraflarında renklerin doğruluğu, ekran görüntülerinde yazıların okunması ve logolarda keskin kenarların korunması da önemlidir.

**Görsel optimizasyonunun amacı, mümkün olan en küçük dosyayı oluşturmak değil; kullanım amacına uygun kaliteyi mümkün olduğunca verimli sunmaktır.**

**Kısa Cevap: WebP ve AVIF Nedir, Web Sitesinde Hangi Görsel Formatı Kullanılmalı?**WebP ve AVIF, web siteleri için yüksek sıkıştırma verimliliği sunan modern görüntü formatlarıdır. Fotoğraflarda WebP veya AVIF genellikle iyi seçeneklerdir. JPEG geniş uyumluluk için kullanılabilir. PNG kayıpsız ayrıntı gerektiren ekran görüntülerinde ve bazı grafiklerde yararlıdır. SVG ise güvenilir kaynaklardan gelen logo, ikon ve basit vektör grafiklerinde tercih edilebilir. WordPress 5.8 ve üzeri WebP’yi; WordPress 6.5 ve üzeri de uygun sunucu desteğiyle AVIF’i işleyebilir. Formatı seçerken görsel kaliteyi, boyutları, tarayıcı uyumluluğunu ve sitenin gerçek performansını birlikte değerlendirin.

## WebP ve AVIF Nedir?

WebP ve AVIF, görselleri daha verimli biçimde saklamak ve web ortamında sunmak amacıyla kullanılan modern dosya formatlarıdır.

### WebP nedir?

**WebP**, hem kayıplı hem de kayıpsız sıkıştırmayı destekleyen görüntü formatıdır.

Şeffaf arka plan ve animasyon desteği sunar. Güncel tarayıcılarda yaygın olarak desteklenmektedir.

Örneğin bir web sitesindeki JPEG fotoğrafın WebP sürümü, benzer görsel kalite hedeflendiğinde daha küçük olabilir.

### AVIF nedir?

**AVIF**, AV1 görüntü sıkıştırma teknolojisini temel alan modern bir görsel formatıdır.

Yüksek sıkıştırma verimliliğinin yanında şeffaflık, farklı renk derinlikleri ve uygun uygulamalarda yüksek dinamik aralık gibi özellikleri destekler.

AVIF, birçok fotoğraf senaryosunda WebP’den bile daha küçük dosya oluşturabilir. Ancak sonuç, kaynak görüntü, dönüştürme ayarları ve kodlayıcıya bağlıdır.

**Önemli fark**WebP, geniş uyumluluk ve kullanım kolaylığı açısından güçlü bir seçenektir. AVIF ise özellikle fotoğraf sıkıştırmasında verimli olabilir.

Bu durum, her görselde AVIF’in mutlaka WebP’den küçük olacağı anlamına gelmez.

## JPEG, PNG, WebP, AVIF ve SVG Arasındaki Farklar

Farklı görsel formatları farklı ihtiyaçlar için geliştirilmiştir. Bir fotoğraf için uygun olan format, logo veya ekran görüntüsü için ideal olmayabilir.

JPEG### JPEG: Fotoğraflar İçin Geleneksel Format

JPEG, özellikle çok sayıda renk ve ton geçişi içeren fotoğraflarda yaygın olarak kullanılır.

Kayıplı sıkıştırma uyguladığı için dosya boyutunu azaltabilir. Fakat aşırı sıkıştırıldığında görüntüde bozulmalar oluşabilir.

- Fotoğraflarda yaygın kullanım.
- Geniş tarayıcı ve cihaz desteği.
- Şeffaf arka plan desteği yok.
- Keskin yazı ve arayüz çizgilerinde sıkıştırma izleri oluşabilir.

PNG### PNG: Kayıpsız Ayrıntı ve Şeffaflık

PNG, kayıpsız sıkıştırma kullanır. Özellikle keskin çizgiler, bazı ekran görüntüleri, grafikler ve şeffaflık gerektiren görüntüler için uygundur.

Fotoğraflarda JPEG veya modern formatlara kıyasla daha büyük dosyalar oluşturabilir.

- Kayıpsız görüntü saklama.
- Şeffaf arka plan desteği.
- Metin ve keskin çizgilerde netlik.
- Fotoğraflarda yüksek dosya boyutu ihtimali.

WebP### WebP: Fotoğraf ve Grafiklerde Esnek Kullanım

WebP hem kayıplı hem kayıpsız modlar sunar. Şeffaflık ve animasyon desteği bulunur.

Fotoğraflar, bazı ürün görselleri, blog görselleri ve birçok arayüz grafiği için değerlendirilebilir.

- Modern tarayıcılarda geniş destek.
- JPEG ve PNG’ye göre çoğu durumda verimli sıkıştırma.
- Şeffaflık ve animasyon desteği.
- WordPress 5.8 ve üzerindeki yerleşik destek.

AVIF### AVIF: Yüksek Sıkıştırma Verimliliği

AVIF özellikle karmaşık fotoğraflarda küçük dosya boyutuyla iyi görüntü kalitesi sunabilir.

Ancak bazı görsellerin AVIF’e dönüştürülmesi, farklı formatlara göre daha fazla işlem süresi gerektirebilir.

- Verimli kayıplı ve kayıpsız sıkıştırma.
- Şeffaflık ve gelişmiş renk özellikleri.
- Modern tarayıcı desteği.
- WordPress 6.5 ve üzerindeki koşullu sunucu desteği.

SVG### SVG: Logo, İkon ve Vektör Grafikleri

SVG diğer dört formatın aksine yaygın olarak vektör tabanlı grafik tanımlamak için kullanılır.

Çizgiler, şekiller ve grafik öğeleri matematiksel olarak tanımlandığı için farklı ekran boyutlarında keskinliğini koruyabilir.

Ancak çok ayrıntılı fotoğrafların SVG olarak sunulması genellikle uygun değildir.

- Logolar ve basit ikonlar için uygun.
- Ölçeklendiğinde keskinliğini koruyabilir.
- Şeffaflık desteği.
- WordPress’te güvenlik nedeniyle standart yükleme kısıtlamaları.

**SVG güvenliği:** SVG dosyaları XML tabanlıdır ve güvenilmeyen içerikler barındırabilir. WordPress’te bütün SVG dosyalarını kontrolsüz kabul etmek güvenli değildir.

## Görsel Formatları Karşılaştırma Tablosu

Aşağıdaki tablo, web sitesi için format seçerken temel özellikleri bir arada gösterir.

| Format | Sıkıştırma | Şeffaflık | Öne çıkan kullanım | Dikkat edilmesi gereken |
| --- | --- | --- | --- | --- |
| JPEG | Kayıplı | Hayır | Fotoğraf | Şeffaflık yok; aşırı sıkıştırmada kalite bozulabilir |
| PNG | Kayıpsız | Evet | Ekran görüntüsü, keskin grafik | Fotoğraf dosyaları büyük olabilir |
| WebP | Kayıplı ve kayıpsız | Evet | Fotoğraf, ürün görseli, grafik | Kalite ve dosya boyutu birlikte test edilmeli |
| AVIF | Kayıplı ve kayıpsız | Evet | Fotoğraf, büyük görsel | Sunucu ve dönüşüm desteği kontrol edilmeli |
| SVG | Vektör tanımı | Evet | Logo, ikon, çizim | Güvenilir kaynak ve güvenli işleme gerekli |

### En iyi görsel formatı hangisi?

Her durumda geçerli tek bir format yoktur.

Fotoğraflarda WebP ve AVIF avantajlı olabilirken, çok keskin metin içeren ekran görüntülerinde PNG veya kayıpsız WebP daha iyi sonuç verebilir.

Bir logo için ise güvenli biçimde kullanılan SVG, farklı çözünürlüklerde avantaj sağlayabilir.

## Kayıplı ve Kayıpsız Görsel Sıkıştırma Nedir?

Görsel formatlarının dosya boyutu farkını anlamak için kayıplı ve kayıpsız sıkıştırma ayrımını bilmek gerekir.

### Kayıplı sıkıştırma

Kayıplı sıkıştırma, dosya boyutunu azaltmak amacıyla görüntü verilerinin bir kısmını çıkarır.

Uygun kalite ayarlarında değişiklikler gözle çok zor fark edilebilir. Ancak fazla sıkıştırmada fotoğraftaki ayrıntılar bozulabilir.

### Kayıpsız sıkıştırma

Kayıpsız sıkıştırmada görüntü yeniden açıldığında sıkıştırma öncesi piksel bilgileri korunur.

Bu yöntem yazı, ekran görüntüsü, ikon ve keskin çizgilerde yararlı olabilir.

**Hatalı yaklaşım**Küçük dosya elde etmek için ürün fotoğraflarını ayrıntılar kaybolana kadar sıkıştırmak.

**Daha uygun yaklaşım**Aynı görseli farklı kalite ayarlarında dışa aktarıp gerçek kullanım boyutunda karşılaştırmak.

### Kalite ayarı kaç olmalı?

JPEG, WebP ve AVIF kodlayıcılarının kalite ölçekleri birbirleriyle doğrudan eşdeğer değildir.

Örneğin bir araçta 80 değerinin başka bir araçta aynı kaliteyi oluşturacağı varsayılmamalıdır.

**Öneri:** Kalite ayarını yalnızca rakama göre seçmeyin. Ürünün gerçek görünümünü, renk geçişlerini ve metin keskinliğini görsel olarak kontrol edin.

## WebP ve AVIF Dosya Boyutu Ne Kadar Küçülür?

WebP ve AVIF birçok görselde daha düşük dosya boyutu sağlayabilir. Ancak belirli bir yüzdeyi bütün dosyalara uygulamak doğru değildir.

Görsel içeriği, başlangıç formatı, çözünürlük ve sıkıştırma ayarları sonucu belirler.

### Temsili dosya boyutu karşılaştırması

Aşağıdaki örnek, farklı formatların boyutlarını nasıl karşılaştırabileceğinizi göstermek için hazırlanmıştır. Gerçek dosyalarda ölçüm yapılmamıştır.

KURGUSAL GÖRSEL BOYUTU ÖRNEĞİ PNG900 KB

JPEG460 KB

WebP260 KB

AVIF200 KB

Değerler yalnızca öğretici senaryodur. Tek bir görsel üzerinde yapılan test sonucu veya gerçek performans ölçümü değildir.

### Yüzde tasarruf nasıl hesaplanır?

**Dosya boyutu tasarrufu formülü**Tasarruf (%) = (Eski dosya boyutu − Yeni dosya boyutu) / Eski dosya boyutu × 100

Örneğin 500 KB olan bir dosya 250 KB’ye düşerse dosya boyutunda %50 azalma gerçekleşir.

Buradaki tasarruf dosya boyutuyla ilgilidir.

Sayfa açılış hızının veya LCP süresinin aynı oranda iyileşeceği sonucu çıkarılamaz.

## Hangi Web Sitesi Görseli İçin Hangi Format Kullanılmalı?

Format seçimini yalnızca dosya uzantısına göre değil, içeriğin türüne göre yapın.

| Görsel türü | Öncelikli değerlendirme | Alternatif | Neden? |
| --- | --- | --- | --- |
| Blog kapak görseli | WebP veya AVIF | JPEG | Fotoğraf ve karmaşık görsellerde sıkıştırma verimliliği |
| E-ticaret ürün fotoğrafı | WebP veya AVIF | JPEG | Görsel kalite ve boyut dengesinin kurulabilmesi |
| Şeffaf arka planlı ürün | WebP / AVIF | PNG | Şeffaflık desteği |
| Kurumsal logo | Güvenli SVG | WebP / PNG | Vektör ölçekleme ve keskin kenarlar |
| Basit ikon | Güvenli SVG | PNG / WebP | Ölçeklenebilir çizim |
| Yazılı ekran görüntüsü | PNG / kayıpsız WebP | Kayıpsız AVIF | Metin ve çizgilerin korunması |
| Fotoğraf ağırlıklı hero alanı | AVIF / WebP | JPEG | Büyük görsel dosyası optimizasyonu |
| Diyagram ve şema | SVG / PNG | Kayıpsız WebP | Keskin çizgiler ve metin |

### Her görseli WebP’ye çevirmek doğru mu?

Her durumda değil. Özellikle zaten çok küçük SVG ikonlarını gereksiz şekilde raster görsele dönüştürmek kalite veya kullanım esnekliğini azaltabilir.

Ayrıca kayıpsız PNG dosyasını kayıplı WebP’ye dönüştürmek bazı grafiklerde yazı ve çizgi kalitesini bozabilir.

**Karar kuralı:** Önce görsel türünü belirleyin, ardından uygun formatları karşılaştırın. Sadece format adından hareketle otomatik karar vermeyin.

## WebP ve AVIF Şeffaf Arka Planı Destekler mi?

Evet. WebP ve AVIF şeffaflık desteğine sahiptir.

Bu nedenle şeffaf arka planlı ürün görsellerinde yalnızca PNG kullanmak zorunlu değildir.

Ancak şeffaflık geçişleri ve kenar kalitesi dönüştürme sonrasında kontrol edilmelidir.

### JPEG

Şeffaf arka plan desteği bulunmaz.

### PNG

Şeffaf alanlar ve kayıpsız görüntü için uygundur.

### WebP

Şeffaflık desteğini hem modern görsel sunumuyla birleştirir.

### AVIF

Şeffaflık ve gelişmiş sıkıştırma olanakları sunar.

### Animasyon için GIF yerine WebP veya AVIF kullanılabilir mi?

WebP ve AVIF animasyon desteği sunar. Ancak hangi animasyon biçiminin kullanılacağı tarayıcı, editör ve dönüştürme altyapısına göre değerlendirilmelidir.

Daha uzun animasyon ve hareketli içeriklerde video biçimleri daha uygun olabilir.

## WordPress’e WebP ve AVIF Görselleri Nasıl Yüklenir?

WordPress görsel formatları konusunda yıllar içinde yerleşik destek geliştirmiştir.

**WordPress 5.8** sürümünde WebP, **WordPress 6.5** sürümünde AVIF desteği eklenmiştir.

Ancak özellikle AVIF işlemleri için sunucu ortamının uygun görüntü işleme kütüphanelerini desteklemesi gerekir.

### WordPress WebP yükleme adımları

1. Görseli uygun boyut ve kalitede WebP olarak hazırlayın.
2. WordPress yönetim panelindeki Ortam bölümüne gidin.
3. Yeni ortam dosyası yükleyin.
4. Dosyayı açarak görselin doğru işlendiğini kontrol edin.
5. Gerekli alternatif metni ve görsel açıklamalarını düzenleyin.
6. Yazı veya sayfada uygun görsel boyutunu seçin.
7. Mobil ve masaüstü görünümü test edin.

### WordPress AVIF yükleme adımları

1. WordPress sürümünüzün AVIF desteğine uygun olduğunu kontrol edin.
2. Araçlar → Site Sağlığı → Bilgi bölümünü açın.
3. Medya İşleme alanındaki desteklenen formatları inceleyin.
4. AVIF destekleniyorsa hazırlanmış dosyayı Ortam Kütüphanesi’ne yükleyin.
5. Önizleme ve oluşturulan küçük boyutları kontrol edin.
6. Gerçek sayfada görselin açıldığını test edin.

**AVIF yükleme hatası alıyorsanız**Sorun yalnızca WordPress sürümünden kaynaklanmayabilir. Sunucunun görüntü işleme kütüphanesi AVIF biçimini desteklemiyor olabilir.

Bu durumda hosting sağlayıcınızın PHP, GD veya Imagick yapılandırmasını kontrol etmesi gerekebilir.

Üretim sitesinde rastgele sunucu değişiklikleri yapmak yerine önce yedek ve uyumluluk kontrolü gerçekleştirin.

### WordPress JPEG dosyalarını otomatik WebP yapar mı?

WordPress’in WebP dosyasını kabul etmesi, yüklediğiniz bütün JPEG görsellerin varsayılan olarak otomatik WebP’ye çevrileceği anlamına gelmez.

WordPress görüntü alt boyutlarının oluşturulmasında farklı kurallar ve filtreler kullanılabilir. Ayrıca görsel optimizasyon eklentileri veya CDN servisleri farklı formatları ziyaretçiye sunabilir.

## JPEG ve PNG Görselleri WebP veya AVIF Formatına Nasıl Dönüştürülür?

Görselleri dönüştürmek için masaüstü düzenleme programları, uygun web araçları veya WordPress optimizasyon çözümleri kullanılabilir.

### Güvenli dönüştürme iş akışı

1. Orijinal görselin yedeğini saklayın.
2. Görselin kullanım boyutunu belirleyin.
3. Gereğinden büyük çözünürlüğü küçültün.
4. WebP ve gerekiyorsa AVIF sürümleri hazırlayın.
5. Kaliteyi gerçek görüntüleme boyutunda karşılaştırın.
6. Dosya boyutlarını kaydedin.
7. Renkleri, şeffaflığı ve ince ayrıntıları kontrol edin.
8. WordPress’te yükleme ve görüntülemeyi test edin.

### Toplu dönüştürmede nelere dikkat edilmeli?

Yüzlerce görseli aynı anda dönüştürmeden önce küçük bir örnek küme üzerinde test yapılmalıdır.

Özellikle eski görsel URL’lerinin korunması, medya kütüphanesi kayıtları ve kullanılan sayfa oluşturucu eklentileri kontrol edilmelidir.

**Önemli: Uzantıyı değiştirmek dönüştürme değildir.**Bir görselin `fotograf.jpg` adını `fotograf.webp` olarak değiştirmek, JPEG verisini WebP formatına dönüştürmez.

Gerçek dosya kodlamasının uyumlu bir araçla oluşturulması gerekir.

### Orijinal JPEG veya PNG dosyalarını silmeli miyim?

Her zaman değil. Özellikle mevcut içeriklerde kullanılan bağlantılar, yedek dosyalar ve olası uyumluluk ihtiyaçları değerlendirilmelidir.

Eski görsellerin silinmesi 404 hatalarına veya sayfada bozuk görsellere neden olabilir.

## WordPress SVG Yüklemeyi Destekler mi?

SVG, tarayıcılar tarafından desteklenen bir görsel formatıdır.

Ancak WordPress standart kurulumlarda SVG yüklemelerine güvenlik nedeniyle kısıtlama uygular.

Bunun nedeni SVG’nin yalnızca basit bir görüntü dosyası olmamasıdır. XML tabanlı yapısı kötü amaçlı içerik taşıyabilir.

### SVG kullanmak isteyen işletmeler ne yapmalı?

- SVG dosyalarının güvenilir kaynaklardan geldiğinden emin olun.
- Yükleme sırasında güvenli dosya temizleme ve doğrulama yöntemleri kullanın.
- Gereksiz kullanıcılara SVG yükleme yetkisi vermeyin.
- Tema ve eklenti uyumluluğunu test edin.
- Güvenli yönetim mümkün değilse PNG veya WebP alternatiflerini değerlendirin.

**Güvenlik önerisi:** WordPress’te dosya türü engelini yalnızca kaldırmak, SVG’nin güvenli biçimde işlendiğini garanti etmez. Dosya doğrulama ve temizleme işlemleri ayrıca gereklidir.

## Mobil Görseller İçin srcset, sizes ve picture Nedir?

Görsel formatı kadar görselin hangi çözünürlükte sunulduğu da önemlidir.

Örneğin masaüstünde geniş bir alanda gösterilen görsel, telefonda çok daha dar bir alanda kullanılabilir.

Her cihazda gereksiz yere aynı büyük dosyayı indirmek verimsiz olabilir.

### srcset ne işe yarar?

`srcset` bir görselin farklı çözünürlüklü sürümlerini tarayıcıya bildirir.

### sizes ne işe yarar?

`sizes` görselin farklı ekran koşullarında yaklaşık ne kadar genişlikte görüntüleneceğini tarayıcıya anlatır.

WordPress 4.4 sürümünden itibaren uygun görsel çıktılarında bu özellikleri otomatik oluşturabilir.

### picture etiketi ne işe yarar?

`picture` etiketi farklı görsel formatları arasında tarayıcıya uygun kaynak seçimi yapma olanağı sağlayabilir.

Aşağıdaki örnek teknik yapıyı göstermek içindir. Gerçek dosya URL’leri içermez.

```
<picture>
  <source
    srcset="/ornek/kapak.avif"
    type="image/avif">

  <source
    srcset="/ornek/kapak.webp"
    type="image/webp">

  <img
    src="/ornek/kapak.jpg"
    alt="Web sitesi kapak görseli"
    width="1200"
    height="675">
</picture>
```

Bu örnekte destekleyen tarayıcı AVIF kaynağını, uygun değilse WebP kaynağını, gerektiğinde JPEG yedeğini kullanabilir.

**Not:** Yukarıdaki kod doğrudan çalışan bir görsel değildir. Dosya yollarının gerçek medya adresleriyle değiştirilmesi gerekir.

### Farklı cihaz çözünürlükleri nasıl bildirilir?

```
<img
  src="/ornek/urun-800.webp"
  srcset="
    /ornek/urun-400.webp 400w,
    /ornek/urun-800.webp 800w,
    /ornek/urun-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Ürün fotoğrafı"
  width="1200"
  height="800">
```

Gerçek WordPress projelerinde tema veya görsel bileşeni tarafından zaten oluşturulan `srcset` ve `sizes` alanlarını gereksiz yere çoğaltmayın.

**Mobil performans ilkesi**Mobil cihaz için uygun çözünürlükte dosya sunulması, yalnızca görsel formatını değiştirmekten daha büyük tasarruf sağlayabilir.

Format, çözünürlük ve sıkıştırma birlikte değerlendirilmelidir.

## WebP ve AVIF Site Hızını ve Core Web Vitals Değerlerini Nasıl Etkiler?

WebP ve AVIF görseller dosya boyutunu azaltarak ağ üzerinden aktarılması gereken veri miktarını düşürebilir.

Bu durum özellikle yavaş bağlantılarda ve çok görselli sayfalarda yararlı olabilir.

Ancak sayfa hızı tek bir dosya formatına bağlı değildir.

### LCP ve büyük görseller

**Largest Contentful Paint (LCP)**, sayfanın görünen alanındaki en büyük içerik öğesinin ne zaman oluşturulduğunu değerlendiren performans metriğidir.

Ana sayfadaki büyük hero fotoğrafı bazı sayfalarda LCP öğesi olabilir.

Bu nedenle görselin sıkıştırılması, uygun boyutta sunulması ve tarayıcı tarafından erken keşfedilmesi önemlidir.

### Hero görseline lazy loading uygulanmalı mı?

Genellikle sayfanın ana LCP görseline `loading="lazy"` uygulanması önerilmez.

Çünkü görselin yüklenmesinin geciktirilmesi LCP süresini olumsuz etkileyebilir.

Daha aşağıdaki ve henüz görüntülenmeyen görsellerde ise uygun lazy loading yararlı olabilir.

| Görsel türü | Genel yükleme yaklaşımı | Neden? |
| --- | --- | --- |
| LCP hero görseli | Erken yükleme; gereksiz lazy loading uygulanmamalı | Ana içeriğin gecikmesini önlemek |
| Sayfa altındaki blog görseli | Uygun lazy loading | İlk yükte gereksiz veri aktarımını azaltmak |
| Küçük ikon ve logo | İçerik ve kullanım yerine göre | Gereksiz optimizasyon karmaşasından kaçınmak |
| Ürün galerisi | İlk görünür görsel ve sonraki görseller ayrı değerlendirilir | Kritik görsel önceliğini korumak |

### fetchpriority kullanımı

Bazı durumlarda kritik görsele `fetchpriority="high"` uygulanması tarayıcının kaynak önceliğini belirlemesine yardımcı olabilir.

Ancak bütün görsellere yüksek öncelik vermek doğru bir strateji değildir.

### Görsel boyutları CLS’yi etkiler mi?

Evet. Görsel için alan ayrılmaması sayfa yüklenirken içeriklerin beklenmedik biçimde yer değiştirmesine yol açabilir.

Bu nedenle görselin `width` ve `height` bilgileri veya uygun `aspect-ratio` kullanımı önemlidir.

LCP, INP ve CLS metriklerinin daha geniş açıklaması için [Core Web Vitals ve web sitesi hızlandırma rehberimizi](https://zeymedya.com/core-web-vitals-nedir-web-sitesi-hizini-artirmanin-en-etkili-yollari/)
 inceleyebilirsiniz.

**Önemli:** Dosya boyutunun düşmesi, LCP’nin mutlaka aynı oranda iyileşeceği anlamına gelmez. Sunucu yanıtı, görselin keşfedilmesi ve sayfanın işlenme süreci de performansı etkiler.

## WebP ve AVIF Kullanımı SEO’yu Doğrudan İyileştirir mi?

Modern görsel formatlarının kullanılması sayfanın veri yükünü azaltabilir ve kullanıcı deneyimini destekleyebilir.

Ancak yalnızca görsellerin AVIF veya WebP olması, Google’da belirli sıralama kazanılacağını garanti etmez.

### Görsel SEO için başka neler gerekir?

- Görselin sayfa konusuyla ilişkili olması.
- Anlamlı dosya isimleri kullanılması.
- Bilgilendirici görseller için uygun alternatif metin yazılması.
- Gerçek ürün ve hizmetlerin doğru gösterilmesi.
- Görselin tarayıcı ve arama motorları tarafından erişilebilir olması.
- Uygun çözünürlük ve yükleme yönteminin kullanılması.
- Sayfada görselin çevresindeki metin bağlamının güçlü olması.

### Alt metin nasıl yazılmalı?

Alternatif metin, görselin önemli içeriğini ilgili bağlamda açıklamalıdır.

Yalnızca anahtar kelime tekrarı yapmak için oluşturulan metinler yararlı değildir.

**Uygun olmayan alt metin**WebP AVIF SEO web sitesi hızlandırma görseli SEO.

**Daha açıklayıcı alt metin**WebP ve AVIF dosya boyutlarının karşılaştırıldığı görsel tablo.

Dosya formatları ve sayfa performansı birlikte değerlendirilse de SEO stratejisi bundan daha geniş bir süreçtir.

## Web Sitesi Görsellerinde Yapılan 8 Yaygın Optimizasyon Hatası

### 1. Her görseli aynı formatta kullanmak

Fotoğraf, logo ve ekran görüntüsünün farklı ihtiyaçlarını göz ardı etmek.

### 2. Görselleri gereğinden büyük yüklemek

Küçük alanda gösterilecek görsel için gereksiz yüksek çözünürlük kullanmak.

### 3. Aşırı sıkıştırma yapmak

Ürün ayrıntıları, renk geçişleri ve yazı netliğini kaybetmek.

### 4. AVIF sunucu desteğini kontrol etmemek

Dosyayı yüklemekle ilgili işlemeyi ve küçük görsel üretimini karıştırmak.

### 5. LCP görselini geç yüklemek

Ana sayfadaki kritik hero görselini gereksiz lazy loading ile geciktirmek.

### 6. SVG güvenliğini önemsememek

Güvenilmeyen SVG dosyalarını herhangi bir doğrulamadan yüklemek.

### 7. Mevcut görsel URL’lerini bozmak

Toplu dönüştürme sonrası eski medya bağlantılarını kontrol etmemek.

### 8. Sonuçları gerçek cihazlarda test etmemek

Mobil görünüm, kalite, tarayıcı desteği ve performans ölçümlerini atlamak.

## WordPress Görsel Optimizasyonu Kontrol Listesi

- Görselin kullanım amacı belirlendi mi?
- Fotoğraf, logo ve ekran görüntüsü ayrımı yapıldı mı?
- Görsel için uygun format seçildi mi?
- WebP ve AVIF alternatifleri değerlendirildi mi?
- JPEG veya PNG yedeği gerekip gerekmediği incelendi mi?
- Görselin orijinal dosyası korundu mu?
- Görsel gerçek kullanım boyutuna göre hazırlandı mı?
- Gereksiz büyük çözünürlük azaltıldı mı?
- Kayıplı ve kayıpsız sıkıştırma seçenekleri karşılaştırıldı mı?
- Sıkıştırma sonrasında görsel kalite kontrol edildi mi?
- Ürün renkleri ve ayrıntılar korunuyor mu?
- Metin içeren görseller okunaklı mı?
- Şeffaf arka plan doğru görünüyor mu?
- Animasyonlu dosyaların uyumluluğu kontrol edildi mi?
- WordPress sürümü uygun mu?
- Hosting ortamında AVIF desteği kontrol edildi mi?
- Görsel alt boyutları doğru oluşturuluyor mu?
- Ortam Kütüphanesi’nde önizleme çalışıyor mu?
- Tema ve eklenti uyumluluğu kontrol edildi mi?
- SVG dosyaları güvenli şekilde işleniyor mu?
- Mobilde uygun çözünürlük sunuluyor mu?
- srcset ve sizes özellikleri incelendi mi?
- Gerekli durumlarda picture ve format yedeği kullanıldı mı?
- LCP öğesi doğru belirlendi mi?
- Kritik görselin gereksiz geç yüklenmesi önlendi mi?
- Sayfa altındaki görseller için uygun lazy loading değerlendirildi mi?
- Önemli görsellerin öncelik ayarları doğru mu?
- width ve height bilgileri uygun mu?
- Görsel değişiminde sayfa kayması oluşuyor mu?
- Anlamlı dosya adları kullanıldı mı?
- Gerekli alternatif metinler yazıldı mı?
- Eski medya URL’leri korunuyor mu?
- Görseller farklı mobil cihazlarda test edildi mi?
- PageSpeed Insights sonuçları değerlendirildi mi?
- Değişiklik öncesi ve sonrası ölçümler karşılaştırıldı mı?
- Görsel optimizasyonundan sorumlu kişi belirlendi mi?

## WebP ve AVIF Hakkında Sıkça Sorulan Sorular

### 1. WebP ve AVIF nedir?

WebP ve AVIF modern görüntü formatlarıdır. Her ikisi de kayıplı ve kayıpsız sıkıştırma sunar. Dosya boyutunu azaltarak web görsellerinin daha verimli sunulmasına yardımcı olabilir.

### 2. WebP mi AVIF mi daha iyi?

Kullanım amacına bağlıdır. AVIF bazı fotoğraflarda daha küçük dosya sunabilir. WebP ise geniş uyumluluk ve işleme kolaylığıyla güçlü bir seçenektir. En doğru karar test edilerek verilmelidir.

### 3. WebP ile JPEG arasındaki fark nedir?

JPEG geleneksel kayıplı fotoğraf formatıdır. WebP kayıplı ve kayıpsız modların yanında şeffaflık ve animasyon da destekler. Birçok görselde daha verimli sıkıştırma sağlayabilir.

### 4. AVIF dosyası WordPress’e yüklenebilir mi?

Evet. WordPress 6.5 ve üzeri AVIF desteğine sahiptir. Ancak sunucunun görüntü işleme altyapısının AVIF’i desteklemesi gerekir.

### 5. WordPress WebP’yi otomatik oluşturur mu?

WordPress WebP dosyalarını destekler. Ancak bütün JPEG ve PNG görsellerin varsayılan olarak otomatik WebP’ye dönüştürüleceği varsayılmamalıdır. Dönüştürme davranışı kullanılan yapılandırma ve optimizasyon sistemine bağlıdır.

### 6. Şeffaf görsel için PNG mi WebP mi kullanılmalı?

Her ikisi de şeffaflığı destekler. WebP daha küçük dosya oluşturabilir. Ancak grafik kalitesi ve uyumluluk gereksinimleri birlikte değerlendirilmelidir.

### 7. SVG logo kullanmak güvenli mi?

Güvenilir kaynaklardan gelen ve uygun şekilde doğrulanan SVG dosyaları logolar için kullanılabilir. WordPress’te SVG yükleme kısıtlamalarının güvenlik nedeniyle bulunduğu unutulmamalıdır.

### 8. WebP ve AVIF Google SEO için faydalı mı?

Görsel dosya boyutunu azaltmaları performans açısından yararlı olabilir. Ancak sadece bu formatları kullanmak Google sıralama artışını garanti etmez.

### 9. Web sitesi görselleri kaç KB olmalı?

Her görsel için geçerli tek bir KB sınırı yoktur. Görselin boyutu, içeriği, kalite gereksinimi ve sayfadaki rolü dikkate alınmalıdır. Önemli olan gereksiz veri aktarımını azaltırken görsel kaliteyi korumaktır.

## Sonuç: Doğru Görsel Formatı, Kalite ve Performans Arasında Denge Kurar

WebP ve AVIF, web sitesi görsellerini optimize etmek isteyen işletmeler için önemli seçeneklerdir.

Bununla birlikte JPEG, PNG ve SVG formatları da farklı kullanım amaçları için değerini korumaktadır.

**Web sitesi için en doğru görsel formatı, görselin kullanım amacı, ihtiyaç duyulan kalite, dosya boyutu, tarayıcı desteği ve teknik altyapı birlikte değerlendirildiğinde belirlenir.**

WordPress sitelerinde görsellerin doğru hazırlanması kadar tema, hosting ve görsel sunum altyapısının uyumu da önemlidir.

Web sitesi geliştirme ve medya yönetimi hakkında [WordPress web tasarım hizmetleri](https://zeymedya.com/wordpress-web-tasarim-hizmetleri/)
 sayfamızı inceleyebilirsiniz.

Görsel optimizasyonunun site hızına etkisini daha ayrıntılı değerlendirmek için [web sitesi hızlandırma ve Core Web Vitals rehberimizi](https://zeymedya.com/core-web-vitals-nedir-web-sitesi-hizini-artirmanin-en-etkili-yollari/)
 okuyabilirsiniz.

**Fatih Öztürk**Proje Direktörü – Zeymedya Reklam Ajansı

Bu rehber, işletmelerin WordPress ve diğer web sitelerinde JPEG, PNG, WebP, AVIF ve SVG formatlarını doğru seçmesi, dosya boyutlarını kontrol etmesi ve görsel kullanıcı deneyimini geliştirmesi için hazırlanmıştır.

[Zeymedya Reklam Ajansı Hakkında](https://zeymedya.com/hakkimizda/)

## WordPress Sitenizin Görsel Performansını Geliştirin

Görsel formatlarının doğru seçilmesi, dosyaların uygun boyutta sunulması ve mobil kullanıcı deneyiminin kontrol edilmesi, web sitesi performansını destekleyebilir.

**Zeymedya Reklam Ajansı**, WordPress web tasarım, SEO, içerik stratejisi ve dönüşüm optimizasyonu alanlarında işletmelere yönelik hizmetler sunar.

[WordPress Web Tasarım](https://zeymedya.com/wordpress-web-tasarim-hizmetleri/)
[SEO Hizmetleri](https://zeymedya.com/seo-hizmetleri/)
[İletişime Geçin](https://zeymedya.com/iletisim/)

## Resmî Teknik Kaynaklar ve Ek Okumalar

Görsel formatları, WordPress medya desteği ve performans optimizasyonuyla ilgili aşağıdaki resmî belgelerden yararlanılmıştır.

- [MDN Web Docs – Image File Type and Format Guide](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types)
- [Google web.dev – Choose the Right Image Format](https://web.dev/articles/choose-the-right-image-format)
- [WordPress Core – WordPress 5.8 Adds WebP Support](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/)
- [WordPress Core – WordPress 6.5 Adds AVIF Support](https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/)
- [WordPress Developer – Responsive Images](https://developer.wordpress.org/apis/responsive-images/)
- [Google web.dev – Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp/)
- [Google web.dev – Image Performance](https://web.dev/learn/performance/image-performance)

Görsel sıkıştırma sonuçları kullanılan kodlayıcı, kalite seviyesi, çözünürlük ve kaynak görüntüye göre değişebilir.

Bu makaledeki dosya boyutları tamamen temsili örneklerdir. Gerçek bir performans testi sonucu değildir.

**Son güncelleme:** 5 Kasım 2026

##### Benzer yazılar

[https://zeymedya.com/wordpress-site-yedekleme/](https://zeymedya.com/wordpress-site-yedekleme/)
#### [WordPress Site Yedekleme Nasıl Yapılır? Manuel ve Otomatik Yöntemler](https://zeymedya.com/wordpress-site-yedekleme/)

- 12 Kasım 2026

[https://zeymedya.com/wix-mi-wordpress-mi/](https://zeymedya.com/wix-mi-wordpress-mi/)
#### [Wix mi WordPress mi? Web Sitesi Kurmak İçin Hangisi Daha İyi?](https://zeymedya.com/wix-mi-wordpress-mi/)

- 12 Kasım 2026

[https://zeymedya.com/ssl-sertifikasi-nedir/](https://zeymedya.com/ssl-sertifikasi-nedir/)
#### [SSL Sertifikası Nedir? HTTPS Ne İşe Yarar ve Nasıl Kurulur?](https://zeymedya.com/ssl-sertifikasi-nedir/)

- 12 Kasım 2026

## Bir yanıt yazın[Yanıtı İptal Et](/webp-ve-avif-nedir/#respond)
