Gambar untuk website dipilih dengan satu patokan: berkas paling kecil yang masih terlihat baik di layar. Untuk foto, WebP adalah pilihan paling ringan; JPG paling aman karena dibuka semua aplikasi dan peramban; PNG dipakai saat gambar butuh latar tembus pandang atau garis tajam, seperti logo, ikon, dan tangkapan layar. Memperkecil berkasnya dikerjakan lewat Kompres Foto, dan mengubah formatnya lewat Konversi Format Gambar.
Ukuran berkas bukan satu-satunya penyebab halaman terasa lambat. Gambar tanpa dimensi di HTML membuat tata letak bergeser saat gambarnya selesai dimuat, gambar di bawah layar yang dimuat sejak awal membuang kuota, dan satu gambar besar di bagian atas menahan seluruh tampilan. Semua itu diatur lewat kode, bukan lewat tool berkas. Karena itu, bagian kode di sini dijelaskan sebagai panduan, sedangkan tool di layanan ini menangani berkasnya: memperkecil dimensi, menurunkan mutu, mengubah format, dan menghapus metadata lokasi.
Sub-pilar ini mengumpulkan 23 artikel dalam lima kelompok: format dan dasar kecepatan, penyajian di halaman, ukuran elemen, gambar produk dan latar, serta platform dan distribusi.
Peta pekerjaan: 23 artikel dalam lima kelompok
Format dan dasar kecepatan. Mulai dari format gambar untuk website, lanjut ke cara mengoptimalkan gambar untuk website, dan penjelasan sebabnya di kenapa gambar memperlambat website.
Penyajian di halaman. Enam artikel yang berhubungan dengan kode: cara membuat lazy load gambar, cara menentukan dimensi gambar di HTML, cara membuat gambar responsive, cara menyesuaikan gambar dengan CSS, cara mengganti gambar website tanpa error, dan cara menguji kecepatan gambar website.
Ukuran elemen. Ukuran gambar untuk banner web, ukuran gambar untuk thumbnail, dan cara menghitung ukuran gambar dari piksel.
Gambar produk dan latar. Cara membuat gambar produk untuk web, cara menghapus latar putih gambar produk, cara menghapus background foto, cara membuat gambar transparan, dan cara menggabungkan gambar untuk banner.
Platform dan distribusi. Cara menyiapkan gambar untuk WordPress, cara menyiapkan gambar untuk Shopify, cara menyiapkan gambar untuk blog, format gambar untuk email marketing, rasio gambar untuk media sosial, dan cara menyiapkan gambar open graph.
Konsep dasar sebelum menyiapkan gambar
Ukuran berkas gambar ditentukan tiga hal: dimensi dalam piksel, tingkat pemadatan, dan tingkat detail gambar. Karena itu, tidak ada satu angka ukuran yang berlaku untuk semua gambar. Foto berisi detail halus tidak bisa dipadatkan sebanyak tangkapan layar berisi bidang warna rata. Yang bisa dilakukan adalah memperkecil dimensinya sampai sesuai ukuran tampil di layar, lalu menurunkan mutunya selama hasilnya masih terlihat baik.
Peramban mengunduh gambar sebagai berkas terpisah dari HTML dan CSS, dan setiap gambar menambah satu permintaan serta sejumlah byte. Gambar di bagian atas halaman paling terasa pengaruhnya, sedangkan gambar di bawah layar belum perlu diunduh saat halaman pertama dibuka.
Lazy load menunda pemuatan gambar sampai gambar itu mendekati layar. Peramban modern menyediakannya lewat atribut loading pada tag gambar, dan ada juga cara berbasis JavaScript. Gambar utama di bagian atas sebaiknya tidak ikut ditunda, karena justru memperlambat hal pertama yang dilihat pengunjung. Langkah kodenya dijelaskan di cara membuat lazy load gambar, dan bagian itu memang panduan untuk penulis halaman, bukan fitur tool di layanan ini.
Dimensi di HTML berbeda dari dimensi berkas. Atribut lebar dan tinggi di tag gambar memberi tahu peramban berapa ruang yang harus disediakan sebelum gambarnya selesai diunduh. Tanpa keduanya, halaman bergeser saat gambar muncul, dan teks yang sedang dibaca berpindah posisi. CSS tetap bisa membuat gambar menyesuaikan lebar layar; yang penting, ruangnya sudah dipesan sejak awal. Langkahnya ada di cara menentukan dimensi gambar di HTML.
Gambar responsive berarti menyediakan beberapa ukuran berkas, lalu membiarkan peramban memilih yang sesuai lebar layar dan kerapatan piksel perangkat. Caranya lewat atribut srcset dan sizes pada tag gambar, dan ukuran cadangannya bisa dibuat dengan Kompres Foto.
Open graph adalah gambar pratinjau yang muncul saat tautan dibagikan di media sosial atau aplikasi percakapan. Ukuran dan rasionya ditentukan masing-masing platform, dan ketentuan itu bisa berubah, jadi angkanya perlu diperiksa di pusat bantuan platform yang bersangkutan. Yang bisa kita siapkan adalah berkasnya, dengan subjek di bagian tengah, karena platform umumnya memotong gambar mengikuti rasionya sendiri. Rasio gambar media sosial mengikuti pola yang sama, dan menyiapkan versi persegi serta versi lanskap membuat gambar lebih aman dipotong.
Untuk WordPress, gambar yang diunggah akan dibuatkan beberapa ukuran turunan oleh sistem, dan mengompres berkas sebelum diunggah tetap berguna karena berkas asli ikut tersimpan. Untuk Shopify, ketentuan unggahannya dijelaskan di pusat bantuan Shopify. Untuk artikel blog, polanya mirip WordPress: siapkan berkas yang ringan, beri nama berkas yang deskriptif, dan isi teks alternatif.
Email marketing punya batasan sendiri. Banyak aplikasi email tidak menampilkan gambar sebelum penerima mengizinkannya, sehingga pesan harus tetap terbaca tanpa gambar. JPG dan PNG lebih aman dipakai di email daripada WebP, dan teks alternatifnya selalu diisi.
Batas paket berlaku sama untuk seluruh tool di kelompok ini. Tanpa akun, satu hari menerima 20 pemrosesan dengan batas 5 MB per gambar dan 10 berkas per proses. Paket Gratis dengan akun memberi 30 pemrosesan per hari, 5 MB per gambar, dan 20 berkas. Paket Berbayar memberi pemrosesan tanpa batas jumlah, 20 MB per gambar, dan 20 berkas. Rinciannya ada di halaman harga.
Alur kerja untuk tiga skenario nyata
Skenario pertama: artikel blog dengan banyak foto. Kumpulkan fotonya di satu folder, lalu buka Kompres Foto dan unggah beberapa berkas sekaligus. Kalau lebih dari satu berkas, hasilnya dikemas dalam arsip ZIP. Pilih ukuran akhir lewat chip di pratinjau, dan periksa angkanya sebelum mengunduh. Kalau situs Anda mendukung WebP, ubah formatnya lewat Konversi Format Gambar. Setelah diunggah, lengkapi tag gambarnya dengan atribut lebar dan tinggi, teks alternatif, dan penundaan pemuatan.
Skenario kedua: halaman produk di toko online. Siapkan foto dengan latar dan pencahayaan yang konsisten lebih dulu, karena tool berkas tidak bisa memperbaiki bayangan atau latar yang berantakan. Seragamkan dimensinya dengan Kompres Foto, lalu periksa ketentuan unggahan platform di pusat bantuannya. Untuk WordPress, unggahan dibuatkan ukuran turunan; untuk Shopify, tema yang menampilkan ukuran berbeda. Yang perlu Anda siapkan tetap sama: berkas asli yang rapi, dimensi yang cukup untuk tampilan terbesar, dan nama berkas yang jelas.
Skenario ketiga: tautan yang dibagikan dan email promosi. Siapkan gambar pratinjau dengan subjek di tengah, periksa rasio yang berlaku di platform tujuan lewat pusat bantuannya, lalu perkecil berkasnya. Untuk email, gunakan JPG atau PNG dan uji tampilannya sebelum dikirim.
Kesalahan umum di kelompok ini
Mengunggah foto langsung dari kamera ke situs. Foto ponsel beresolusi jauh lebih besar daripada yang bisa ditampilkan halaman, dan piksel berlebih itu hanya menambah berat. Perkecil dulu dimensinya.
Memakai PNG untuk semua gambar. Untuk foto, PNG menghasilkan berkas jauh lebih besar tanpa keuntungan yang sepadan. Pakai PNG hanya saat butuh latar tembus pandang atau garis tajam.
Memakai WebP di tempat yang belum menerimanya. WebP memang paling ringan, tetapi belum semua aplikasi bisa membukanya. Untuk email dan portal yang meminta format tertentu, JPG atau PNG lebih aman.
Mengompres berkali-kali. Setiap penurunan mutu tidak bisa dikembalikan. Simpan berkas asli, dan kalau hasil pertama kurang pas, ulangi dari berkas asli.
Lupa mencantumkan ukuran gambar di HTML. Halaman akan bergeser saat gambar selesai dimuat, dan pembaca kehilangan posisi bacaannya.
Menunda pemuatan gambar utama. Lazy load dipasang untuk gambar yang jauh di bawah layar. Gambar pertama yang terlihat sebaiknya dimuat segera.
Mengharapkan tool ini menghapus latar belakang. Penghapusan latar dikerjakan aplikasi penyunting gambar, bukan tool kompresi atau konversi.
Kapan sebaiknya tidak memakai tool online
Kalau gambar perlu disunting secara kreatif, misalnya latar dihapus, bayangan dibersihkan, atau beberapa gambar disatukan dengan presisi, aplikasi penyunting gambar lebih tepat. Tool di sini bekerja pada berkas: ukuran, format, dan metadata.
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 berkasnya bukan JPG, PNG, atau WebP, halaman tool akan menolaknya dengan menyebut format yang diterima. Format lain seperti HEIC, BMP, GIF, TIFF, SVG, AVIF, dan RAW tidak didukung. Untuk HEIC dari iPhone, ubah pengaturan kamera agar menyimpan sebagai JPG.
Kalau gambar itu sebenarnya dokumen yang akan diserahkan ke instansi, perlakukan sebagai dokumen. Susun halamannya menjadi PDF lewat JPG ke PDF dan periksa persyaratan instansinya.
Cara memeriksa hasil sebelum diunggah
Periksa empat hal setelah proses selesai. Pertama, ukuran berkasnya, dan pastikan sudah sesuai batas yang ada. Kedua, dimensinya, dan pastikan cukup untuk ukuran tampil terbesar di situs. Ketiga, ketajamannya, dengan membuka hasilnya pada ukuran 100 persen. Keempat, formatnya, dan pastikan aplikasi atau platform tujuan bisa membukanya.
Setelah diunggah ke situs, pemeriksaan berpindah ke halaman. Buka halamannya, dan perhatikan apakah tata letaknya bergeser saat gambar muncul. Periksa juga tampilan di layar kecil, karena gambar lebar yang tidak dibatasi CSS bisa membuat halaman melebar. Cara menguji kecepatan halaman secara menyeluruh dijelaskan di cara menguji kecepatan gambar website.
Untuk email, uji kirim ke diri sendiri di lebih dari satu aplikasi email. Periksa apakah gambarnya tampil, apakah teks alternatifnya muncul saat gambar diblokir, dan apakah ukuran pesannya tetap wajar. Untuk tautan yang dibagikan, tempel tautannya di aplikasi tujuan dan periksa gambar pratinjaunya.
Simpan berkas asli sebelum ditimpa hasil kompresi. Mutu yang hilang saat kompresi tidak bisa dikembalikan, dan berkas asli adalah satu-satunya jalan untuk mengulang.
Pertanyaan yang sering muncul
Format apa yang paling cepat untuk website? WebP, karena pada mutu yang sama ukurannya paling kecil di antara JPG, PNG, dan WebP. Kalau ada aplikasi atau penerima yang belum bisa membuka WebP, JPG adalah pilihan paling aman. PNG dipakai saat gambar butuh latar tembus pandang atau garis tajam.
Apakah tool di sini bisa memperkecil dimensi gambar? Bisa. Kompres Foto menyediakan ukuran persen dari 10 sampai 200 persen dan ukuran khusus sesuai dimensi yang dibutuhkan, termasuk ukuran pas foto 2x3, 3x4, dan 4x6 sentimeter.
Apakah lazy load bisa diatur dari tool ini? Tidak. Lazy load dipasang di kode halaman, lewat atribut loading pada tag gambar atau skrip. Tool di sini menyiapkan berkasnya saja. Langkah kodenya dijelaskan di cara membuat lazy load gambar.
Apakah metadata lokasi ikut terhapus? Ya. Saat berkas ditulis ulang, metadata kamera dan koordinat GPS terhapus, jadi foto yang dipublikasikan tidak membawa lokasi pengambilan. Simpan salinan berkas asli kalau metadata itu masih dibutuhkan.
Apakah gambar saya disimpan di server? Untuk kelompok tool ini, berkas dialirkan ke pemroses dan hasilnya dikirim balik ke peramban tanpa ditulis ke penyimpanan permanen. Yang dicatat hanya hal teknis seperti ukuran berkas, waktu proses, dan jenis tool, tanpa isi gambarnya. Keterangan lengkapnya ada di kebijakan privasi.
Mulai dari gambar yang paling berat
Kalau halaman Anda terasa lambat, mulai dari foto terbesar: buka Kompres Foto, perkecil dimensinya, lalu periksa hasilnya di halaman. Kalau formatnya perlu diubah ke WebP, lanjutkan ke Konversi Format Gambar. Untuk menyusun gambar menjadi dokumen, gunakan JPG ke PDF. Pekerjaan sejenis untuk foto jualan dibahas di Foto Produk, dan panduan besarnya di Panduan Gambar dan Foto.