Website Bisa Tampil, Tapi Gambar Tidak Tampil

Setelah Anda mengunggah file website ke hosting atau server, kemudian mencoba membukanya di web browser, semuanya tampil dengan baik kecuali satu masalah, yaitu gambar tidak tampil. Halaman hanya menampilkan kotak kosong di tempat seharusnya gambar berada. Pengalaman ini pasti membuat frustrasi, terutama jika Anda sudah yakin sudah mengunggah file gambar dengan benar.

Masalah ini sebenarnya sangat umum terjadi pada website baru yang baru dipindahkan ke hosting, atau saat mengubah konfigurasi website. Berdasarkan pengalaman tim support teknis Rumahweb yang telah menangani ribuan kasus serupa, masalah gambar tidak tampil biasanya disebabkan oleh beberapa faktor teknis yang mudah diatasi.

Pada artikel ini, kami akan membahas secara detail penyebab dan solusi untuk mengatasi masalah ini.

Mengapa Gambar Tidak Tampil Padahal Website Bisa Diakses?

Sebelum masuk ke solusi, penting untuk memahami alasan di balik masalah ini. Ketika Anda mengakses website, browser menjalankan perintah HTML yang memberi tahu browser di mana letak file gambar. Jika browser tidak menemukan file di lokasi yang ditunjuk, maka gambar tidak akan ditampilkan, meskipun website itu sendiri bisa diakses dengan baik.

Perbedaan antara website yang tampil tapi gambar tidak adalah karena file HTML dapat ditampilkan tanpa bergantung pada file gambar, sementara file gambar memerlukan path referensi yang tepat. Jadi, jika path atau lokasi gambar salah, hanya gambar yang tidak akan muncul, bukan seluruh website.

Penyebab Umum Gambar Tidak Tampil dan Solusinya

Ada beberapa penyebab utama mengapa gambar tidak tampil di website Anda. Kami akan membahas masing-masing dengan penjelasan teknis dan solusi langsung yang bisa Anda implementasikan.

1. Penamaan File Gambar Tidak Sesuai (Case Sensitive)

Sistem operasi Linux, yang digunakan oleh semua server Rumahweb dan sebagian besar hosting profesional, menganggap huruf besar dan huruf kecil sebagai karakter yang berbeda. Ini disebut “case sensitive“. Berbeda dengan Windows, yang tidak membedakan antara huruf besar dan kecil dalam nama file.

Misalkan Anda memiliki file gambar bernama logo.jpg. Jika di kode HTML Anda menulis:

<img src="Logo.jpg" alt="Logo Perusahaan" />

atau

<img src="logo.JPG" alt="Logo Perusahaan" />

Maka gambar tidak akan tampil, karena server Linux menganggap Logo.jpg, logo.jpg, dan logo.JPG sebagai tiga file yang berbeda. File yang benar-benar ada adalah logo.jpg (huruf kecil), sementara browser mencari Logo.jpg atau logo.JPG.

Solusinya, anda bisa melakukan hal berikut ini:

1. Standardisasi penamaan file: Gunakan huruf kecil untuk semua nama file gambar. Contohnya: logo.jpg, banner-produk.png, icon-facebook.svg.
2. Periksa kode HTML Anda: Pastikan path gambar dalam tag <img> persis sama dengan nama file, termasuk huruf besar dan kecilnya.
3. Gunakan tools untuk memeriksa: Jika Anda menggunakan WordPress, install plugin seperti Broken Link Checker untuk menemukan gambar yang path-nya salah.

Berikut adalah contoh kode yang benar.

<!-- File asli: logo.jpg (huruf kecil) -->
<img src="images/logo.jpg" alt="Logo Perusahaan" />

<!-- Pastikan path dan nama file persis sama -->
<img src="images/logo.jpg" alt="Logo Perusahaan" />  <!-- Benar -->
<img src="images/Logo.jpg" alt="Logo Perusahaan" />  <!-- Salah -->

2. Lokasi Direktori Gambar Tidak Benar

Path adalah alamat atau lokasi file dalam struktur folder server Anda. Path yang salah adalah salah satu penyebab paling umum gambar tidak tampil. Sebagai contoh, jika gambar tersimpan di folder assets/images/, tetapi HTML mencari di folder images/ saja, browser tidak akan menemukan file tersebut.

Berikut adalah cara mengecek lokasi directory gambar pada website:

1. Gunakan FTP Client: Akses server Anda menggunakan aplikasi FTP seperti FileZilla atau WinSCP. Lihat struktur folder dan catat lokasi folder tempat gambar disimpan.
2. Bandingkan dengan path HTML: Buka file HTML atau template website Anda, dan bandingkan path gambar dalam tag <img> dengan lokasi sebenarnya di server.

Berikut adalah contoh struktur folder yang umum digunakan:

Jika file index.html ingin memanggil gambar logo.jpg, path yang benar adalah:

<img src="assets/images/logo.jpg" alt="Logo" />

Panduan Path Relatif vs Absolut:

• Path Relatif (lebih direkomendasikan): assets/images/logo.jpg path dihitung dari lokasi file HTML saat ini.
• Path Absolut: /assets/images/logo.jpg path dihitung dari root folder website.

Gunakan path relatif karena lebih fleksibel saat website dipindahkan ke server lain.

3. Permission File Tidak Sesuai

Permission atau izin akses file adalah konfigurasi keamanan yang menentukan siapa yang dapat membaca, menulis, atau menjalankan file. Server Linux menggunakan sistem permission tiga digit: 644 untuk file dan 755 untuk folder. Jika permission tidak sesuai, browser mungkin tidak dapat mengakses file gambar.

Permission yang Tepat:

• File gambar: Permission 644
• Folder tempat gambar: Permission 755

Anda bisa mempelajari cara mengubah permission di cPanel melalui artikel berikut: chmod

Untuk memverifikasi permission yang Anda gunakan benar atau salah, akses gambar langsung di browser dengan mengetik URL lengkap:

https://namadomain.com/assets/images/logo.jpg

Jika gambar terbuka dengan baik di browser, berarti permission sudah benar. Jika muncul error “403 Forbidden”, berarti permission perlu diperbaiki.

4. Format File Gambar Tidak Didukung atau File Corrupt

Masalah gambar tidak tampil selanjutnya bisa disebabkan karena file gambar tidak diduukung atau file gambar corrupt. Browser modern mendukung berbagai format gambar seperti:

• JPEG (.jpg, .jpeg) untuk foto dan gambar kompleks
• PNG (.png) untuk grafis dan transparansi
• GIF (.gif) untuk animasi sederhana
• WebP (.webp) yaitu format modern untuk kompresi lebih baik
• SVG (.svg) untuk grafis vektor

Jika Anda menggunakan format yang tidak umum atau usang, browser mungkin tidak bisa menampilkannya.

Berikut adalah cara memverifikasi file apakah benar atau perlu diperbaiki:

1. Periksa ukuran file: Jika file gambar sangat kecil (kurang dari 1 KB), kemungkinan file corrupt atau tidak terupload dengan benar. Download kembali dari server dan buka dengan image viewer lokal.
2. Ubah format file: Jika Anda menduga file corrupt, coba ubah format. Contohnya, jika logo.jpg tidak tampil, coba konversi ke logo.png dan update HTML Anda.

Anda bisa menggunakan tools online untuk mengecek, seperti menggunakan TinyPNG atau ImageOptimizer untuk mengecek apakah file gambar valid.

5. Menggunakan Script PHP untuk Menampilkan Gambar

Beberapa website menggunakan script PHP untuk menampilkan gambar secara dinamis, misalnya untuk proteksi hak cipta atau fungsi khusus lainnya. Jika Anda menggunakan pendekatan ini, pastikan script PHP bekerja dengan benar.

Salah satu masalah yang sering terjadi adalah penggunaan fungsi readfile() yang mungkin di-disable oleh server untuk alasan keamanan. Fungsi ini memungkinkan pembacaan file secara langsung dan dapat menimbulkan risiko keamanan jika tidak dikelola dengan baik.

Jika Anda menggunakan readfile() dan gambar tidak tampil, ubah fungsi tersebut menjadi file_get_contents(), yang lebih aman dan biasanya tidak di-disable. Namun, jika anda tetap ingin menggunakan readfile(), maka Anda bisa menghubungi support hosting Anda untuk dibantu diaktifkan fungsinya. Di Rumahweb, Anda bisa mengajukan permohonan enable function readfile() melalui tiket di Clientzone.

6. URL Dasar Website Berubah (Base URL Issue)

Base URL adalah URL utama website Anda, misalnya https://namadomain.com/ atau https://namadomain.com/blog/. Jika website Anda dipindahkan ke subdomain, subdirektori, atau domain baru, path gambar yang sebelumnya bekerja bisa tiba-tiba tidak berfungsi.

Contoh Kasus:

Misalkan website Anda awalnya berada di:

• https://namadomain.com/website/

Kemudian dipindahkan ke:

• https://www.namadomain.com/ (domain dengan www)
• https://namadomain.com/ (tanpa subdirektori)

Jika Anda menggunakan path absolut dalam HTML, gambar tidak akan muncul karena path sudah tidak valid.

Contoh Path Absolut yang Bermasalah:

<!-- Jika website awalnya di namadomain.com/website/ -->
<img src="/website/images/logo.jpg" alt="Logo" />

<!-- Setelah dipindahkan ke namadomain.com/, path di atas jadi salah -->
<!-- Browser mencari di namadomain.com/website/images/ yang tidak ada lagi --

Solusi:

1. Gunakan Path Relatif: Ubah semua path absolut menjadi path relatif. Path relatif akan terus bekerja tidak peduli website dipindahkan ke mana.

<!-- Path Relatif (Lebih Fleksibel) -->
<img src="images/logo.jpg" alt="Logo" />

2. Untuk CMS (WordPress, Joomla, dll): Gunakan fungsi bawaan untuk menghasilkan path yang benar.

<!-- Jangan hardcode path -->
<img src="/wp-content/uploads/2024/logo.jpg" alt="Logo" />

<!-- Gunakan fungsi WordPress -->
<img src="<?php echo wp_get_attachment_url(123); ?>" alt="Logo" />

3. Untuk Website Statis, pertimbangkan menggunakan base tag di <head> untuk konsistensi. Berikut contohnya:

<head>
    <base href="https://namadomain.com/">
</head>

7. Header HTTP Content-Type Salah atau Hilang

Ketika browser menerima file gambar dari server, server harus memberitahu browser jenis file apa yang dikirim melalui HTTP header Content-Type. Jika header ini salah atau hilang, browser mungkin tidak mengenali file sebagai gambar dan tidak akan menampilkannya.

Contoh kasusnya sebagai berikut:

Jika server mengirim file logo.jpg dengan header Content-Type: text/plain (menganggapnya sebagai teks), browser akan mencoba menampilkan gambar sebagai teks, yang hasilnya hanya kode binary yang tidak terbaca.

Solusi di PHP:

Pastikan Anda menetapkan header yang benar sebelum mengirim file gambar:

<?php
// Tentukan tipe file
$imageType = mime_content_type('path/to/image.jpg'); // Atau gunakan finfo

// Set header yang benar
header('Content-Type: ' . $imageType);

// Kirim file
file_get_contents('path/to/image.jpg');
?>

Solusi untuk Server Web (Apache/Nginx):

Server sudah dilengkapi dengan konfigurasi otomatis untuk mengenali tipe file berdasarkan ekstensi. Namun, jika masalah tetap ada, cek file .htaccess (untuk Apache):

<IfModule mod_mime.c>
    AddType image/jpeg .jpg .jpeg
    AddType image/png .png
    AddType image/gif .gif
    AddType image/webp .webp
    AddType image/svg+xml .svg
</IfModule>

8. Firewall atau Security Policy Memblokir Akses

Beberapa hosting atau CDN memiliki firewall tingkat lanjut yang dapat memblokir akses ke file tertentu berdasarkan kriteria keamanan. Ini bisa terjadi jika:

• File gambar dikategorikan sebagai “suspicious” berdasarkan ukuran, tipe, atau nama file.
• Request berasal dari IP yang di-blacklist.
• Konfigurasi WAF (Web Application Firewall) terlalu ketat.

Berikut adalah cara untuk mengecek, apakah firewall di server Anda memblokir gambar atau tidak.

1. Cek Logs Server: Akses error log di cPanel atau file manager
   • Lokasi: /public_html/error_log atau /var/log/apache2/error.log
   • Cari error messages terkait gambar (403 Forbidden, 406 Not Acceptable)
     
2. Test dengan Browser Berbeda/Inkognito:
   • Buka website di incognito window atau dengan VPN
   • Jika gambar muncul, kemungkinan IP Anda di-blacklist

Solusi:

• Whitelist IP Anda: Jika IP Anda di-blacklist, minta support untuk memasukkan IP ke whitelist
• Relax WAF Rules: Hubungi support untuk menyesuaikan tingkat keamanan WAF (hati-hati dengan implikasi keamanan)
• Rename File: Jika nama file terlihat “suspicious“, coba rename dengan nama yang lebih umum

9. Gambar di-Load dari URL Eksternal yang Tidak Accessible

Beberapa website menggunakan URL eksternal untuk gambar, misalnya dari CDN, image hosting, atau server terpisah:

<img src="https://cdn.example.com/images/logo.jpg" alt="Logo" />

Jika URL eksternal tidak accessible atau server gambar down, gambar tidak akan tampil.

Penyebab Umum:

• Server penyedia gambar offline atau bermasalah
• Bandwidth CDN habis
• Akses dari IP tertentu di-block oleh penyedia
• CORS (Cross-Origin Resource Sharing) tidak dikonfigurasi dengan benar

Cara Mengecek:

1. Copy URL gambar langsung ke browser
2. Jika tidak muncul, berarti server eksternal bermasalah
3. Coba ping server untuk verifikasi: ping cdn.example.com

Solusi:

1. Gunakan CDN yang Reliable: Gunakan CDN terkenal dengan uptime tinggi (Cloudflare, AWS CloudFront, Google Cloud CDN)
   
2. Setup Fallback Image: Jika gambar eksternal gagal, tampilkan placeholder atau gambar backup:

<img src="https://cdn.example.com/images/logo.jpg" 
     alt="Logo"
     onerror="this.src='images/logo-backup.jpg';" />

3. Self-host Gambar: Lebih baik menyimpan gambar di server Anda sendiri untuk kontrol penuh:

<!-- Dari eksternal (tidak reliable) -->
<img src="https://cdn-lain.com/images/logo.jpg" alt="Logo" />

<!-- Self-hosted di Rumahweb (reliable) -->
<img src="assets/images/logo.jpg" alt="Logo" />

10. Encoding URL Gambar Salah

URL harus mengikuti standar tertentu dan tidak boleh mengandung karakter khusus yang tidak dikodekan dengan benar. Jika nama file gambar mengandung spasi, aksen, atau karakter khusus tanpa encoding, browser mungkin tidak dapat membaca path dengan benar.

Contoh Masalah:

# contoh yang tidak baik
<!-- Nama file dengan spasi (tidak di-encode) -->
<img src="images/banner terbaru.jpg" alt="Banner" />
<!-- Browser membaca sebagai: banner%20terbaru.jpg (spasi menjadi %20) -->

# contoh yang baik
<!-- Nama file sudah di-encode atau tanpa spasi --> contoh benar
<img src="images/banner-terbaru.jpg" alt="Banner" />
<!-- Atau -->
<img src="images/banner%20terbaru.jpg" alt="Banner" />

Solusi:

1. Gunakan Penamaan yang Standar: Hindari spasi, aksen, dan karakter khusus. Gunakan dash (-) atau underscore (_) sebagai pemisah.

# contoh yang kurang sesuai
banner terbaru.jpg > ada spasi
banner-kami (2024).jpg > ada spasi
logö-perusahaan.jpg > ada huruf ö 

# contoh yang disarankan
banner-terbaru.jpg
banner-kami-2024.jpg
logo-perusahaan.jpg

2. Untuk Nama File Existing: Gunakan URL encoding atau rename file ke format yang valid.

<?php
// Encode nama file untuk URL
$filename = 'banner terbaru.jpg';
$encoded = urlencode($filename); // banner%20terbaru.jpg
echo '<img src="images/' . $encoded . '" alt="Banner" />';
?>

3. Konfigurasi Server: Jika menggunakan Apache, pastikan setting di .htaccess mengizinkan karakter spasi (tidak disarankan untuk alasan keamanan).

Troubleshooting Sistematis

Apabila gambar tidak tampil setelah membaca penyebab di atas, ikuti langkah-langkah berikut secara berurutan:

Langkah 1: Periksa HTML Source Code

1. Buka website di browser
2. Klik kanan dan pilih “Inspect” atau “View Page Source”
3. Cari tag <img> yang gambarnya tidak tampil
4. Catat path gambar yang ditunjuk (atribut src)

Contoh:

<img src="images/logo.jpg" alt="Logo" />

Langkah 2: Verifikasi Path Gambar di Server

1. Akses server melalui FTP Client (FileZilla)
2. Navigasi ke folder yang disebutkan di path HTML (misalnya: images/)
3. Cek apakah file gambar benar-benar ada di sana
4. Jika ada, lanjut ke Langkah 3

Jika file tidak ada:

• Upload file gambar ke folder yang benar
• Pastikan nama file persis sama dengan yang ditulis di HTML

Langkah 3: Periksa Case Sensitivity Penamaan File

1. Lihat nama file di server (misalnya: logo.jpg)
2. Bandingkan dengan path di HTML (misalnya: Logo.jpg)
3. Pastikan huruf besar dan kecil sama persis

Jika berbeda:

• Ubah nama file di HTML agar sesuai dengan nama file di server, ATAU
• Rename file di server agar sesuai dengan HTML (gunakan FTP Client)

Langkah 4: Verifikasi Permission File

1. Klik kanan file gambar di FTP Client
2. Pilih “File Permissions“
3. Pastikan file memiliki permission 644
4. Pastikan folder gambar memiliki permission 755

Jika berbeda:

• Ubah permission sesuai standar

Langkah 5: Akses Gambar Langsung di Browser

1. Di address bar browser, ketik URL lengkap gambar:
   https://namadomain.com/images/logo.jpg
2. Tekan Enter

Hasil yang Diharapkan:

• Gambar terbuka langsung di browser (berarti file OK dan permission benar)

Jika muncul error:

• Error 404: File tidak ada atau path salah
• Error 403: Permission file tidak sesuai
• Jika muncul error lainnya, Anda dapat menghubungi support teknis

Langkah 6: Clear Browser Cache

Terkadang browser menyimpan versi lama website di cache. Coba:

1. Buka DevTools (F12)
2. Klik kanan tombol refresh
3. Pilih “Empty Cache and Hard Refresh”
4. Atau gunakan shortcut: Ctrl + Shift + R (Windows) atau Cmd + Shift + R (Mac)

Tips Pencegahan untuk Masa Depan

Untuk menghindari masalah gambar tidak tampil di kemudian hari, terapkan beberapa praktik terbaik:

1. Gunakan Penamaan File yang Konsisten

• Selalu gunakan huruf kecil untuk nama file.
• Gunakan underscore atau dash untuk spasi (contoh: banner_produk.jpg, bukan banner produk.jpg).
• Hindari karakter khusus atau spasi.

2. Struktur Folder yang Rapi

Organisir aset website Anda dengan struktur folder yang konsisten:

3. Dokumentasi Path Gambar

Buat catatan atau spreadsheet yang berisi:

• Nama gambar
• Lokasi folder di server
• Lokasi penggunaan di website
• Ukuran file

4. Gunakan CDN untuk Optimasi

Pertimbangkan menggunakan CDN (Content Delivery Network) untuk menyimpan gambar. Ini membuat website lebih cepat dan reliable. Rumahweb menawarkan integrasi CDN yang mudah untuk klien hosting.

5. Backup Reguler

Selalu lakukan backup website Anda secara berkala. Jika file gambar corrupt atau hilang, Anda bisa memulihkannya dari backup.

BACA JUGA : 5 Plugin Backup WordPress Terbaik yang dapat Anda Gunakan

Kesimpulan

Masalah gambar tidak tampil di website, padahal website bisa diakses, biasanya disebabkan oleh faktor-faktor teknis yang sederhana seperti penamaan file case sensitive, path direktori yang salah, permission file yang tidak sesuai, atau issue dengan script PHP.

Dengan mengikuti langkah-langkah troubleshooting sistematis yang kami jelaskan di atas, Anda seharusnya dapat mengidentifikasi dan mengatasi masalah dengan cepat.

Poin-poin penting untuk diingat:

• Case Sensitive: Server Linux membedakan huruf besar dan kecil, selalu gunakan huruf kecil
• Path yang Benar: Pastikan lokasi file di server sesuai dengan path di HTML
• Permission File: File gambar harus memiliki permission 644 dan folder 755
• Format File: Gunakan format gambar yang umum didukung (JPEG, PNG, WebP)
• Script PHP: Gunakan file_get_contents() daripada readfile()

Dengan menerapkan praktik terbaik seperti penamaan file yang konsisten, struktur folder yang rapi, dan backup reguler, Anda dapat mencegah masalah ini terjadi di masa depan. Semoga artikel ini bermanfaat dan website Anda kembali menampilkan gambar dengan sempurna!

Demikian artikel kami tentang cara untuk memperbaiki gambar tidak tampil pada website, semoga bermanfaat.