Çerez tercihleri
Analitik için çerez kullanıyoruz. Gizlilik Politikası Zorunlu olmayan takibi kabul edebilir veya reddedebilirsiniz.
"Görüntü Sıkıştırma Ardışık Düzeni: JPEG'den WebP'ye ve AVIF'ye" için pratik rehber: temel adımlar, yaygın hatalar ve Görüntü Sıkıştırıcı ile uygulama.
Araca git
Gerektiğinde tarayıcı kontrolleri ve sıraya alınmış sunucu işlemleriyle görüntüleri sıkıştırın.
Modern görüntü formatları, görünür kalite kaybı olmadan dosya boyutunu dramatik şekilde azaltır. İyi yapılandırılmış bir sıkıştırma işlem hattı, görüntü yükünüzü %50-70 oranında azaltabilir, doğrudan sayfa yükleme sürelerini ve Core Web Vitals'ı iyileştirir.
| Format | Tipik Tasarruf JPEG'e Karşı | Tarayıcı Desteği | En İyi İçin |
|---|---|---|---|
| **JPEG** (kalite 80) | Temel | 100% | Evrensel geri dönüş |
| **WebP** (kalite 80) | %25-35 daha küçük | %97+ | Çoğu site için birincil format |
| **AVIF** (kalite 65) | JPEG'den %50 daha küçük | %92+ | Maksimum sıkıştırma, daha yeni tarayıcılar |
Gerçek dünya örneği: 400KB'lık bir JPEG kahraman görüntüsü, WebP'de ~280KB ve AVIF'de ~200KB'ye dönüşür -- normal izleme mesafesinde görünür bir fark olmadan.
Adım 1: İlk önce yeniden boyutlandırın.
4000px'lik bir görüntüyü 800px'de görüntülenirken sıkıştırmayın. Görüntü en fazla gösterileceği genişliğe yeniden boyutlandırın. Maksimum içerik genişliği 800px olan bir blog gönderisi için, 1600px'e (retina için 2x) yeniden boyutlandırın.
Adım 2: WebP'e sıkıştırın.
Kalite 80, çoğu fotoğraf için ideal noktadır. Kalite 75 daha fazla tasarruf sağlar ancak gradyanlarda artefaktlar gösterebilir. Kalite 85+ ise tasarruf üzerinde azalan getiriler sağlar.
Image Compressor kullanarak bir adımda dönüştürün ve sıkıştırın.
Adım 3: İsteğe bağlı olarak AVIF oluşturun.
AVIF, kalite 65'te, WebP'nin kalite 80'ine görsel olarak eşleşir, ancak önemli ölçüde daha küçük dosya boyutuyla. AVIF kodlaması daha yavaştır, bu nedenle oluşturma zamanında oluşturduğunuz statik varlıklar için değil, gerçek zamanlı dönüşümler için en iyisidir.
Adım 4: `<picture>` geri dönüşü ile servis edin.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Ürün kahraman çekimi" width="1600" height="900" />
</picture>Tarayıcı, desteklediği ilk formatı seçer: AVIF > WebP > JPEG. Her kullanıcı, tarayıcısının işleyebileceği en iyi formatı alır.
| Kullanım Durumu | JPEG | WebP | AVIF |
|---|---|---|---|
| Fotoğraflar, kahraman görüntüler | 80-85 | 78-82 | 60-68 |
| Ürün çekimleri (detay önemlidir) | 85-90 | 82-88 | 68-75 |
| Küçük resimler, önizlemeler | 70-75 | 70-75 | 55-60 |
| Ekran görüntüleri, metin ağırlıklı görüntüler | PNG kullanın | Kayıpsız WebP | Kayıpsız AVIF |
Core Web Vitals için şu maksimumları hedefleyin:
Görüntülerinizi şimdi Image Compressor ile sıkıştırın. Tam SEO kontrol listesi için Core Web Vitals için Image SEO Checklist adresine bakın.
Bu içerik, doğruluk, pratik uygulanabilirlik ve güncel ürün akışlarıyla tutarlılık açısından Tools Hub editoryal ekibi tarafından gözden geçirilir.
Son gözden geçirme:
"Önemli Web Verileri için Görsel SEO Kontrol Listesi" için pratik rehber: temel adımlar, yaygın hatalar ve Görüntü Sıkıştırıcı ile uygulama.
SQL Optimize Edici AI ile yavaş sorguları analiz edin ve optimizasyon önerileri, yürütme planı analizi ve indeks tavsiyeleri alın.
Blog Taslağı AI ile SEO odaklı blog taslakları, nasıl yapılır rehberleri ve düşünce liderliği çerçeveleri oluşturun.
PNG to AVIF Donusturucu: Tekrarlanabilir sıraya alınmış tek bir toplu iş akışını korurken kullanıcı arayüzü, ürün ve içerik varlıklarına ilişkin görüntü yükünü azaltmak için PNG'den AVIF'ye Dönüştürücüyü kullanın.