Sitede Resimler Gözükmüyor Sorunu [Çözüm]

Normalde sorunsuz şekilde çalışan internet sitesinde resimler gözükmüyor, bu sorunu nasıl düzeltebilirim diyorsanız doğru adrestesiniz! Bu yazı acil bir kuvvet gibi dertlerinizin dermanı olacak! Bu yazıda hem girdiğiniz internet sitelerinde görünmeyen resimler ile ilgili hem de kendi internet sitenizdeki kırık görsellerle ilgili özel çözüm önerilerinden bahsedeceğiz.

Öncelikle eğer başka internet sitelerinde girip görselleri görüntüleyemeyen bir kullanıcı iseniz bu sorunun sebepleri ve çözüm yolları şunlardır:
✅ Önbellek sorunları (Temizleyin!)
✅ Tarayıcı uyumsuzluğu (Değiştirin!)
✅ Yavaş internet bağlantısı (Hızlandırın!)
✅ Siteyle alakalı sorunlar (Sonra tekrar deneyin!)
(Ayrıca Bakınız: Yavaş İnterneti Hızlandırma Yolları [Çözüm])

Evet, gezinmek için girdiğiniz size ait olmayan internet sitelerinde görünmeyen görsellerle ilgili problemleri çözmek bu kadar basit! 🙂 Fakat eğer bu internet sitesi size aitse sorunu çözmek için yazının devamında detaylıca açıklanmış olan teknik çözüm yollarını uygulamanız gerekecek.

Sitemde Resimler Gözükmüyor Sorununun Çözümü

1- Üçüncü Taraf Sitelerden Resim Yüklemeyin

İnternet sitenizdeki bütün resimler değil de sadece belli başlı bir kaç görsel görünmüyorsa bu sorunun sebebi resimlerin doğrudan sunucuya yüklenmemesi olabilir. Zira Wordpress başta olmak üzere pek çok site alt yapısı size başka sitelerden tıpkı şu görseldeki gibi resim kullanabilmenize olanak sağlar:

Fakat bu özelliği kullanmak gerçekten saçmadır. Hem sitenizi yavaşlatır, hem de o siteler kapanınca veya o sitelerdeki içerikler silinince otomatik olarak sizin sitedeki resimlerin de görünmemesine sebep olur. Bu sebeple;

• Doğrudan sunucuya yüklenen resimler kullanılmalıdır. Bu aynı zamanda bir çeşit kullanıcı deneyimi önerisidir.
• Başka sitelerden yüklenen resimler için linklerde büyük küçük harf vb. yazım hatalarına dikkat edilmelidir.
(Ayrıca Bakınız: Kullanıcı Deneyimi (UX) Nedir? Nasıl Geliştirilir?)

2- Dosya Yolları İle İlgili Problemleri Çözün

HTML kaynak kodundaki dosya yolları ile ilgili problemler de “sitemde resimler görünmüyor” sorununa sebep olabilir. Bu sebeple HTML kaynak kodunda resimlerle ilgili bölümde HREF özelliğinin (resim kaynak uzantısının) doğru olup olmadığı kontrol edilmelidir.

Bu kontrolü yaparken dosya yolunun büyük / küçük harfe duyarlı olduğu unutulmamalıdır. Benzer bir şekilde aynı görsellerin farklı formatlarının olması ama “.htaccess” dosyasının yanlış bir şekilde yapılandırılması sonucunda yanlış formatın çağrılması da bu soruna sebep olabilir.

Örnek: Orijinal resim dosyasının adı “resim.jpg” olmasına karşılık kaynak kodunda “Resim.jpg” veya “resim.png” şeklinde bir bağlantı varsa resim hatalı kodlamadan ötürü görüntülenemez.

<!-- HTML Hatalı Dosya Yolu Örnekleri-->
<img src="../../../TechnoGezgin/images/ornek_resim.jpg">
<img src="/images/ornek_resım.jpg">
<!-- 1.sinde Mantık Hatası 2.sinde Karakter Hatası Var-->

<!-- HTML Doğru Dosya Yolu Örnekleri-->
<img src="https://technogezgin.com/images/ornek_resim.jpg">
<img src="images/ornek_resim.jpg">

Resimlerin doğru konumda olmaması yani başka bir ifadeyle resimlerin doğru konumdan çağrılmaması da bu soruna sebep olmaktadır. Sunucu değişikliğindeki dosya taşımaları sonrasında da bu sorun görülebilmektedir. Hatta toptan yönetim panelindeki bütün resimler tıpkı aşağıdaki görseldeki gibi kırılabilmektedir:

3- Eklenti ve Ayar Uyumsuzluklarını Düzeltin

İnternet siteleri hem sunduklarını kullanıcı deneyimlerini geliştirmek hem de sitelerini teknik açıdan geliştirmek (hız, fonksiyonellik, tasarım vb.) için ek eklentiler, modüller, ayarlar ve optimizasyonlar kullanırlar. Fakat bunlar bazen görsellerle, CSS, JavaScript ve HTML dosyaları ilgili ayarları bozarak görüntü bozukluğuna yol açabilir.

✅ CSS ve JavaScript dosyalarının gecikmeli yüklenmesi, lazy load (tembel yükleme) gibi görsel optimizasyon özelliklerinin kullanılması kısa süreli görüntü bozukluğuna sebep olabilir.
(Ayrıca Bakınız: Lazy Load Nedir? Ne İşe Yarar?)

✅ Sitedeki kurulu olan eklentiler teker teker devre dışı bırakılıp hangi eklentinin soruna sebep olduğuna karar verilebilir.
✅ Site hızlandırma amacıyla yapılan CSS & JavaScript & HTML optimizasyonları bazı temalarda görüntü bozulmaları meydana gelebilir.

4- Yedekleme Ve Format Özelliklerinden Faydalanın

Uzmanlar olası sorunlara, tehditlere ve buglara karşı düzenli olarak yedekleme yapılmasını önermektedir. Benzer bir şekilde sitede kod düzenlemesi, eklenti konfigürasyonu, tasarım değişikliği, tema değişikliği, yazılım güncellemeleri gibi çeşitli düzenlemeler yapılmadan önce ve sonra da bu tarz sorunlarla karşılaşmamak için yedek alınmalıdır.

Bütün çabalara rağmen ‘HTML resimler gözükmüyor‘ sorununun kaynağını bulamadıysanız ve bu sorun ile karşılaşmadan önce oluşturulmuş olan bir yedek dosyası varsa, son çare olarak bu yedeği tekrar yükleyerek sorundan kurtulmayı düşünebilirsiniz. Veyahut site, tema ve görseller ile ilgili bütün kurulumları sıfırdan yapmak da diğer bir çözümdür. Ama bu seçeneği en son seçenek olarak düşününüz.

5- CSS Kodlarındaki Hataları Ayıklayın

İnternet sitelerindeki stil ayarlamaları genellikle CSS ile yapılmaktadır. Bazı ender durumlarda CSS dosyalarında yapılan değişiklikler ve dosyalardaki olası bozulmalar da “sitemde resimler gözükmüyor” sorununa sebep olmaktadır.
(Ayrıca Bakınız: CSS Nedir? Nerelerde Kullanılır?)

Örnek: İlgili bir görsel veyahut belli bir alandaki bütün görseller için “opacity” değerinin düşük bir değerde olması resimlerin kalitesini düşürür. Benzer bir şekilde opaklık ile ilgili değerin 0 olması tıpkı aşağıdaki görseldeki gibi “sitemde fotoğraflar görünmüyor” sorununa sebep olabilir:

Elbette ki bu konudaki örnekler çoğaltılabilir, zira CSS tasarım dili bünyesinde görsellerle ilgili onlarca özellik barındırmaktadır. Fakat bu konudaki sorunları tespit etmek ve çözmek için CSS tasarım dili ve hata ayıklama (debugging) konusunda bilgi sahibi olmak gerekir.
(Ayrıca Bakınız: Bug Nedir? Debugging Nasıl Yapılır? [Rehber])

6- Tarayıcı Önbelleğini Temizleyin

İnternet tarayıcınızda bir sayfa açtığınızda sayfadaki her şeyin bir kopyası bilgisayarınızda önbellek denen bir yerde saklanır. Aynı sayfaya bir daha girmeye kalktığınızda, internet tarayıcınız sayfada değişiklik olmadığını düşündüğü zaman o eski bilgileri kullanır. Sayfadaki resimleri, yazıları vb. tekrar indirmeye çalışmaz. Bu durum bazı çakışma anlarında “sitemde resimler gözükmüyor” sorununa sebep olabilir.

Sorunun tarayıcı önbelleği ile alakalı olup olmadığını basit bir yöntemle, kolaylıkla anlayabilirsiniz. İnternet tarayıcısının geliştirici konsolunda; farenin imlecini kırık resimlerin URL’lerine getirip 1-2 saniye bekleyince tıpkı aşağıdaki görseldeki gibi resimlerin bir ön izlemesi oluşuyorsa sorun yüksek ihtimalle önbellek çakışmasından kaynaklanıyor demektir:

Örneğin WordPress tabanlı internet sitelerinde bazı tema güncellemeleri veya bazı eklenti güncellemeleri sonrasında bir çeşit çakışma nedeniyle meşhur “Wordpress resimler gözükmüyor” sorunu görülebilmekte ve genellikle tarayıcı ve sunucu önbelleği temizlendikten sonra bu sorun kendiliğinden çözülmektedir.

Bu sebeple gerek sorunun tarayıcı önbelleğinizden kaynaklanıp kaynaklanmadığını test etmek, gerek de sorunu çözüp çözmediğinizden emin olmak için internet tarayıcı uygulamanızın önbelleğini temizleyin. Yoksa yüksek ihtimalle web sitenizi her seferinde aynı durumda (bozuk durumda) göreceksiniz.
(Ayrıca Bakınız: Tarayıcı Önbelleği Nedir? Nasıl Kullanılır?)