Web siteleri için en iyi görsel biçimi: JPG, PNG, WebP veya AVIF?

JPG, PNG, WebP ve AVIF’e genel bakış

Teknik özellikler için MDN görsel biçimleri başvurusuna bakın. Biçim desteği, her düzenleyici veya yükleme hizmetinin onu kabul edeceği anlamına gelmez.

Kayıplı ve kayıpsız sıkıştırma gerçekte neyi korur?

Kayıplı kodlama, dosyayı küçültmek için piksel bilgilerinin bir kısmını değiştirir. Fotoğraftaki küçük bir doku değişikliği kabul edilebilirken bir harfin çevresindeki aynı değişiklik okunabilirliği bozabilir. Kayıpsız sıkıştırma, kendisine verilen piksel verilerini korur. Zaten sıkıştırılmış bir JPG’yi PNG’ye çevirmek, JPG’de kaybolmuş ayrıntıları geri getirmez; yalnızca daha büyük bir dosya oluşturabilir.

WebP her iki yöntemi de destekler; Google’ın WebP belgeleri bunu açıklar. Biçimin adı, dışa aktarımda hangi yöntemin kullanıldığını tek başına göstermez; kalite 100 de kayıpsız çıktı garantisi değildir. En iyi kaynak dosyanızı saklayın ve kayıplı dönüşümleri art arda uygulamak yerine her yayın sürümünü bu kaynaktan oluşturun. Ayrım için kayıplı ve kayıpsız sıkıştırma kılavuzuna bakın.

Fotoğraflar: WebP ve AVIF’i mevcut JPG ile karşılaştırın

Aşağıdaki dağ fotoğrafı gerçek Pixilo çıktılarının karşılaştırmasıdır. Sağlanan JPG 413,1 kB boyutundadır; Pixilo, kalite 80 ile 299,0 kB WebP ve kalite 65 ön ayarıyla 275,7 kB AVIF oluşturdu. Üçü de 1920 × 1440 pikseldir. Bu JPG’ye göre WebP yaklaşık %28, AVIF yaklaşık %33 tasarruf sağlar. Bu örnekte AVIF, WebP’den yaklaşık %8 daha küçüktür.

Bunlar, zaten sıkıştırılmış tek bir JPG’den üretilen dosyaların tamamının ölçümleridir. Kalite ayarları biçime özgüdür ve bu çıktılar eşit görsel kaliteye göre ayarlanmamıştır. Bunları evrensel bir sıralama olarak değil, inceleyebileceğiniz örnekler olarak kullanın. Kaydırmalı karşılaştırmada yumuşamış kaya dokusunu, dağların gökyüzüyle birleştiği çizgideki haleleri ve düz gökyüzündeki renk bantlarını arayın. Önce görüntünün tamamını hedeflenen gösterim boyutunda değerlendirin, ardından şüpheli yerleri ayrıntı görünümünde inceleyin.

Denemeyi sitenize özgü bir görselle tekrarlayın: mağaza için kumaş veya ekip sayfası için bir yüz. İki adayı aynı kaynaktan ve aynı boyutlarda oluşturun: JPG kaynak için JPG’den WebP’ye ve JPG’den AVIF’e araçlarını kullanın. Diğer kaynaklar için PNG’den AVIF’e veya WebP’den AVIF’e uygundur. Ayrıntıları kabul edilebilir kalan en küçük sürümü seçin; özgün dosya zaten ihtiyacı karşılıyorsa onu korumak da geçerli bir sonuçtur. Büyük gruplarda dönüşüm süresini de dikkate alın.

Orijinal JPGPixilo WebP

Grafikler: kenarları, yazıları ve şeffaflığı koruyun

Metinler ve diyagramlar sıkıştırma bozulmalarını çabuk açığa çıkarır: bir harfin çevresindeki renkli saçak veya kopmuş tek piksellik çizgi, manzaradaki küçük bir değişiklikten daha önemli olabilir. Aşağıdaki grafik, 109,2 kB PNG’yi Pixilo’nun aynı 960 × 640 piksel boyutundaki JPG, WebP ve AVIF çıktılarıyla karşılaştırır. AVIF yalnızca 6,4 kB’dir; ancak bu tasarruf, en küçük yazılar ve çizgiler yeterince net kaldığında yararlıdır.

Biçimleri değiştirerek aynı harfleri ve renkli kenarları ayrıntı görünümünde inceleyin. Ardından normal okuma boyutunu değerlendirmek için tam görüntüye dönün. Bunlar kayıplı dönüşüm örnekleridir; kayıpsız WebP veya AVIF testleri değildir. Ekran görüntüsü bir fiyatı, hata mesajını veya yazılım ayarını belgeliyorsa en küçük dosya yerine okunaklı ve doğru metne öncelik verin. Alternatifler bu testi geçemiyorsa PNG’yi koruyun.

Şeffaflık, keskinlikten ayrı bir gereksinimdir: PNG, WebP ve AVIF bunu destekler; JPG desteklemez. Şeffaf ürün görselinde PNG’den WebP’ye dönüşümünü deneyin; dış çizgiyi ve gölgeyi hem açık hem koyu arka planda inceleyin. JPG’ye aktarmadan önce bilinçli olarak düz bir arka plan seçin. Aşağıdaki opak grafik şeffaf kenarları test etmez.

Logo zaten SVG ise vektör kaynağı saklayın. Sırf sıkıştırmak için rasterleştirmek temiz ölçekleme avantajını kaldırabilir. Pixilo’nun raster araçları, her araçta belirtilen görsel türlerini işler. Vektör biçimini ne zaman korumanız ve ne zaman PNG kopyası oluşturmanız gerektiğini öğrenmek için SVG ve PNG rehberini okuyun.

Orijinal PNGPixilo JPG

En küçük dosyayı aramadan önce piksel ölçülerini seçin

Görselin kapladığı alana göre planlayın. 600 CSS piksel genişliğinde görünen fotoğraf için yoğun ekranda 1200 piksel genişliğinde bir sürüm denenebilir. Bu bir test örneğidir, genel kural değil. Küçük orijinali büyütmek eksik ayrıntıları yeniden yaratmaz.

Hem genişliği hem yüksekliği ikiye katlamak, piksel sayısını dört katına çıkarır. Dosya boyutu mutlaka dört katına çıkmaz, ancak kodlayıcının temsil etmesi gereken görüntü verisi artar. Önce kırpmayı ve gereken boyutları seçin, sonra biçimleri aynı boyutlarda karşılaştırın; böylece yeniden boyutlandırmanın faydasını biçim değişikliğinden ayırabilirsiniz.

Bir site, srcset ve sizes gibi duyarlı görsel ayarlarıyla farklı düzenlere farklı boyutlar sunabilir. Sürümleri Görsel boyutlandırma aracıyla hazırlayın ve sunumu anlamak için duyarlı görseller kılavuzunu okuyun. Her görsel için tek bir sabit dosya boyutu hedeflemeyin: küçük bir kart ve ayrıntılı ürün yakınlaştırması farklı amaçlara hizmet eder.

Dosyanın yanında yüklemeyi de kontrol edin

İçerik sıçramasın diye görsele alan ayırın. Geç yükleme aşağıdaki görsellere uygun olabilir ama görünür ana görseli geciktirebilir. Google’ın LCP önerileri önemli görselin erken keşfedilmesini ve LCP görselinde lazy loading kullanılmamasını önerir.

Yedek biçim gerekiyorsa bunu sayfa kodunda veya CMS’de yapılandırın. picture öğesi kullanıldığında tarayıcı, biçim desteğine ve diğer koşullara uyan ilk kaynağı kullanır; tüm dosyaları karşılaştırıp en küçüğünü seçmez. Tercih ettiğiniz test edilmiş biçimi ilk sıraya koyun ve uygun bir JPG veya PNG yedeği tutun. web.dev picture kılavuzu kaynak seçimini açıklar.

Yayımlanan sayfanın gerçekte sunduğu görseli kontrol edin. CMS veya görsel CDN’i yüklediğiniz dosyayı boyutlandırabilir ya da yeniden kodlayabilir; ziyaretçiler Pixilo’dan indirdiğinizden farklı bir dosya alabilir. Pixilo dosyaları hazırlar; sunumu siteniz yönetir. Daha küçük bir çıktı tek başına geç başlayan görsel isteğini veya yavaş sunucu yanıtını düzeltmez.

Yayımlamadan önce kontrol

• Hedef biçimi kabul ediyor ve uzantı doğru.
• Ölçüler düzene uygun.
• Yazı, yüz ve şeffaf kenarlar yeterince iyi.
• Dosya küçüldü veya değişim gerçek bir uyumluluk sorununu çözdü.
• Sayfa dar ekranda çalışıyor ve önemli görsel zamanında yükleniyor.
• Orijinal sonraki düzenlemeler için saklandı.