Mengoptimalkan gambar website berarti membuat berkasnya cukup ringan untuk dimuat cepat, tetapi masih terlihat baik pada ukuran tampilnya. Urutannya tiga langkah: perkecil dimensi piksel sampai sesuai ukuran tampil, pilih format yang cocok dengan isi gambar, lalu turunkan mutu kalau formatnya mendukung. Langkah pertama dan ketiga dikerjakan lewat Kompres Foto, dan langkah kedua lewat Konversi Format Gambar.
Urutan itu penting karena dimensi adalah faktor yang paling berpengaruh pada ukuran berkas. Foto berukuran 4000 piksel yang ditampilkan selebar 800 piksel menyimpan empat per lima piksel yang tidak akan pernah terlihat. Mengompres foto seperti itu tanpa memperkecil dimensinya hanya memangkas sebagian kecil beratnya.
Ada juga pekerjaan yang bukan soal berkas: menulis atribut lebar dan tinggi di HTML, menunda pemuatan gambar di bawah layar, dan menyediakan beberapa ukuran berkas untuk layar berbeda. Ketiganya dijelaskan sebagai panduan kode di artikel lain di kelompok ini, karena bukan fitur tool. Artikel ini fokus pada berkasnya.
Tentukan ukuran tampil lebih dulu
Sebelum menyentuh berkas, ukur dulu seberapa besar gambar akan ditampilkan. Buka halaman tempat gambar itu akan dipasang dan perhatikan lebar ruang yang tersedia. Pada tema yang sudah jadi, ukuran ini biasanya sudah ditentukan tata letaknya, misalnya lebar penuh kolom konten atau setengah kolom.
Kalau gambar akan ditampilkan selebar 800 piksel, berkas dengan lebar 800 piksel sudah cukup untuk layar biasa. Untuk layar berkerapatan piksel tinggi, sediakan versi dua kali lipat, yaitu 1600 piksel. Di atas itu tidak ada gunanya untuk pemakaian di web, kecuali gambar akan diperbesar pengunjung atau dicetak.
Satu gambar yang muncul di beberapa tempat dengan ukuran berbeda sebaiknya disiapkan dalam beberapa versi, bukan satu berkas besar untuk semuanya. Versi kecil untuk daftar artikel, versi besar untuk halaman detail. Ini juga yang dipakai mekanisme gambar responsive, yang dijelaskan di cara membuat gambar responsive.
Pilih format sesuai isi gambar
Format yang tepat menyelesaikan sebagian masalah ukuran sebelum kompresi dimulai. Untuk foto, WebP adalah pilihan paling ringan, dan JPG adalah pilihan paling aman karena dibuka semua aplikasi. Untuk logo, ikon, grafik, dan tangkapan layar, PNG atau WebP lebih tepat karena keduanya menjaga garis tetap tajam dan bisa menyimpan transparansi.
Kesalahan yang paling sering terjadi adalah memakai PNG untuk foto. Ukuran berkasnya akan jauh lebih besar daripada JPG tanpa keuntungan yang sepadan, karena foto memang berisi detail yang bisa dibuang tanpa terlihat mata. Sebaliknya, memakai JPG untuk tangkapan layar berisi teks membuat huruf kehilangan ketajaman.
Alasan memilih tiap format dibahas lebih panjang di format gambar untuk website. Kalau format berkas Anda perlu diubah, kerjakan sebelum kompresi supaya penurunan mutu berikutnya bekerja pada format yang benar.
Turunkan mutu dan dimensi lewat tool
Buka Kompres Foto, lalu pilih tool sesuai format berkas: Kompres JPG, Kompres PNG, atau Kompres WebP. Ketiganya bisa memperkecil dimensi dan menghapus metadata lokasi.
Perbedaan perlakuan mengikuti sifat formatnya. JPG dan WebP bisa diturunkan mutunya, dan penurunan itulah yang membuat berkasnya mengecil. PNG tidak punya pengaturan mutu manual: PNG dipadatkan dengan merapikan struktur datanya dan menyederhanakan paletnya, dengan mutu yang dijaga, dan latar transparannya tetap utuh. Karena itu, PNG yang sudah dioptimalkan perkakas lain bisa tidak menyusut sama sekali, bahkan sedikit bertambah.
Ukuran akhir dipilih lewat chip di pratinjau, dan angkanya terlihat sebelum Anda mengunduh. Ukuran persen tersedia dari 10 sampai 200 persen. Contoh yang terverifikasi: persen 50 pada gambar 1600x1200 menghasilkan 800x600. Ukuran pas foto 2x3, 3x4, dan 4x6 sentimeter juga tersedia pada 300 DPI, meskipun untuk keperluan web ukuran persen lebih sering dipakai.
Saat berkas ditulis ulang, EXIF dan GPS terhapus. Untuk gambar yang dipublikasikan, hilangnya metadata itu menguntungkan karena koordinat tempat foto diambil tidak ikut tersebar.
Urutan kerja yang disarankan
- Kumpulkan gambar yang akan dioptimalkan dan catat ukuran tampil masing-masing di halaman.
- Tentukan format tujuan berdasarkan isi gambar.
- Kalau format perlu diubah, konversi lebih dulu lewat Konversi Format Gambar.
- Buka Kompres Foto dan pilih tool sesuai format.
- Unggah berkasnya, lalu pilih ukuran akhir di pratinjau. Perkecil dimensinya ke ukuran tampil lebih dulu.
- Kalau formatnya JPG atau WebP, turunkan mutunya sampai ukuran berkasnya wajar.
- Unduh hasilnya. Beberapa berkas sekaligus akan dikemas dalam arsip ZIP.
- Periksa hasilnya pada ukuran tampil yang sebenarnya sebelum diunggah.
- Setelah diunggah, lengkapi tag gambarnya dengan atribut lebar dan tinggi serta teks alternatif.
Jangan mengompres berkali-kali. Setiap penurunan mutu tidak bisa dikembalikan. Kalau hasil pertama masih terlalu besar, ulangi dari berkas asli dengan ukuran yang lebih kecil, bukan dari hasil kompres pertama.
Tiga skenario yang sering muncul
Skenario pertama: foto produk berukuran besar untuk halaman katalog. Perkecil dimensinya ke ukuran tampil, ubah ke WebP kalau situs mendukungnya, lalu turunkan mutunya. Untuk katalog yang memuat banyak foto sekaligus, kerjakan pengaturan yang sama pada semua berkas supaya hasilnya konsisten.
Skenario kedua: tangkapan layar untuk artikel tutorial. Simpan sebagai PNG, kompres dengan mutu yang dijaga, dan periksa teksnya pada ukuran tampil. Kalau ukurannya masih terlalu besar, pertimbangkan WebP, karena WebP bisa memadatkan gambar bergaris tajam tanpa kehilangan mutu.
Skenario ketiga: banner dengan teks di dalamnya. Hindari JPG. Pakai PNG atau WebP, dan pastikan ukuran akhirnya tidak membuat teks sulit dibaca. Ukuran banner yang tepat bergantung pada desain dan tema situs, dan pembahasannya ada di ukuran gambar untuk banner web.
Kesalahan umum saat mengoptimalkan gambar
Mengompres tanpa memperkecil dimensi. Ini langkah yang paling sering dilewatkan, padahal pengaruhnya paling besar. Foto 4000 piksel yang ditampilkan 800 piksel tetap membawa piksel yang tidak terpakai.
Mengubah JPG ke PNG untuk menaikkan mutu. Mutu yang hilang saat foto disimpan sebagai JPG tidak bisa dikembalikan. Konversi ke PNG hanya menghentikan penurunan mutu pada penyimpanan berikutnya, dan ukuran berkasnya hampir selalu bertambah.
Menyimpan satu berkas besar untuk semua tempat. Versi yang dipakai di daftar artikel tidak perlu sebesar versi di halaman detail. Siapkan dua versi daripada memaksa satu berkas melayani semuanya.
Mengharapkan tool ini menghapus latar belakang. Penghapusan latar dikerjakan aplikasi penyunting gambar, bukan tool kompresi. Yang ditangani tool di sini adalah ukuran, format, dan metadata.
Cara memeriksa hasilnya
Periksa empat hal setelah proses selesai. Pertama, ukuran berkasnya, dan bandingkan dengan versi sebelumnya. Kedua, dimensinya, dan pastikan tidak lebih kecil dari ukuran tampil yang dibutuhkan. Ketiga, ketajamannya, dengan membuka hasilnya pada ukuran 100 persen. Keempat, formatnya, dan pastikan penerima berkas bisa membukanya.
Setelah diunggah ke situs, pemeriksaan berpindah ke halaman. Buka halamannya dan perhatikan apakah tata letaknya bergeser saat gambar muncul. Periksa juga tampilannya di layar ponsel, karena gambar lebar yang tidak dibatasi CSS bisa membuat halaman melebar. Untuk pengukuran yang lebih menyeluruh, periksa tab jaringan di peramban dan catat gambar mana yang paling besar.
Simpan berkas asli sebelum ditimpa hasil kompresi. Mutu yang hilang tidak bisa dikembalikan, dan berkas asli adalah satu-satunya jalan untuk mengulang.
Kapan optimasi tidak diperlukan
Kalau gambar hanya satu di halaman yang seluruhnya ringan, optimasi tidak mendesak. Kompresi baru diperlukan ketika halaman memuat banyak gambar, ketika ada batas dari pihak lain, atau ketika ukurannya memperlambat pemuatan.
Kalau situs Anda sudah punya alur otomatis yang mengurus ukuran dan format, misalnya plugin optimasi di WordPress, berkas asli yang wajar bisa langsung diunggah. Tool di sini berguna saat tidak ada alur otomatis.
Kalau gambar perlu disunting secara kreatif, misalnya latar dihapus atau bayangan dibersihkan, aplikasi penyunting gambar lebih tepat. Tool di sini bekerja pada berkas: ukuran, format, dan metadata.
Pertanyaan yang sering muncul
Apakah mengoptimalkan gambar selalu berarti mengompres? Tidak selalu. Kalau dimensinya sudah sesuai ukuran tampil dan formatnya sudah tepat, berkas itu sudah optimal. Mengompresnya lagi hanya menurunkan mutu tanpa manfaat.
Berapa ukuran berkas yang ideal untuk gambar web? Tidak ada satu angka yang berlaku untuk semua gambar. Yang bisa dijadikan patokan adalah dimensi piksel yang sesuai ukuran tampil. Ukuran berkasnya mengikuti isi gambar dan formatnya.
Apakah metadata lokasi ikut terhapus saat kompresi? Ya. Saat berkas ditulis ulang, metadata kamera dan koordinat GPS terhapus. Kalau metadata itu masih dibutuhkan, simpan salinan berkas asli.
Apakah PNG bisa diturunkan mutunya? Tidak. PNG dipadatkan dengan merapikan struktur datanya dan menyederhanakan paletnya, dengan mutu yang dijaga agar perbedaannya tidak terlihat. Kalau ukurannya harus turun banyak, perkecil dimensinya atau ubah ke WebP bila tempat pemakaiannya menerima.
Mulai dari gambar yang paling berat
Kalau halaman Anda terasa lambat, mulai dari foto terbesar. Buka Kompres Foto, perkecil dimensinya ke ukuran tampil, lalu periksa hasilnya di halaman. Untuk memahami alasan di balik setiap langkah, baca Gambar untuk Web. Peta lengkap pekerjaan gambar ada di Panduan Gambar dan Foto.