Pelajari mengapa gambar tidak ditampilkan di situs web Anda dan cara memperbaikinya
Pepatah lama mengatakan bahwa "sebuah gambar bernilai seribu kata." Hal ini terutama benar di Web, di mana rentang perhatian terkenal pendek dan sehingga gambar yang tepat dapat benar-benar membuat atau menghancurkan situs dengan menarik perhatian yang benar dan menarik pengunjung laman cukup lama bagi mereka untuk mempelajari apa yang perlu mereka pelajari atau melakukan spesifik tindakan yang menandakan "kemenangan" untuk situs tersebut. Ya, ketika datang ke situs web, gambar sebenarnya bisa bernilai lebih dari seribu kata!
Jadi dengan pentingnya gambar online dibuat, mari kita selanjutnya mempertimbangkan apa yang dikatakan situs web Anda jika gambar yang seharusnya ada di situs gagal dimuat? Ini dapat terjadi jika Anda memiliki gambar sebaris yang merupakan bagian dari gambar HTML atau latar belakang yang diterapkan dengan CSS (dan situs Anda mungkin memiliki keduanya). Intinya adalah ketika sebuah gambar gagal dimuat pada halaman, itu membuat desain terlihat rusak dan, dalam beberapa kasus, dapat sepenuhnya menghancurkan pengalaman pengguna di situs itu. "Seribu kata" yang dikirimkan oleh gambar tentu bukan yang positif!
Mari kita lihat beberapa alasan umum mengapa gambar akan gagal dimuat di situs, serta apa yang harus Anda perhatikan ketika memecahkan masalah ini selama pengujian situs web .
Jalur File yang Salah
Saat Anda menambahkan gambar ke file HTML atau CSS situs , Anda harus membuat jalur ke lokasi di struktur direktori tempat file tersebut berada. Ini adalah kode yang memberi tahu browser di mana mencari dan mengambil gambar dari. Dalam kebanyakan kasus, ini akan berada di dalam folder bernama 'gambar.' Jika jalur ke folder ini dan file di dalamnya salah, gambar tidak akan dimuat dengan baik karena browser tidak akan dapat mengambil file yang benar. Ini akan mengikuti jalur yang Anda suruh, tetapi itu akan mencapai jalan buntu dan, alih-alih menampilkan gambar yang sesuai, akan muncul kosong.
Langkah 1 dalam men-debug masalah pemuatan gambar adalah memastikan bahwa jalur file yang Anda beri kode sudah benar. Mungkin Anda mencantumkan direktori yang salah atau tidak mencantumkan jalur dengan benar ke direktori itu. Jika ini tidak terjadi, Anda mungkin memiliki masalah lain dengan jalur itu. Baca terus!
Nama File Salah eja
Saat Anda memeriksa jalur file untuk file Anda, pastikan juga bahwa Anda mengeja nama gambar dengan benar. Dalam pengalaman kami, nama yang salah atau salah ejaan adalah penyebab paling umum dari masalah pemuatan gambar. Ingat, peramban web sangat tidak memaafkan ketika menyangkut nama file. Jika Anda lupa huruf karena kesalahan atau menggunakan huruf yang salah, browser tidak akan mencari file yang mirip dan berkata, "oh, Anda mungkin bermaksud yang ini, kan?" Tidak - jika file salah dieja, meskipun sudah dekat, file tidak akan dimuat di halaman.
Ekstensi File Salah
Dalam beberapa kasus, Anda mungkin memiliki nama file yang dieja dengan benar, tetapi ekstensi file mungkin salah. Jika gambar Anda adalah file .jpg , tetapi HTML Anda mencari .png, akan ada masalah. Pastikan Anda menggunakan jenis file yang benar untuk setiap gambar dan kemudian pastikan Anda telah memanggil ekstensi yang sama di kode situs web Anda.
Juga mencari sensitivitas huruf. Jika file Anda diakhiri dengan .JPG, dengan semua huruf di topi, tetapi referensi kode Anda. Jpg, semua huruf kecil, ada server web tertentu yang akan melihat keduanya berbeda, meskipun mereka adalah kumpulan huruf yang sama. Jumlah kepekaan huruf besar! Inilah sebabnya mengapa kami selalu menyimpan file kami dengan semua huruf kecil. Melakukannya memungkinkan kita untuk selalu menggunakan huruf kecil dalam kode kita, menghilangkan satu kemungkinan masalah yang kita bisa miliki dengan file gambar kita.
File Tidak Ada
Jika jalur ke file gambar Anda benar, dan nama serta ekstensi file juga bebas kesalahan, item berikutnya yang harus diperiksa adalah memastikan bahwa file benar-benar telah diunggah ke server web. Mengabaikan pengunggahan file ke server saat situs diluncurkan adalah kesalahan umum yang mudah diabaikan.
Bagaimana Anda memperbaiki masalah ini? Unggah gambar tersebut, segarkan laman web Anda, dan harus segera menampilkan file seperti yang diharapkan. Anda juga dapat mencoba menghapus gambar di server dan mengunggahnya kembali. Mungkin terlihat aneh, tetapi kita telah melihat pekerjaan ini lebih dari sekali. Terkadang file menjadi rusak, sehingga metode "hapus dan ganti" ini dapat membantu.
Situs Web Hosting Images Is Down
Anda biasanya ingin menghosting gambar apa pun yang digunakan situs Anda di server Anda sendiri, tetapi dalam beberapa kasus, Anda mungkin menggunakan gambar yang dihosting di tempat lain. Jika situs hosting gambar itu turun, gambar Anda tidak akan memuat baik.
Masalah Transfer
Apakah file gambar dimuat dari domain eksternal atau dari Anda sendiri, selalu ada kemungkinan bahwa mungkin ada masalah transfer untuk file itu ketika pertama kali diminta oleh browser. Ini seharusnya tidak menjadi kejadian umum (jika ya, Anda mungkin perlu mencari penyedia hosting baru ), tetapi itu dapat terjadi dari waktu ke waktu.
Sisi yang tidak menguntungkan dari masalah ini adalah bahwa tidak ada yang benar-benar dapat Anda lakukan karena ini adalah masalah di luar kendali Anda. Kabar baiknya adalah bahwa ini adalah masalah sementara yang sering diselesaikan dengan sangat cepat. Misalnya, ketika seseorang melihat halaman yang tampak rusak dan menyegarkannya, itu saja akan sering memperbaiki masalah dan memuat gambar dengan benar. Jika Anda melihat gambar rusak, segarkan peramban untuk melihat apakah mungkin itu hanya masalah transmisi pada permintaan awal Anda.
A Sedikit Catatan Akhir
Saat memikirkan tentang gambar dan masalah pemuatan, dua hal yang juga harus diperhatikan adalah penggunaan yang tepat dari tag ALT dan kecepatan situs web Anda dan kinerja keseluruhan.
ALT, atau "teks alternatif", tag adalah apa yang ditampilkan oleh browser jika gambar gagal dimuat. Mereka juga merupakan komponen penting dalam membuat situs web diakses yang dapat digunakan oleh orang-orang dengan cacat tertentu. Setiap gambar inline di situs Anda harus memiliki tag ALT yang sesuai. Perhatikan bahwa gambar yang diterapkan dengan CSS tidak memiliki atribut ini.
Untuk performa situs web, memuat terlalu banyak gambar, atau bahkan hanya beberapa gambar raksasa yang tidak dioptimalkan dengan benar untuk pengiriman web , akan berdampak negatif pada kecepatan pemuatan. Untuk alasan ini, pastikan untuk menguji dampak dari setiap gambar yang Anda gunakan dalam desain situs Anda dan ambil langkah apa pun yang diperlukan untuk meningkatkan kinerja situs tersebut sambil tetap menciptakan tampilan dan nuansa keseluruhan yang sesuai untuk proyek situs web Anda.