Gerçek kullanım amacına göre seçin
Web fotoğrafı için önce WebP ile JPEG’i karşılaştırın. Keskin kenarlar gerektiren diyagram, ekran görüntüsü veya logo için PNG ile kayıpsız bir alternatifi karşılaştırın. WebP saydamlığı ve kayıplı/kayıpsız sıkıştırmayı destekler; JPEG alfa kanalını korumaz. Ancak dönüştürücü, biçimin tüm özelliklerini dışa aktaramayabilir. Denemeden önce değiştirilmemiş aslı saklayın.
Kaliteden önce boyutları belirleyin
800 piksel genişlikte gösterilen bir görselin aynı konum için 6.000 piksellik çıktıya ihtiyacı nadiren olur. Görüntüleme boyutunu ve yüksek yoğunluklu ekranlarda gereken netliği belirleyip en-boy oranını koruyarak yeniden boyutlandırın. Kırpma kompozisyonu, yeniden boyutlandırma ölçüleri değiştirir. Ürün sayfasındaki yakınlaştırma için ayrı büyük görsel kullanın. Küçük bir önizlemeyi ana fotoğraf olarak büyütmeyin.
Gerçek görüntüleme boyutunda karşılaştırın
Orta kalite deneyin, çıktıyı hedef boyutta inceleyin ve gerçek dosya boyutlarını karşılaştırın. Yazı, saç, ince kumaş ve yumuşak renk geçişlerine bakın; sıkıştırma kusurları burada kolay görünür. 80 kalite değeri her kodlayıcıda aynı görünümü sağlamaz. Sabit bir küçülme oranı vaat etmeyin; zaten verimli bir dosya çok az küçülebilir veya büyüyebilir.
Saydamlık, yön ve animasyonu denetleyin
Saydam çizimler alfa kanalını koruyan bir çıktı gerektirir. JPEG oluştururken istemeden siyah kenarlar oluşmaması için arka plan rengini bilinçli seçin. Kaydedilen dosyayı tekrar açıp yönü ve renkleri kontrol edin. Sabit görsel dönüştürücüsü bir animasyonun yalnızca bir karesini tutabilir; dışa aktarımda üst veriler de silinebilir. Bu özellikler önemliyse aslı koruyun.
Tekrarlanabilir bir yayın akışı kullanın
Kırpmayı hazırlayın, bir kez boyutlandırın, iki biçimi dışa aktarın ve kabul edilebilir sonuçların küçüğünü seçin. Anlamlı dosya adı ve görselin amacını anlatan alternatif metin kullanın. Bitmiş sayfayı telefon ve bilgisayarda inceleyin. Bu akış belirli bir kodlayıcının performans testi değil, editoryal bir öneridir. Yararlı ölçüt, ziyaretçinin aldığı sonuçtur.
developers.google.com · developer.mozilla.org