Pilih berdasarkan tugas yang harus dilakukan gambar
Mulailah dari aset, bukan ekstensi. Foto adalah konten tonal-kontinu, sehingga beberapa kehilangan (loss) bisa dapat diterima pada ukuran tampilan. Screenshot, grafik, logo, atau gambar garisan memiliki tepi dan teks yang tajam, di mana artefak mudah terlihat. Pertahankan ini dengan keluaran lossless atau persetujuan yang teliti. Gunakan SVG untuk logo vektor atau diagram bila tersedia.
Lalu identifikasi kapabilitas. Alfa berarti transparansi per-piksel. Animasi adalah urutan frame. Cakupan browser yang dibutuhkan, volume publikasi, dan waktu build adalah batasan pengiriman yang dapat mengesampingkan format yang lebih kecil.
Uji AVIF lossy dan WebP terlebih dulu. Simpan JPEG ketika diperlukan fallback opak yang kompatibel luas.
Pertahankan sumber lossless. Bandingkan PNG dengan WebP atau AVIF lossless pada skala tampilan aktual sebelum memilih.
Gunakan AVIF, WebP, atau PNG; jangan memilih JPEG karena tidak membawa saluran alfa.
Pahami kontribusi masing‑masing format
AVIF menyimpan gambar yang dikodekan AV1 dalam format berbasis HEIF. Spesifikasinya mencakup gambar diam, urutan gambar, dan item gambar alfa. Ia mendukung pengkodean lossy dan lossless, transparansi, serta animasi. Penghematan bukan nilai tetap: konten sumber, encoder, kecepatan, target kualitas, dan metadata memengaruhi hasil.
WebP mendukung mode lossy dan lossless, transparansi, dan animasi. JPEG adalah format gambar diam lossy dengan dukungan historis yang sangat luas, berguna sebagai fallback foto opak. PNG adalah lossless dengan alfa, menjadikannya fallback yang andal untuk grafik tepat, meskipun PNG fotografi seringkali tidak efisien. PNG biasa bersifat statis; uji format animasi terpisah ketika diperlukan gerak.
Layak dieksplorasi untuk gambar raster bernilai tinggi di mana pengurangan transfer dapat membenarkan pekerjaan pengkodean dan fallback.
Berguna sebagai opsi raster modern serbaguna, termasuk dukungan transparansi dan urutan animasi.
Gunakan sebagai fallback foto opak; bukan untuk logo transparan atau gambar potongan.
Gunakan untuk fallback raster lossless dengan transparansi dan untuk aset di mana fidelitas piksel lebih penting daripada byte minimum.
Bangun jalur fallback daripada bertaruh pada satu format
Elemen `picture` memungkinkan browser mengevaluasi alternatif. Taruh AVIF pertama, lalu WebP, lalu img fallback dalam JPEG atau PNG, dengan tipe MIME yang benar. Browser melewati sumber yang tidak didukung dan menggunakan fallback ketika tidak ada sumber yang dapat digunakan. Pertahankan teks alternatif yang sama kecuali Anda sengaja mengubah crop.
Fallback format tidak menggantikan pengaturan ukuran responsif. Sediakan kandidat berdasarkan lebar dan nilai `sizes` yang akurat ketika slot berubah. Sertakan `width` dan `height` agar browser dapat mengalokasikan ruang. Berkas berukuran kecil pada dimensi piksel yang terlalu besar tetap membuang byte.
AVIF dulu, WebP kedua, lalu JPEG untuk foto opak atau PNG ketika fallback membutuhkan transparansi atau tepi lossless.
Jika server memilih format dari kapabilitas permintaan alih‑alih markup `picture`, konfigurasikan variasi cache dengan benar dan uji bahwa setiap klien menerima representasi yang dapat didekode.
Gunakan klien tanpa decoder yang disukai atau sengaja nonaktifkan sumber di staging; konfirmasi bahwa gambar, dimensi, dan teks alternatif tetap benar.
Anggarkan waktu pengkodean dan lindungi kualitas visual
Kompresi modern memindahkan pekerjaan ke proses encoding. Encoder referensi AVIF menawarkan rentang kecepatan dari 0, paling lambat, sampai 10, paling cepat; WebP juga menukar lebih banyak pekerjaan encoder untuk waktu, ukuran output, dan kualitas. Perlakukan re-encode batch atau transformasi on-demand sebagai keputusan operasional, bukan pengaturan gratis.
Tetapkan kebijakan yang dapat diulang menurut kelas aset dan tinjau asli pada ukuran tampilan umum. Inspeksi wajah, gradasi, teks, tepi, dan batas transparansi. Simpan master dan catat versi encoder serta pengaturannya sehingga cacat bisa direproduksi dan dibatalkan.
Encoding yang lebih cepat dapat mengurangi tekanan build tetapi mungkin menghasilkan file yang lebih besar atau kompresi yang kurang efisien; benchmark kumpulan sumber Anda sendiri.
Skor atau preset tidak dapat menggantikan tinjauan visual pada wilayah gambar yang membawa makna bagi pengunjung.
Jadikan perubahan format gambar sebagai praktik keandalan proaktif
Untuk Status Is UP, optimisasi gambar adalah pekerjaan uptime proaktif ketika itu mencegah rilis merusak halaman kritis. Inventaris URL gambar penting, lakukan konversi percontohan yang representatif, dan verifikasi content type, perilaku CDN, dan invalidasi cache sebelum migrasi situs menyeluruh.
Terbitkan dalam batch yang dapat dibalik. Bandingkan perilaku render dan transfer pada kandidat rilis, lalu pertahankan representasi lama sampai jalur baru terbukti. Jika transformasi atau aturan cache gagal, pulihkan sumber yang sudah diketahui baik. Ini adalah arah pengiriman yang tangguh, bukan mandat universal untuk AVIF atau multiple format.
Prioritaskan gambar utama dan gambar konten yang memengaruhi first useful view, bukan setiap gambar arsip sekaligus.
Pertahankan nama aset deterministik atau pemetaan versi sehingga jalur JPEG, PNG, atau WebP sebelumnya dapat dikembalikan dengan cepat.