Pemeriksaan gambar situs web
Optimalkan gambar situs web: periksa halaman sebelum menerbitkan
Gunakan panduan ini untuk melihat apa yang benar-benar dimuat browser, pilih ukuran tepat untuk setiap gambar, perbaiki HTML, dan periksa halaman sebelum menerbitkan.
Jawaban cepat
Periksa halaman langsung sebelum mengekspor file lain
Perbaikan gambar tercepat sering bukan konverter baru. Temukan dulu permintaan berat, ukuran hilang, gambar LCP yang dimuat malas, atau metadata yang masih menunjuk file lama. Mulai dari halaman, lalu ekspor hanya yang harus diubah.
Periksa dulu
Mulai dengan apa yang diunduh browser
File desain dan folder media tidak menunjukkan apa yang sebenarnya didapat pengguna. Browser menunjukkan URL gambar yang dimuat, ukuran tampilannya, apakah halaman mencadangkan ruang, dan apakah file besar digunakan ulang di tempat file kecil cukup.
URL mana yang dimuat?
Buka halaman dan catat URL gambar asli, ukuran transfer, ukuran tampilan, dan apakah browser memilih versi yang diharapkan.
Seberapa besar gambar?
Ukur area yang terlihat daripada menebak dari file sumber. Kartu, kolom konten, dan gambar sosial tidak boleh berbagi satu ekspor.
Apakah itu di layar pertama?
Temukan gambar LCP yang mungkin, hindari pemuatan malas secara tidak sengaja, dan simpan gambar kurang penting dari pemuatan pertama.
Apakah metadata cocok?
Periksa teks alt, gambar Open Graph, gambar JSON-LD, teks sekitar, dan nama file agar halaman menceritakan satu kisah yang jelas.
Rencana gambar
Rencanakan setiap gambar penting sebelum konversi
Rencana gambar memisahkan panduan ini dari artikel konverter. Ini menanyakan kebutuhan setiap area gambar: ukuran, urutan pemuatan, fallback, peran metadata, dan pemeriksaan akhir yang memastikan halaman menggunakan file yang tepat.
| Area gambar | Keputusan | Risiko | Periksa |
|---|---|---|---|
| Gambar utama | Tetapkan gambar LCP yang mungkin, dimensi tepat, urutan pemuatan, dan jalur fallback. | Pemuatan malas atau file terlalu besar dapat menunda gambar berguna pertama. | Bandingkan ukuran tampilan, ukuran permintaan, dan perilaku pemuatan di layar pertama. |
| Gambar konten artikel | Tentukan versi lebar konten dan cadangkan ruang dengan lebar dan tinggi. | Halaman mungkin memuat gambar sumber yang jauh lebih lebar dari kolom baca. | Periksa lebar desktop dan seluler serta verifikasi kandidat srcset yang dipilih. |
| Gambar kartu berulang | Buat versi kecil untuk daftar, hub, kartu terkait, dan halaman arsip. | Satu gambar artikel yang digunakan ulang bisa menambah beban halaman daftar. | Pindai halaman daftar dan pastikan kartu berulang tidak memuat gambar artikel penuh. |
| Gambar metadata | Siapkan gambar Open Graph dan JSON-LD sebagai file yang direncanakan, bukan sisa tidak sengaja. | Pratinjau pencarian dan berbagi bisa menampilkan gambar lama, terpotong, atau tidak terkait. | Periksa tag meta yang dirender dan data terstruktur untuk URL akhir. |
Saat rencana mengatakan file perlu versi baru, gunakan panduan konversi gambar untuk memilih langkah berikutnya. Gunakan Panduan JPG ke WebP untuk pekerjaan WebP normal dan panduan AVIF hanya untuk foto besar yang masih butuh penghematan lebih.
Ukuran gambar
Tetapkan ukuran jelas untuk setiap area gambar
Gambar responsif bekerja hanya jika HTML sesuai tata letak. Ukur area, pilih beberapa lebar berguna, cadangkan rasio aspek, dan hindari mengirim asli besar hanya karena sudah ada.
Pemeriksaan sederhana: jika kartu 360 px mengunduh file 2400 px, kompresi bukan masalah utama. Halaman butuh versi gambar lebih kecil atau HTML menunjuk file salah.
Urutan pemuatan
Buat gambar pertama dimuat dengan sengaja
Gambar yang membentuk layar pertama butuh aturan berbeda dari gambar di bawah halaman. Temukan gambar LCP yang mungkin, hindari pemuatan malas tidak sengaja, dan simpan gambar bawah tetap tenang sampai dibutuhkan.
- 1
Beri nama gambar LCP
Jika gambar bermakna pertama kemungkinan menjadi Largest Contentful Paint, jangan muat malas secara tidak sengaja.
- 2
Jaga gambar bawah tetap tenang
Gambar di bawah viewport pertama biasanya harus menggunakan pemuatan malas dan decoding asinkron.
- 3
Periksa latar belakang CSS
Latar belakang yang dipotong masih bisa mengunduh file besar. Gunakan file dengan ukuran tepat untuk area yang terlihat.
- 4
Periksa permintaan berulang
Gambar kartu kecil menjadi berat jika file besar yang sama diulang puluhan kali.
HTML
Gunakan HTML responsif untuk area yang diukur
Untuk gambar penting, buat pilihan browser jelas. Contoh di bawah menunjukkan opsi lebar, ukuran, dimensi tetap, dan fallback. Ubah perilaku pemuatan berdasarkan area, bukan kebiasaan.
<picture>
<source
type="image/avif"
srcset="/images/article/product-640.avif 640w,
/images/article/product-960.avif 960w,
/images/article/product-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/article/product-640.webp 640w,
/images/article/product-960.webp 960w,
/images/article/product-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/article/product-960.jpg"
alt="Tangkapan layar dashboard yang menunjukkan alur unggah"
width="960"
height="540"
loading="lazy"
decoding="async" />
</picture>Pencarian dan berbagi
Buat gambar, teks alt, dan metadata menceritakan satu kisah
SEO gambar bukan hanya menambahkan kata kunci. Gambar yang terlihat, teks sekitar, teks alt yang membantu, tag Open Graph, dan tautan gambar JSON-LD harus menggambarkan halaman yang sama dengan jelas. Gambar dekoratif harus tetap dekoratif.
Saat pemeriksaan menemukan pratinjau sosial lemah, lanjutkan dengan Buka panduan gambar Grafik. Saat skema dan tag meta bermasalah, gunakan Panduan metadata Blazor untuk menjaga konsistensi JSON-LD dan metadata halaman.
Langkah
Pemeriksaan gambar sederhana untuk setiap halaman
- 1
Buka halaman asli
Mulai dari URL saat ini, bukan folder aset. Catat gambar yang benar-benar dimuat.
- 2
Buat rencana gambar
Untuk setiap gambar penting, catat lebar target, rasio aspek, urutan pemuatan, fallback, dan peran metadata.
- 3
Konversi hanya yang berubah
Gunakan alat konversi hanya untuk file yang ditemukan pemeriksaan, bukan ekspor ulang seluruh folder media.
- 4
Perbarui HTML dan metadata
Tunjuk srcset, ukuran, dimensi, Open Graph, dan tautan gambar JSON-LD ke file yang disiapkan.
- 5
Verifikasi output browser
Periksa halaman, permintaan jaringan, metadata sosial, data terstruktur, dan tata letak seluler.
- 6
Simpan aturan untuk lain kali
Dokumentasikan keputusan gambar agar pembaruan berikutnya tidak dimulai dengan tebakan lagi.
Tooltip
Gunakan PixelPress setelah tahu file mana yang akan dikonversi
Saat pemeriksaan menunjukkan folder perlu file WebP atau AVIF baru, PixelPress dapat mengonversinya secara lokal. File asli tetap utuh, dan folder output mudah ditinjau.
Daftar periksa
Daftar periksa gambar sebelum menerbitkan
Gunakan daftar ini sebelum artikel, halaman arahan, atau halaman produk tayang. Ini menangkap masalah halaman yang mungkin terlewat konversi saja.
Pertanyaan umum
Apa itu pemeriksaan gambar situs web?
Pemeriksaan gambar situs web melihat gambar yang dimuat halaman nyata, lalu membandingkannya dengan tata letak yang terlihat, urutan pemuatan, HTML responsif, teks alt, metadata, dan tautan data terstruktur.
Apakah optimasi gambar sama dengan konversi ke WebP atau AVIF?
Tidak. Konversi hanya satu langkah. Halaman masih bisa lambat jika HTML menunjuk ke file salah, ukuran hilang, gambar LCP dimuat malas, atau metadata gambar lama.
Bagaimana cara menemukan gambar yang paling memperlambat kinerja?
Mulai dari layar pertama dan permintaan jaringan. Cari gambar terbesar yang terlihat, gambar kartu berulang yang terlalu besar, latar belakang CSS, dan file yang ukuran tampilannya jauh lebih kecil dari gambar yang diunduh.
Haruskah setiap gambar memiliki teks alt?
Tidak. Gambar berguna harus memiliki teks alt yang membantu. Gambar dekoratif harus tetap di luar cerita konten dan tidak menjadi wadah kata kunci.
Di mana PixelPress cocok dalam alur kerja ini?
PixelPress cocok digunakan setelah pemeriksaan menunjukkan file mana yang perlu output WebP atau AVIF baru. Ini membantu konversi batch lokal, sementara pemeriksaan halaman tetap menentukan ukuran, urutan pemuatan, metadata, dan pemeriksaan akhir.