Jika Anda memiliki situs web tempat Anda sering menambahkan konten, ada kemungkinan seiring waktu, beberapa gambar situs web Anda akan hilang. Posting ini akan membantu Anda menangani gambar yang hilang untuk menghindari dampak negatif terhadap pengalaman pengguna situs Anda
Mengapa gambar bisa hilang di situs web Anda?
- Ada kemungkinan gambar dihapus dari lokasi aslinya
- Seiring waktu, gambar mungkin telah diganti namanya atau dipindahkan ke lokasi lain
- Gambar juga dapat rusak, sehingga tidak dapat ditampilkan dengan benar di browser
- Mereka mungkin mengalami perubahan dalam izin. misalnya, menonton mungkin dibatasi untuk sejumlah atau kategori pengguna tertentu
Gambar hilang di #WordPress #situs web Anda?
Klik Untuk Menge-Tweet
Jika salah satu dari hal tersebut terjadi, pengunjung akan menemui masalah setiap kali mereka mencoba melihat konten yang berisi gambar yang hilang
Untuk membantu mengurangi konsekuensi negatif dari gambar yang rusak, saya akan membagikan 4 cara berbeda untuk menangani gambar yang hilang di situs web Anda dengan lebih baik
Seperti apa gambar yang hilang di browser web
Contoh gambar yang hilang di Chrome (di sebelah kanan)
Meskipun setiap browser menangani hal-hal yang sedikit berbeda, browser umumnya menampilkan beberapa jenis ikon gambar yang rusak
Selain terlihat buruk secara umum, gambar yang rusak ini juga dapat mengacaukan tata letak halaman Anda karena ikon gambar yang rusak biasanya lebih kecil dari gambar asli Anda
Jika gambar yang hilang adalah latar belakang suatu elemen, struktur halaman tidak boleh diubah. Namun, gambar latar belakang yang hilang dapat menyebabkan berkurangnya kontras atau visibilitas teks latar depan dan elemen lainnya, sehingga menyebabkan ketidaknyamanan bagi pengunjung dan mengganggu aksesibilitas situs web Anda
Empat cara untuk menangani gambar yang hilang di situs web Anda dengan lebih baik
Meskipun Anda mungkin tidak pernah bermaksud memasukkan gambar yang hilang ke dalam konten situs web Anda, hal itu hampir pasti akan terjadi di beberapa titik karena alasan yang tercantum di atas.
Untuk membantu mengurangi konsekuensi negatif dari kejadian itu, ada beberapa strategi berbeda yang dapat Anda terapkan, yang akan saya bahas di bawah
1. Gunakan atribut alt dan title di tag <img>
Satu masalah besar dengan gambar yang hilang adalah bahwa pembaca tidak tahu apa yang seharusnya dikomunikasikan oleh gambar yang hilang tersebut, yang dapat menyebabkan masalah dengan pemahaman di situs Anda. Perbaikan sederhana untuk ini adalah dengan memanfaatkan atribut gambar untuk teks alt dan judul
Teks alt gambar memiliki dua fungsi utama
- Ini ditampilkan jika gambar hilang (seperti contoh yang ditunjukkan di atas) atau jika browser pengguna diatur untuk tidak menampilkan gambar
- Jika seseorang memiliki gangguan penglihatan dan menggunakan pembaca layar, pembaca layar akan membacakan teks alt dengan lantang
Jadi meskipun pengunjung tidak dapat melihat gambar Anda, mereka masih dapat mengetahui dengan tepat apa yang dimaksud dengan komunikasi jika Anda menggunakan teks alt deskriptif
Selain menambahkan teks alt gambar, Anda juga harus memasukkan teks yang relevan di atribut title. Jika seseorang mengarahkan kursor ke gambar, browser mereka akan menampilkan teks di dalam atribut title di tooltip. Dalam kebanyakan kasus, kedua atribut ini akan memiliki konten tekstual yang sama
Untuk menambah atau mengedit atribut judul dan teks alt gambar di WordPress, Anda dapat menggunakan sidebar Detail Lampiran di Perpustakaan Media WordPress
2. Gunakan atribut onerror di tag <img>
Selain menambahkan teks, hal lain yang mungkin ingin Anda lakukan adalah menampilkan gambar placeholder jika ada gambar yang hilang. Untuk melakukannya, Anda dapat menggunakan solusi satu baris yang dapat Anda terapkan dalam HTML untuk gambar Anda dengan atribut onerror
Jika gambar asli tidak dapat diakses dan menimbulkan kesalahan, kode dalam atributonerror mengubah tag <!-- Specifying the default image to be displayed in the URL --> <img src="//ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" /> 2 gambar dengan lokasi gambar default
Metode ini hanya berfungsi untuk gambar biasa di konten Anda dan tidak akan berfungsi untuk gambar latar belakang
Jika Anda menggunakan WordPress, Anda harus menambahkan atribut onerror secara manual menggunakan fungsi pengeditan kode dari editor WordPress
- Editor klasik – gunakan tab Teks
- Blokir editor (AKA Gutenberg) – gunakan tarik-turun di kanan atas untuk mengakses Editor Kode
Untuk menggunakan kode ini, ganti <!-- Specifying the default image to be displayed in the URL --> <img src="//ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" /> _4 dengan tautan ke gambar aktual yang ingin Anda gunakan (e. g. gambar placeholder default)
3. Gunakan layanan pihak ketiga
Beberapa layanan pengoptimalan gambar memiliki opsi untuk menayangkan gambar default jika ada gambar yang hilang
Misalnya, ImageKit memiliki solusi sederhana untuk menyajikan gambar default jika gambar aslinya tidak ada. Ini sangat mirip dengan metode atribut onerror dari atas
Dengan ImageKit, parameter <!-- Specifying the default image to be displayed in the URL --> <img src="//ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" /> _6 memungkinkan Anda menentukan gambar placeholder yang akan dikirimkan jika gambar asli tidak tersedia
Namun, tidak seperti atribut onerror_, Anda akan menambahkan parameter <!-- Specifying the default image to be displayed in the URL --> <img src="//ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" /> 6 langsung ke gambar <!-- Specifying the default image to be displayed in the URL --> <img src="//ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" /> 9. Inilah tampilannya
<!-- Specifying the default image to be displayed in the URL --> <img src="//ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" /> _Seperti atribut onerror , ini tidak akan berfungsi untuk gambar latar belakang
Layanan pihak ketiga juga dapat membantu Anda mencegah hilangnya gambar dengan membantu Anda mengirimkan gambar dengan lebih andal. Misalnya, plugin pengoptimalan gambar WordPress Optimole menyajikan gambar melalui jaringan pengiriman konten (CDN) miliknya sendiri, yang mungkin lebih andal daripada server hosting Anda
4. Sajikan gambar default melalui server Anda untuk gambar yang hilang
Mari kita lihat solusi yang berpotensi mengganti gambar apa pun dengan gambar default menggunakan situs Anda. file htaccess
Metode ini hanya akan berfungsi jika Anda menghosting dan menayangkan gambar dari server Anda sendiri (artinya, Anda tidak menggunakan layanan pengoptimalan gambar pihak ketiga yang menyajikan gambar untuk Anda)
Metode ini sedikit lebih maju, jadi kami tidak menyarankan melakukan ini kecuali Anda memiliki pengetahuan teknis
Pada dasarnya, Anda perlu
- Buat file RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC] RewriteRule .* /default-image.jpg [L] _1 di direktori root server web Anda, jika belum ada
- Periksa permintaan gambar, yang biasanya diakhiri dengan ekstensi file gambar (Anda dapat menambahkan lebih banyak ekstensi jika diperlukan)
- Sajikan gambar default jika file yang diminta tidak ada
⚠️ Setiap kali Anda mengedit file htaccess situs Anda, Anda harus selalu membuat cadangan terlebih dahulu
Berikut adalah contoh cuplikan kode yang harus Anda tambahkan ke file RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC] RewriteRule .* /default-image.jpg [L] 1 Anda. Ganti RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC] RewriteRule .* /default-image.jpg [L] _3 dengan URL sebenarnya ke gambar placeholder yang ingin Anda gunakan
RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC] RewriteRule .* /default-image.jpg [L]Jika Anda tidak yakin cara mengedit file RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC] RewriteRule .* /default-image.jpg [L] 1 Anda, Anda dapat mengikuti langkah-langkah dalam panduan kami tentang cara mencegah hotlinking gambar
Pikiran terakhir
Meskipun Anda tidak pernah berencana untuk kehilangan gambar di situs Anda, hal itu masih dapat terjadi karena berbagai alasan. Empat pendekatan di atas dapat membantu memastikan pengunjung situs Anda tetap mendapatkan pengalaman yang baik meskipun mereka menemukan gambar yang hilang
Apa pun yang terjadi, Anda harus selalu menambahkan teks alt gambar dan judul. Selain memastikan ada teks fallback, ini juga membuat situs Anda lebih mudah diakses oleh pengunjung tunanetra, yang dengan sendirinya merupakan hal yang baik
Kemudian, Anda juga dapat mempertimbangkan untuk menggunakan atribut onerror untuk menentukan gambar fallback. Beberapa layanan pengoptimalan gambar pihak ketiga – seperti ImageKit – juga memungkinkan Anda menentukan gambar cadangan dengan cara serupa
Atau, jika Anda merasa nyaman mengedit file RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC] RewriteRule .* /default-image.jpg [L] 1 situs Anda, Anda dapat menentukan gambar placeholder global untuk gambar yang hilang di tingkat server. Sekali lagi, kami tidak merekomendasikan metode ini untuk menyelesaikan pemula
Di luar metode khusus ini, Anda juga harus mengikuti beberapa praktik terbaik untuk meminimalkan kemungkinan pengunjung menemukan gambar yang hilang. Praktik terbaik seperti…
- Memeriksa posting Anda secara teratur dan membersihkan gambar yang tidak ada
- Memeriksa apakah Anda memindahkan gambar atau kumpulan gambar ke lokasi lain di server Anda
- Menggunakan jalur relatif ke gambar di server Anda
- Memeriksa apakah server web memiliki izin yang tepat untuk melihat gambar
Apakah Anda memiliki pertanyaan lain tentang cara memperbaiki gambar yang hilang di situs web Anda?