1. Klasifikasikan gambar sebelum melakukan optimisasi
Inventarisasi gambar berdasarkan template. Catat peran setiap gambar, lebar render terbesar dan terkecil, status viewport awal, dan apakah layar kecil membutuhkan crop berbeda. Ini mengubah pekerjaan ukuran file menjadi keputusan yang dapat diuji pada halaman penting.
Foto sering mentolerir kompresi lossy yang diperiksa. Logo, simbol antarmuka, seni garis, dan grafik mungkin cocok dengan SVG atau format raster yang melindungi tepi tajam. SVG cocok untuk seni garis, diagram, dan grafik, bukan foto yang sangat detail.
Pertahankan detail penting dan sediakan teks yang menyampaikan tujuan gambar.
Gunakan teks alternatif kosong (alt=""); jangan jadikan gambar dekoratif sebagai satu-satunya sumber informasi penting.
Jelaskan tindakan atau tujuan, bukan sekadar piksel gambar.
2. Ukur untuk slot yang dirender, lalu tawarkan kandidat responsif
Cocokkan dimensi intrinsik ke slot CSS. File berukuran desktop pada kartu sempit membuang transfer; raster kecil yang dibentangkan berlebihan menjadi buram. Perhitungkan device pixel ratio, tetapi validasi secara visual daripada mengasumsikan setiap layar memerlukan kandidat terbesar.
Untuk satu komposisi pada beberapa lebar, gunakan deskriptor lebar srcset dan sizes untuk menyatakan lebar slot aktual. Browser kemudian memilih kandidat. Gunakan picture untuk art direction: crop layar kecil yang mempertahankan subjek berbeda dari sekadar mengecilkan gambar desktop. Simpan fallback img dengan src dan alt di dalam picture.
Komposisi sama, dimensi piksel berbeda.
Crop atau komposisi berbeda ketika penskalaan menyembunyikan pesan.
Pertahankan src pada elemen img untuk klien yang tidak memakai atribut responsif.
3. Pilih format dan kompresi berdasarkan karakteristik gambar
WebP dan AVIF dapat mengurangi transfer raster dalam kasus yang sesuai, tetapi format bukan jaminan kualitas. Uji pada contoh wajah perwakilan, tekstur halus, gradien merek, teks yang sudah tertanam, dan transparansi. JPEG tetap menjadi fallback umum untuk foto; PNG cocok untuk detail raster lossless atau transparansi. Periksa dukungan AVIF dan kecocokan operasional untuk audiens dan stack pengiriman Anda.
Kompresi lossy menghapus informasi untuk menghemat byte dan biasanya lebih toleran pada foto detail dibandingkan garis tajam atau teks. Kompresi lossless mempertahankan piksel yang dikodekan tetapi mungkin menghemat lebih sedikit. Pilih kualitas melalui perbandingan berdampingan pada ukuran render, bukan sekadar pengaturan numerik. Hapus metadata hanya setelah memastikan orientasi, warna, dan kebutuhan workflow.
Bandingkan lossy AVIF, WebP, dan fallback JPEG pada ukuran tampilan.
Utamakan SVG yang sesuai atau lindungi tepi raster yang tajam melalui pengujian.
Konfirmasi tampilan alpha di setiap format yang dikirimkan dan fallback.
4. Buat markup yang melindungi kecepatan dan stabilitas tata letak
Berikan setiap img konten atribut width dan height yang sesuai dengan rasio aspek intrinsiknya. Browser dapat mengalokasikan ruang sebelum file tiba, mengurangi pergeseran tata letak. CSS masih bisa mengatur dimensi yang ditampilkan.
Gunakan loading=lazy hanya untuk gambar di luar viewport awal. Jangan lazy-load gambar yang kemungkinan terlihat saat muat, terutama kandidat Largest Contentful Paint (LCP). LCP adalah waktu render dari gambar, blok teks, atau video terbesar yang terlihat di viewport. fetchpriority=high hanya petunjuk relatif; gunakan secukupnya dan ukur hasilnya. Gunakan markup gambar HTML untuk konten yang memerlukan teks alternatif atau penemuan gambar; Google mendokumentasikan bahwa mereka tidak mengindeks gambar yang hanya ada di CSS.
Setel width dan height, termasuk pada gambar galeri yang dimuat secara malas.
Biarkan gambar yang berpotensi menjadi LCP dimuat segera dan periksa prioritas permintaan.
Lazy-load gambar yang di luar layar dan uji pengguliran pada jaringan terbatas.
5. Pertahankan makna, penemuan, dan kualitas visual
Teks alternatif bergantung pada tujuan dan konteks. Jelaskan informasi penting untuk gambar informatif, gunakan alt="" untuk dekorasi, dan sebutkan fungsi jika gambar adalah tautan atau tombol. Untuk grafik atau diagram kompleks, sediakan penjelasan ekuivalen di teks terdekat. Jangan gunakan daftar kata kunci.
Untuk gambar yang dapat ditemukan, gunakan elemen gambar HTML standar, teks terdekat yang relevan, nama file deskriptif pendek bila praktis, dan sumber fallback dengan markup responsif. Jangan mengubah latar belakang dekoratif menjadi konten redundan hanya demi penemuan.
Tinjau file yang dikompresi pada ukuran terbesar dan terkecil yang dimaksudkan.
Utamakan teks biasa; jika tidak memungkinkan, sediakan padanan kata-kata.
Tempatkan gambar informatif dekat teks halaman yang relevan.
6. Verifikasi halaman, bukan hanya aset
Uji halaman representatif pada viewport sempit dan lebar. Di alat pengembang browser, periksa kandidat srcset, ukuran transfer, dimensi yang dirender, dan pergerakan tata letak. Batasi jaringan untuk memperlihatkan gambar hero yang terlambat dan galeri yang lambat. Perbandingan ekspor tidak dapat mengungkapkan nilai sizes yang tidak akurat, crop tak terduga, atau masalah transformasi produksi.
Gunakan sinyal lab dan lapangan saat tersedia. Lighthouse dan PageSpeed Insights dapat mengidentifikasi gambar yang tidak berukuran dengan benar; LCP lapangan mencerminkan kunjungan nyata sepanjang waktu. Bandingkan template, kelas perangkat, versi rilis, dan jendela pengukuran yang sama. Jangan mengkreditkan gambar untuk perubahan metrik ketika waktu server, skrip, font, atau pihak ketiga juga berubah. Tahapkan perubahan template bersama dan pertahankan jalur rollback sampai tervalidasi.
Pastikan slot tidak memilih kandidat yang ukurannya tiba-tiba berlebihan.
Periksa crop, ketajaman, warna, alternatif, dan stabilitas tata letak.
Tentukan pemilik, sinyal yang diharapkan, dan jalur pembalikan.