Bagaimana Anda menangani gambar dalam html?

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

<img src="original-image.jpg"
   onerror="this.onerror=null;this.src='default-image.jpg';"
>

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="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

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="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

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="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

Namun, tidak seperti atribut onerror_, Anda akan menambahkan parameter

<!-- Specifying the default image to be displayed in the URL -->
<img src="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

<!-- Specifying the default image to be displayed in the URL -->
<img src="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

<!-- Specifying the default image to be displayed in the URL -->
<img src="https://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]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC]
RewriteRule .* /default-image.jpg [L]

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]

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]

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?

Bagaimana Anda mengelola gambar dalam HTML?

Ringkasan Bab .

Use the HTML element to define an image..

Gunakan atribut src HTML untuk menentukan URL gambar

Gunakan atribut alt HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan

Apa cara yang benar untuk menandai gambar dalam HTML?

Kita harus menggunakan tag tag di dalam tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag . Tag

Bagaimana Anda menangani kesalahan gambar tidak ditemukan?