---
title: "WebP ve AVIF: Yayında hangi format, tarayıcı uyumluluğu nasıl yönetilir?"
date: 2026-04-06
author: "xcropimage.io Team"
tags: ["WebP", "AVIF", "görsel optimizasyon", "SEO", "web performansı", "tarayıcı uyumluluğu"]
lang: "tr"
description: "WebP ve AVIF seçimi, geri dönüş stratejisi ve arama motorları ile Core Web Vitals için pratik üretim rehberi."
---

## Giriş

Web sitenizde görselleri hangi formatta sunacağınız; hem **sayfa hızı** hem de **arama motorlarında** görünürlük için kritik. WebP yaygın bir seçenek; **AVIF** ise çoğu senaryoda daha küçük dosya üretir ancak tüm tarayıcılarda aynı şekilde desteklenmez. Bu yazıda üretim ortamında format seçimi, **geri dönüş (fallback)** stratejisi, kalite ayarları ve ölçüm adımlarını bir arada ele alıyoruz.

<figure>
<img src="/blog-images/webp-avif-yayin-tarayici-uyumlulugu.jpg" alt="WebP ve AVIF: Yayında hangi format, tarayıcı uyumluluğu nasıl yönetilir?." width="1200" height="630" loading="lazy" decoding="async" />
<figcaption>WebP ve AVIF: Yayında hangi format, tarayıcı uyumluluğu nasıl yönetilir?.</figcaption>
</figure>

**İlgili site içi içerikler:** [WebP formatı avantajları](/blog/webp-format-avantajlari) ve [PNG–JPG–WebP karşılaştırması](/blog/png-vs-jpg-vs-webp); performans için [daha hızlı açılan siteler için görsel ipuçları](/blog/daha-hizli-acilan-web-siteleri-icin-basit-gorsel-duzenleme-tuyolari).

## WebP ve AVIF kısa karşılaştırma

* **WebP:** Geniş tarayıcı desteği; kayıplı ve kayıpsız modlar; çoğu CDN ve CMS ile uyumlu.
* **AVIF:** Çoğu senaryoda daha iyi sıkıştırma; daha yeni format, eski istemcilerde ek strateji gerekir.

Google’ın görsel formatları ve performans önerileri için [web.dev: Doğru görsel formatını seçin](https://web.dev/articles/choose-the-right-image-format) kaynağını inceleyebilirsiniz. Teknik referans için [MDN: resim dosya türleri](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) faydalıdır. Smashing Magazine’de [modern görsel formatları (AVIF, WebP)](https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/) üzerine derinlemesine bir özet bulunur.

## Hangi durumda hangi format?

| Senaryo | Pratik öneri |
|---------|----------------|
| Hero / LCP görseli | Önce boyutu doğru kırpın veya yeniden boyutlandırın; sonra AVIF/WebP + JPEG yedek |
| Şeffaf PNG (logo, ikon) | WebP veya AVIF kayıpsız deneyin; kenar halkaları kontrol edin |
| Çok eski tarayıcı kitlesi | WebP öncelikli, AVIF’i CDN ile koşullu sunun veya WebP’de kalın |
| CMS sadece JPEG üretiyorse | JPEG kalite 75–85 aralığında test; ileride `<picture>` için varyant ekleyin |

## Üretimde adım adım strateji

1. **Kaynak (master):** Yüksek çözünürlük veya düzenlenebilir katmanlar tek yerde; web için türetilmiş varyantları ayrı klasörde saklayın.
2. **`<picture>` sırası:** Çoğu ekip için **AVIF → WebP → JPEG/PNG** mantıklıdır; tarayıcı ilk desteklediğini seçer.
3. **Boyut ve kalite:** Aynı piksel boyutunda farklı kalite değerleriyle A/B yapın; gözle “banding” ve metin kenarı bozulması kontrol edin.
4. **Ölçüm:** [Core Web Vitals](https://web.dev/articles/vitals) içinde özellikle **LCP** ve gerçek kullanıcı verisi (field) ile lab testini birlikte izleyin.

### `picture` örneği (özet)

Tarayıcıya format seçimini bırakmak için kaynak sırası önemlidir; `img` içindeki JPEG/PNG son çare (fallback) olarak kalır. Detaylı İngilizce karşılık için [WebP vs AVIF production](/blog/webp-avif-publishing-browser-fallback) yazısındaki checklist ile hizalanabilirsiniz.

## SEO ve tarama

Arama motorları farklı formatları indeksleyebilir; önemli olan **anlamlı dosya adı**, **açıklayıcı alt metin** ve **hızlı yükleme** birlikte optimize edilmesidir. [Google Görseller en iyi uygulamaları](https://developers.google.com/search/docs/appearance/google-images) görsel arama için özet kurallar sunar. Format değişince URL değişiyorsa CDN önbelleği ve [güncelleme sonrası eski görsel](/blog/cdn-onbellek-gorsel-guncelleme-eski-gorsel) konularını göz önünde bulundurun.

## Sık yapılan hatalar

* Sadece en küçük dosyayı seçip **çözünürlüğü düşük** vitrin göndermek (mobilde bulanık LCP).
* Fallback olmadan yalnızca AVIF sunmak (eski cihazlarda boş kutu).
* `loading="lazy"` kullanımını LCP adayı görsele uygulamak (öncelikli görselde `fetchpriority` ve eager yükleme düşünün).

## Sonuç

AVIF ve WebP birlikte düşünüldüğünde, **en küçük dosya** ile **en geniş uyumluluk** arasında `<picture>` ve gerektiğinde CDN dönüşümleriyle denge kurabilirsiniz. xcropimage.io üzerindeki [kırpma](/crop), [yeniden boyutlandırma](/resizer) ve [format dönüştürme](/convert) araçlarıyla web varyantlarını hızlıca üretebilirsiniz.