AVIF görsel denetimi

JPEG'i AVIF'e dönüştür: sadece sayfayı hızlandırıyorsa

AVIF, toplu dışa aktarım ayarı değil, bir görsel denetimi gibi ele alındığında en faydalıdır. Bu rehber, AVIF hak eden JPEG fotoğrafları bulmanıza, inceleme süreci seçmenize ve daha küçük ama görsel olarak kötü dosyaların yayınlanmasını önlemenize yardımcı olur.

Hızlı karar

Tüm medya klasörü değil, istisnaları dönüştürün

En iyi JPEG'ten AVIF'e karar, sayfa etkisiyle başlar. Yeniden boyutlandırmadan sonra sayfayı hala yavaşlatan büyük fotoğrafik dosyaları dönüştürün. Rutin küçük resimler, UI ekran görüntüleri, diyagramlar ve zaten küçük varlıkları daha basit bir yolda bırakın.

Güçlü aday Büyük fotoğrafik LCP görseli

Bir kahraman veya açılış sayfası fotoğrafı, yeniden boyutlandırma ve WebP dışa aktarımından sonra hala ağırlığı domine ediyorsa AVIF kullanın.

Belki Önemli ama baskın değil

Mevcut dosya hala anlamlı şekilde büyükse veya sayfada belirgin bir hız sorunu varsa AVIF'i test edin.

Kaçının Küçük, grafik veya incelenmemiş varlıklar

Görsel küçükse, çoğunlukla UI ise, metin ağırlıklıysa veya sonucu yayınlamadan önce inceleyemiyorsanız AVIF'i atlayın.

Önce görsel denetimi

AVIF seçmeden önce bu soruları sorun

AVIF mükemmel olabilir ama sihirli bir onarım adımı değildir. Format, görüntü doğru boyutlandırıldıktan, doğru role atandıktan ve ziyaretçilerin gerçekten göreceği düzen içinde incelendikten sonra önem kazanır.

Soru Neden önemli Eylem
Görüntülenen boyut zaten doğru mu? AVIF, 900px olarak gösterilen 4000px'lik bir görüntüyü düzeltemez. Önce yeniden boyutlandırın, sonra formatları karşılaştırın.
Bu görsel LCP'yi veya ilk izlenimi etkiliyor mu? Sayfanın üst kısmındaki büyük fotoğraflar, sayfa içi dekorasyonlardan daha fazla etki yapar. Kahraman, açılış ve kampanya görsellerine öncelik verin.
İçerik fotoğrafik mi? AVIF genellikle fotoğraflarda başarılıdır, düz UI veya logo tarzı grafiklerde değil. Keskin kenarlar daha önemliyse PNG, SVG veya WebP kullanın.
Sonucu bağlam içinde inceleyebilir misiniz? AVIF, görüntü gerçek düzen içinde yer alana kadar artefaktları gizleyebilir. Mobil genişliği, gradyanları, yüzleri ve kırpmayı kontrol edin.
Bir yedekleme yolunuz var mı? Her ortam modern formatları aynı şekilde desteklemez. Picture işaretlemesi veya kullandığınız framework'ün eşdeğeri ile yayınlayın.

Aday seçimi

Hangi JPEG görseller iyi AVIF adayıdır?

Sadece dosya yöneticisinde değil, sayfayı değiştiren daha küçük dosyalar arayın. En güçlü adaylar genellikle fotoğrafik, görsel olarak önemli ve algılanan yükleme hızını etkileyebilecek büyüklüktedir.

En iyi aday

LCP kahraman fotoğrafı

İlk görünüm alanını belirleyen ve yeniden boyutlandırmadan sonra hala büyük kalan büyük fotoğrafik kahraman görsel genellikle en güçlü AVIF kullanım örneğidir.

İyi aday

Açılış sayfası kampanya görseli

Kampanya veya ürün fotoğrafı, sayfanın üst kısmında yer alıyorsa ve görsel olarak kusursuz kalması gerekiyorsa ekstra incelemeyi hak eder.

Seçici aday

Editoryal öne çıkan görsel

Her makale görseli yeniden dışa aktarılıyor diye değil, görsel yeterince büyük olduğunda AVIF kullanın.

Zayıf aday

Metin ağırlıklı ekran görüntüleri

Ekran görüntüleri, UI yakalamaları, diyagramlar ve simgeler, AVIF sıkıştırmasından önce metin netliğinde genellikle başarısız olur.

Kalite incelemesi

AVIF araçları arasında kalite numaralarını kopyalamayın

AVIF kalite kaydırıcıları evrensel değildir. Bir kodlayıcıda iyi görünen değer, diğerinde çok yumuşak veya çok ağır olabilir. Araç varsayılanı veya orta kalite aralığı ile başlayın, ardından çıktıyı gerçek sayfada değerlendirin.

Amaç mümkün olan en küçük AVIF dosyası değil. Amaç, sayfayı destekleyen en küçük dosyadır: yeterince temiz detay, kabul edilebilir gradyanlar, dikkat dağıtıcı doku kaybı yok ve görünür renk kayması yok.

İnceleme sırası
  1. Orijinal kamera dosyası değil, yeniden boyutlandırılmış JPEG veya WebP ile karşılaştırın.
  2. Görseli masaüstü boyutunda ve mobil genişlikte inceleyin.
  3. Yüzleri, gökyüzünü, gradyanları, gölgeleri, küçük dokuları ve marka renklerini kontrol edin.
  4. Dosyanın yayınlamayı planladığınız sayfada gerçekten yüklendiğini doğrulayın.

Görsel hata modları

Yayınlamadan önce kontrol edilmesi gereken AVIF artefaktları

İyi bir AVIF dışa aktarımı mükemmel görünebilir. Kötü olan ise sessizce başarısız olabilir: dosya daha küçük olur ama görüntü, kullanıcıların ilk fark ettiği sayfa bölümünde düz, bulanık veya gürültülü hissedilir.

Gökyüzü veya gradyanlarda bantlanma Düz arka planlar, sıkıştırma çok fazla zorlandığında basamaklanma gösterebilir.
Mum benzeri cilt veya ürün dokusu Portreler ve ürün yüzeyleri, dosya ilk bakışta keskin görünse bile doğal detay kaybedebilir.
Bulanık ince detay Yapraklar, kumaş, saç ve küçük tekrarlayan desenler, bayt tasarrufundan daha düşük kalitede görünerek bulanıklaşabilir.
Renk veya kontrast kayması Kampanya görselleri ve ürün fotoğrafları dönüşüm sonrası marka güvenli renk kontrolleri gerektirir.
Kırpma ve odak noktası hataları Sayfayı etkileyen görüntü kısmı, duyarlı kırpmalarla gizleniyorsa daha küçük dosya kazanım sayılmaz.

Teslimat

AVIF'i körü körüne değiştirme olarak değil, yedeklemeyle yayınlayın

Önemli sayfa görselleri için teslimatı sade ve öngörülebilir tutun. Desteklendiğinde önce AVIF kullanın, WebP veya JPEG yedeği tutun, genişlik ve yükseklik ayarlayın, tarayıcının düzen boyutunu geç keşfetmesine izin vermeyin.

Gerçekten LCP görseli olduğunda AVIF'i önceden yükleyin. Her dönüştürülmüş varlığı önceden yüklemek sayfayı hızlandırmak yerine yavaşlatabilir.

HTMLAVIF yedeklemeli picture işaretlemesi
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

Gizlilik ve kontrol

Yayınlanmamış kampanya görsellerini rastgele yükleme akışlarından uzak tutun

Büyük JPEG fotoğraflar genellikle nötr dosyalar değildir. Yayınlanmamış ürünler, müşteri çalışmaları, konum ipuçları, sahnelenmiş kampanya materyalleri veya dahili bağlamı ortaya çıkaran dosya adları içerebilir. Bunları dönüştürücüye yüklemek varsayılan değil, bilinçli bir karar olmalıdır.

Yerel iş akışı, kaynak dosyaları, çıktı isimlerini ve inceleme adımlarını projeye yakın tutar. Aynı açılış sayfası için görsel denge sağlanana kadar birkaç dışa aktarım denemesi gerektiğinde bu özellikle faydalıdır.

Pratik iş akışı

Her resmi ayrı bir proje haline getirmeden tekrarlanabilir JPEG'ten AVIF'e dönüşüm süreci

  1. 01
    Sadece büyük adayları toplayın

    Normal yeniden boyutlandırma ve WebP dışa aktarımından sonra hala önemli olan büyük JPEG fotoğrafların kısa listesinden başlayın.

  2. 02
    AVIF varyantlarını ayrı dışa aktar

    AVIF çıktısını özel bir klasörde tutun, böylece kaynak JPEG'ler ve rutin WebP dosyaları kolayca karşılaştırılabilir kalır.

  3. 03
    Gerçek sayfada incele

    Adayı gerçek bileşene veya şablona yerleştirin ve sadece dönüştürücü önizlemesi değil, görünür sonucu da kontrol edin.

  4. 04
    Yedekleme işaretlemesi ile yayınla

    Desteklenen yerlerde AVIF sunun ve öngörülebilir davranış için WebP veya JPEG yedek teslimatı tutun.

  5. 05
    Kuralı belgeleyin

    Hangi görsel rollerin AVIF aldığını not edin, böylece sonraki güncelleme tahmin oyunu olmaz.

Format sınırı

Temel olarak WebP'yi, yükseltme olarak AVIF'i kullanın

Sağlıklı bir iş akışı genellikle varsayılan ve istisna yollarına sahiptir. WebP, pratik ve yaygın desteklendiği için rutin web sitesi görselleri için varsayılandır. AVIF ise büyük fotoğrafik görsel hala çok maliyetliyse devreye girer.

Bu sınır, makale iş akışını hızlı tutarken ağırlık veya LCP'yi domine eden görselleri kurtarmanıza olanak sağlar.

Rutin makale görselleri Belirli bir dosya hala çok büyük değilse WebP kullanın.
Büyük fotoğrafik kahraman Yeniden boyutlandırdıktan sonra AVIF'i deneyin ve görsel sonucu karşılaştırın.
Ekran görüntüleri ve UI Metin ve keskin kenarlar önemliyse PNG veya WebP tercih edin.
İncelenmemiş toplu dışa aktarımlar Klasör daha küçük diye AVIF'i körü körüne yayınlamayın.

Yayın öncesi kontrol listesi

JPEG'i AVIF ile değiştirmeden önce bunu kontrol edin

Kaynak görsel yeniden boyutlandırıldı AVIF dosyası, kamera orijinali değil, en büyük gösterilen boyuta yakındır.
Sayfa AVIF kullanıyor Ağ veya sayfa kaynağı kontrolleri yeni dosyanın gerçekten sunulduğunu doğrular.
Bir yedekleme mevcut Kullandığınız teslimat yolu için WebP veya JPEG kullanılabilir kalır.
Kalite incelendi Son sayfa masaüstü ve mobilde artefaktlar için kontrol edildi.
Meta veriler hala anlamlı Alt metin, Open Graph görselleri ve JSON-LD görsel referansları yanlışlıkla bozulmadı.
Orijinal korunur Kaynak JPEG'ler, gelecekteki kırpmalar, boyutlandırmalar ve yeniden dışa aktarımlar için kullanılabilir kalır.

SSS

Sıkça Sorulan Sorular

JPEG'ten AVIF'e yayın kararları için pratik yanıtlar