Gambar sering menjadi bagian terbesar dari unduhan halaman. Mengurangi bebannya bukan berarti menghilangkan seluruh visual. Mulailah dengan mengirim gambar yang sesuai dengan ukuran tampil dan perannya.
Sesuaikan dimensi dengan tempat tampil
Foto selebar beberapa ribu piksel biasanya tidak diperlukan untuk kartu artikel yang kecil. Gunakan gambar responsif agar browser dapat memilih sumber yang sesuai ukuran layar dan kerapatan piksel.
Pada Next.js, komponen Image membantu menyediakan optimasi untuk format raster yang didukung. Properti sizes harus menggambarkan layout sebenarnya agar browser tidak memilih sumber terlalu besar. SVG lokal berbeda: ia tetap berupa vektor dan tidak memerlukan konversi raster untuk ilustrasi sederhana.
Pilih format berdasarkan isi
Foto umumnya cocok dengan JPEG, WebP, atau AVIF, sedangkan SVG cocok untuk diagram dan ilustrasi vektor. PNG berguna ketika membutuhkan transparansi atau detail tertentu, tetapi tidak selalu efisien untuk foto.
Bandingkan hasil kompresi secara visual. Teks di dalam tangkapan layar dapat rusak jika kompresi terlalu agresif. Ukuran berkas kecil tidak membantu jika isi gambar tidak lagi terbaca.
Prioritaskan gambar utama saja
Gambar yang langsung terlihat di layar awal sebaiknya tidak ditunda tanpa alasan. Sebaliknya, gambar jauh di bawah halaman dapat dimuat mendekati saat diperlukan. Memberi prioritas tinggi pada seluruh gambar justru mengaburkan sumber mana yang paling penting.
Sediakan ruang sebelum gambar tiba
Tentukan lebar dan tinggi atau rasio aspek agar browser bisa menyiapkan ruang. Tanpa itu, teks dapat berpindah saat gambar selesai dimuat. Perpindahan layout mengganggu pembaca dan dapat menyebabkan salah klik.
Ukur dengan kondisi nyata
Periksa jumlah byte yang ditransfer melalui panel Network. Uji pula dengan cache kosong dan jaringan yang dibatasi. Catat LCP dan CLS untuk memahami kapan konten utama terlihat dan apakah layout bergeser.
Jangan menyamakan waktu respons server dengan waktu halaman siap dipakai. Keduanya penting, tetapi mengukur bagian perjalanan yang berbeda. Dokumentasi web.dev tentang optimasi gambar menyediakan penjelasan lebih lanjut.
Menentukan anggaran gambar secara praktis
Mulai dengan mencatat gambar yang benar-benar terlihat pada layar pertama. Pisahkan cover utama, logo, ikon, dan gambar isi. Setiap jenis memiliki fungsi berbeda. Cover menjelaskan topik, sedangkan ikon membantu orientasi; keduanya tidak perlu disimpan dengan metode yang sama.
Unduh aset asli ke lingkungan kerja dan buat variasi kompresi. Bandingkan ukuran berkas bersama kualitas tampil pada dimensi yang sebenarnya. Jangan hanya membesarkan pratinjau sampai terlihat cacat yang tidak akan tampak dalam penggunaan normal, tetapi tetap periksa detail yang dibutuhkan pembaca. Untuk diagram, teks dan garis harus tetap terbaca.
Contoh: kartu artikel dan halaman detail
Satu cover dapat muncul pada kartu kecil dan halaman detail yang lebih lebar. Jika browser selalu mengambil sumber terbesar, kartu mengunduh data yang tidak dibutuhkan. Gunakan pilihan ukuran responsif dan jelaskan lebar tampil melalui properti yang sesuai pada framework.
Pada layout tiga kolom, kartu tidak memenuhi seluruh lebar viewport desktop. Pada ponsel, kartu mungkin mendekati lebar layar setelah padding. Nilai sizes perlu mengikuti perbedaan ini. Periksa sumber yang benar-benar dipilih browser melalui developer tools, bukan hanya menganggap konfigurasi sudah bekerja karena tidak muncul pesan error.
Alt text menjelaskan fungsi, bukan daftar kata kunci
Teks alternatif perlu mengikuti peran gambar. Ilustrasi dekoratif di samping tautan judul yang sama dapat memakai alt kosong agar pembaca layar tidak mendengar informasi berulang. Gambar yang menjelaskan langkah atau data memerlukan deskripsi yang menyampaikan informasi pentingnya.
Jangan menyalin prompt generasi gambar sebagai alt tanpa melihat hasil. Model bisa menggambar objek yang berbeda dari permintaan. Untuk grafik kompleks, sediakan ringkasan atau data dalam teks agar informasi tidak hanya berada dalam piksel. Alt bukan tempat menyisipkan daftar kata kunci SEO yang tidak membantu pembaca.
Menggunakan gambar generatif secara bertanggung jawab
Gambar AI cocok untuk ilustrasi konseptual, tetapi tidak boleh dipresentasikan sebagai dokumentasi kejadian nyata. Periksa objek yang cacat, tulisan tidak terbaca, simbol yang menyesatkan, dan kemiripan merek. Jika artikel membahas antarmuka tertentu, tangkapan layar yang sah dan akurat sering lebih informatif daripada gambar generatif.
Periksa ketentuan penyedia dan kewajiban atribusi. Mengunduh gambar tidak dengan sendirinya membuktikan seluruh hak penggunaan telah dipenuhi. Simpan catatan asal aset, tanggal, serta konteks pemakaiannya. Bila layanan menyertakan logo atau watermark, jangan menghapusnya tanpa dasar izin yang jelas.
Hindari generasi gambar pada request pembaca
Untuk blog statis, buat gambar terlebih dahulu saat proses editorial. Simpan hasil yang sudah diperiksa sebagai aset lokal, lalu publikasikan bersama artikel. Pendekatan ini memisahkan ketidakpastian waktu generasi dari pengalaman pengunjung serta memudahkan pengecekan sebelum tampil.
Jika layanan gambar sedang gagal atau terkena batas permintaan, artikel sebaiknya tidak ikut gagal dimuat. Mengandalkan URL generasi langsung juga bisa menyebabkan perubahan perilaku ketika penyedia mengganti model atau kebijakan. Aset lokal memberi kontrol lebih jelas atas hasil yang benar-benar ditampilkan, meskipun pengelola tetap perlu mengelola ukuran dan lisensinya.
Checklist setelah publikasi
Uji gambar pada lebar kecil, tablet, dan desktop. Pastikan tidak ada overflow, ruang kosong yang salah, atau tulisan penting yang terpotong. Periksa jumlah transfer dan prioritas unduhan pada koneksi lambat. Ulangi pengukuran setelah menambah iklan atau widget karena komponen baru dapat mengubah urutan pemuatan dan layout.
