Mengganti gambar di website berjalan tanpa error kalau tiga hal dijaga: nama berkasnya tetap dikenali kode, dimensinya tidak jauh berbeda dari gambar lama, dan cache tidak menyajikan versi lama. Yang paling sering membuat halaman rusak bukan proses unggahnya, melainkan gambar pengganti yang ukurannya berbeda, nama berkas yang berubah tanpa kode ikut diperbarui, atau berkas lama yang masih tersimpan di cache peramban dan server.
Sebelum menyentuh berkas apa pun, siapkan dulu penggantinya: dimensi yang sama atau proporsional, format yang sama atau lebih aman, dan ukuran berkas yang sudah dikecilkan. Sisanya soal urutan kerja. Bagian berikut membahas tiga penyebab umum, tiga jalur penggantian, cara menangani cache, dan daftar periksa setelah gambar baru terpasang.
Tiga penyebab halaman rusak setelah gambar diganti
Penyebab pertama, kode masih menunjuk nama berkas lama. Halaman memanggil hero.jpg, lalu Anda mengunggah hero-baru.jpg dan menghapus yang lama. Kode tidak pernah tahu ada nama baru, jadi gambarnya hilang dan peramban menampilkan ikon berkas rusak. Ini kesalahan yang paling mudah dihindari: kalau nama berkas berubah, setiap tempat yang memanggilnya juga harus diperbarui.
Penyebab kedua, dimensi berubah jauh. Gambar lama berukuran 1200x600 piksel, penggantinya 800x800 piksel. Kalau kode memaksa gambar mengisi kotak selebar 1200 piksel, gambar baru akan diregangkan dan terlihat buram. Kalau tidak dipaksa, tinggi halamannya berubah dan tata letak di bawahnya bergeser. Samakan dimensinya lebih dulu, atau sesuaikan aturan tampilannya.
Penyebab ketiga, cache. Berkas baru sudah terunggah, tetapi peramban pengunjung masih menyimpan salinan lama. Kadang server juga menyimpan salinan di lapisan cache. Halamannya terlihat tidak berubah, dan Anda mengira penggantiannya gagal, padahal berkasnya sudah benar.
Tiga jalur penggantian
Ada tiga cara yang lazim, dan pilihannya bergantung pada siapa yang mengelola kode halaman.
Menimpa berkas lama dengan nama yang sama
Ini jalur paling sederhana: unggah berkas pengganti ke folder yang sama, dengan nama yang sama, lalu setujui penimpaan. Kode tidak perlu disentuh, dan semua tempat yang memakai gambar itu otomatis mendapat versi baru. Cocok kalau dimensi dan formatnya sudah sama.
Risikonya, berkas lama langsung hilang dari server. Kalau ternyata gambar baru salah pilih, Anda tidak punya salinan cadangan di sana. Simpan berkas lama di komputer sebelum menimpa.
Mengunggah nama baru lalu memperbarui kode
Jalur ini memberi keleluasaan untuk mengubah dimensi atau isi gambar, asalkan Anda bisa mengedit kode. Unggah berkas dengan nama baru, lalu cari semua pemanggilan nama lama dan ganti dengan nama baru. Nama baru juga menyelesaikan masalah cache, karena alamat berkasnya berbeda.
Cara menemukan semua pemanggilan: gunakan fitur pencarian di editor kode atau di pengelola berkas website. Kalau website Anda memakai sistem pengelola konten, nama berkas mungkin tersimpan di basis data, bukan di berkas kode. Periksa lewat antarmuka pengelola.
Lewat pengelola konten
Kalau website dikelola lewat sistem seperti WordPress, gambar biasanya diganti lewat pustaka media. Beberapa sistem memakai gambar yang sama di beberapa tempat, misalnya gambar unggulan artikel dan gambar kartu di halaman depan. Mengganti berkas di pustaka media memperbarui semuanya sekaligus.
Yang perlu diperiksa di jalur ini, ukuran turunan yang dibuat sistem. Sistem sering membuat beberapa versi ukuran dari satu gambar, dan versi lama bisa tetap dipakai di tempat tertentu. Bersihkan cache sistem setelah mengganti, dan periksa tampilan di setiap tempat gambar itu muncul.
Menyiapkan berkas pengganti sebelum diunggah
Siapkan penggantinya di komputer dulu, bukan langsung di server. Empat hal yang perlu dipastikan.
Dimensinya sama dengan gambar lama, atau setidaknya rasionya sama. Kalau ukuran tampil di halaman 1200x600, tidak ada gunanya mengunggah gambar 4000x2000; piksel berlebih hanya menambah berat. Sebaliknya, gambar yang lebih kecil dari ukuran tampil akan terlihat buram.
Formatnya sama, atau pilihan yang lebih aman. Kalau gambar lama JPG, penggantinya sebaiknya JPG juga. Mengganti JPG dengan PNG membuat ukuran berkas bertambah, dan belum tentu perlu. Perbedaan ketiganya dijelaskan di Perbedaan JPG PNG dan WebP.
Ukuran berkasnya sudah dikecilkan. Foto kamera dan ponsel biasanya jauh lebih besar daripada kebutuhan halaman. Kecilkan dimensinya dan turunkan mutunya lewat Kompres Foto, lalu periksa angka ukuran akhirnya sebelum diunduh. Untuk mengganti format, Konversi Format Gambar menangani enam pasangan dua arah antara JPG, PNG, dan WebP.
Nama berkasnya deskriptif dan tanpa spasi. Nama seperti banner-promo-januari.jpg lebih mudah dilacak daripada IMG_2381.jpg, terutama saat ada beberapa versi gambar di folder yang sama.
Menangani cache setelah penggantian
Kalau halaman masih menampilkan gambar lama, jangan buru-buru mengulang unggahan. Uji dulu di jendela penyamaran atau mode privat. Kalau di sana gambar baru muncul, masalahnya cache peramban, bukan berkas di server.
Peramban biasa menyimpan gambar lama cukup lama. Pemuatan ulang paksa, biasanya dengan menekan tombol muat ulang sambil menahan tombol Shift, memaksa peramban mengambil versi terbaru. Pengunjung lain tidak melakukan itu, jadi cara paling andal adalah mengganti nama berkas sehingga alamatnya berubah.
Kalau website memakai layanan penyebar konten atau CDN, ada cache di lapisan itu juga. Setiap layanan punya cara membersihkan cache sendiri, dan namanya berbeda-beda. Periksa dokumentasi layanan yang Anda pakai. Setelah cache dibersihkan, uji lagi halamannya.
Kalau gambar yang sama dipakai di banyak halaman
Gambar yang dipakai berulang, misalnya logo, ikon, atau gambar header, perlu perlakuan berbeda. Menggantinya dengan nama yang sama akan mengubah semua halaman sekaligus. Itu bisa menguntungkan, tetapi juga berisiko: satu gambar yang salah bisa merusak tampilan di banyak tempat.
Sebelum menimpa, telusuri dulu di mana saja gambar itu dipakai. Perhatikan juga konteks pemakaiannya. Logo yang dipasang di header dengan latar terang mungkin tidak cocok kalau ada halaman yang memakai latar gelap dan membutuhkan versi lain. Kalau ada beberapa konteks, siapkan versi terpisah dan ganti pemanggilannya satu per satu.
Daftar periksa setelah gambar terpasang
Buka halamannya dan periksa lima hal. Pertama, gambarnya muncul, bukan ikon berkas rusak. Kedua, ukurannya pas di tempatnya, tidak gepeng dan tidak terpotong aneh. Ketiga, tata letak di bawahnya tidak bergeser saat halaman dimuat. Keempat, halaman lain yang memakai gambar itu juga masih benar. Kelima, ukuran halamannya tidak melonjak; cara mengukurnya ada di Cara Menguji Kecepatan Gambar Website.
Periksa juga di layar kecil. Gambar lebar yang tidak dibatasi aturan tampilan bisa membuat halaman melebar dan muncul gulir mendatar. Cara membatasi ukuran gambar di halaman dijelaskan di Cara Menyesuaikan Gambar dengan CSS.
Kalau gambar baru akan dipakai untuk pratinjau tautan di media sosial, ada pemeriksaan tambahan. Gambar pratinjau punya jalur sendiri, dan platform biasanya menyimpan salinannya.
Kapan berkas lama sebaiknya tidak ditimpa
Kalau gambar lama masih dipakai di halaman lain dengan pemotongan berbeda, menimpanya bisa merusak halaman yang tidak sedang Anda kerjakan. Contohnya, satu foto produk dipakai utuh di halaman detail dan dipotong persegi di daftar katalog. Mengganti foto itu dengan versi yang komposisinya berbeda bisa membuat potongan di katalog jadi aneh.
Kalau berkas lama dijadikan rujukan desain, misalnya untuk membandingkan versi, simpan salinannya dulu. Menimpa berkas tanpa cadangan menghapus riwayat itu.
Kalau website Anda punya alur otomatis yang membuat ukuran turunan saat unggah, menimpa berkas lewat panel pengelola biasanya lebih aman daripada mengunggah lewat protokol berkas. Alur otomatis itu yang memastikan semua ukuran turunan ikut diperbarui.
Pertanyaan yang sering muncul
Kenapa gambar baru tidak muncul walau sudah diunggah? Kemungkinan besar cache. Uji di jendela penyamaran. Kalau di sana muncul, peramban Anda masih menyimpan versi lama. Kalau tetap tidak muncul, periksa nama berkas dan lokasinya di kode halaman.
Apakah aman menimpa berkas dengan nama yang sama? Aman selama dimensi dan formatnya sama, dan Anda menyimpan salinan berkas lama di komputer. Nama yang sama membuat semua pemanggilan otomatis memakai versi baru.
Bagaimana kalau gambar pengganti ukurannya lebih kecil? Hasilnya akan terlihat buram kalau ditampilkan lebih besar dari ukuran aslinya. Cari sumber beresolusi lebih tinggi, atau kecilkan ukuran tampilnya di halaman.
Apakah gambar yang sudah diganti perlu dikompres lagi? Kalau ukuran berkasnya sudah wajar untuk ukuran tampilnya, tidak perlu. Kalau foto berasal langsung dari kamera, kompres dulu sebelum diunggah.
Apakah mengganti gambar bisa menurunkan skor kecepatan halaman? Bisa, kalau penggantinya lebih berat daripada gambar lama. Uji halamannya sebelum dan sesudah, dan bandingkan di kondisi jaringan yang sama.
Mulai dari berkas penggantinya
Urutan yang paling sedikit menimbulkan masalah: siapkan berkas pengganti dengan dimensi dan format yang sesuai, kecilkan ukurannya lewat Kompres Foto, unggah dengan nama yang jelas, lalu periksa halamannya di jendela penyamaran. Kalau nama berkasnya berubah, perbarui semua pemanggilannya sebelum menutup pekerjaan. Kalau yang Anda ganti adalah gambar pratinjau tautan, ada pemeriksaan tambahan di Cara Menyiapkan Gambar Open Graph. Kumpulan pekerjaan sejenis ada di Gambar untuk Web.