Web Sitenizde Görseller Görüntülenmiyor: Nedenler, Çözümler ve En İyi Uygulamalar

Bozuk görseller kozmetik bir rahatsızlıktan çok daha fazlasıdır — kullanıcı güvenini sessizce yok eder, hemen çıkma oranlarını artırır ve arama motorlarına olumsuz sinyaller gönderir. İster bir WordPress blogu, ister bir e-ticaret mağazası, ister özel bir web uygulaması işletiyor olun, görsel yükleme hataları sitenizi profesyonellikten uzak gösterebilir ve gerçek trafik ile gelir kaybına yol açabilir.

İyi haber şu ki? Görsel görüntüleme sorunlarının büyük çoğunluğu, iyi bilinen az sayıda temel nedenden kaynaklanır ve bunların her biri düzeltilebilir. Bu kapsamlı kılavuz, görsellerin yüklenmemesinin tüm yaygın nedenlerini ele alır, her biri için uygulanabilir çözümler sunar ve modern bir Linux barındırma ortamında bu sorunların tekrarlanmasını nasıl önleyeceğinizi gösterir.

Bozuk Görseller Neden Ciddi Bir Sorundur

Düzeltmelere geçmeden önce, bozuk görsellerin tam etkisini anlamak faydalı olacaktır:

• SEO zararı: Arama motoru tarayıcıları görsel içeriği dizine ekler. Eksik görseller, eksik alt metin sinyalleri, bozuk yapılandırılmış veri ve düşük içerik kalitesi puanları anlamına gelir.
• Core Web Vitals: Görsel yükleme hataları, Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) metriklerini bozabilir — her ikisi de Google sıralamalarınızı doğrudan etkiler.
• Kullanıcı deneyimi: Bozuk bir görsel simgesi, sitenizdeki bir sorunun anında güven sarsıcı bir işaretidir.
• Dönüşüm oranları: E-ticaret sitelerinde yüklenemeyen ürün görselleri satışları doğrudan olumsuz etkileyebilir.

NVMe depolama ve root erişimine sahip, düzgün yapılandırılmış bir VPS Hosting ortamında barındırıyorsanız, bu sorunları hızlı ve kalıcı olarak teşhis edip çözmek için ihtiyacınız olan tüm araçlara sahipsiniz.

Görsellerin Görüntülenmemesinin En Yaygın 11 Nedeni (ve Her Birinin Çözümü)

1. Yanlış Dosya Yolu veya Bozuk Bağlantılar

Bu, web’deki bozuk görsellerin en sık görülen tek nedenidir. HTML’deki src özelliği veya CSS’deki url() değeri, hiçbir dosyanın bulunmadığı bir konuma işaret ediyorsa, tarayıcı görseli alamaz.

Nasıl görünür:

<!-- Broken: wrong directory -->
<img src="/img/photo.jpg" alt="Team photo">

<!-- Correct: actual file lives in /images/ -->
<img src="/images/photo.jpg" alt="Team photo">

Nasıl düzeltilir:

1. Tarayıcınızın Geliştirici Araçlarını açın (F12 tuşuna basın) ve Network sekmesine gidin.
2. “Img” ile filtreleyin ve sayfayı yenileyin. 404 Not Found durumu döndüren görsellerin yolu bozuktur.
3. HTML/CSS’deki yolu, bir FTP istemcisi (FileZilla gibi) veya barındırma kontrol panelinizin dosya yöneticisini kullanarak sunucunuzdaki gerçek dosya yapısıyla karşılaştırın.
4. Kodunuzdaki yolu düzeltin veya dosyayı beklenen konuma taşıyın.

Profesyonel ipucu: Mümkün olan her yerde göreli yollar (örn. ../images/photo.jpg) yerine kök göreli yollar (örn. /images/photo.jpg) kullanın. Kök göreli yollar, sayfanın dizin yapısındaki konumundan bağımsız olarak belirsizlik içermez.

2. Linux Sunucularında Büyük/Küçük Harf Duyarlılığı Sorunları

Bu, sitelerini Windows veya macOS (her ikisi de büyük/küçük harf duyarsız dosya sistemleri) üzerinde geliştiren ve ardından Linux sunucusuna (büyük/küçük harf duyarlı) dağıtan geliştiricilerin düştüğü bir tuzaktır.

Bir Linux sunucusunda:

Photo.jpg ve photo.jpg tamamen farklı iki dosyadır.
Gerçek dosya adı Photo.jpg ise, photo.jpg şeklindeki bir HTML referansı 404 döndürür.

Nasıl düzeltilir:

Bir adlandırma kuralı belirleyin ve buna sadık kalın. Sektör standardı tamamen küçük harf, boşluklar yerine kısa çizgi kullanmaktır (örn. team-photo.jpg).
Mevcut dosyalarınızı SSH kullanarak denetleyin:

  find /var/www/html/images -name "*.jpg" | sort

Referanslarıyla eşleşmeyen dosyaları yeniden adlandırın. Linux’ta şunu kullanın:

  mv Photo.jpg photo.jpg

WordPress kullanıyorsanız, Medya Kitaplığı dosya adlarını yüklendiği şekilde saklar — bu nedenle düzeltilmiş adlarla yeniden yüklemek en temiz çözümdür.

3. Eksik veya Silinmiş Görsel Dosyaları
Bazen görseller basitçe mevcut değildir — hiç yüklenmemiş, yanlışlıkla silinmiş veya sunucu geçişi sırasında kaybolmuş olabilirler.
Nasıl teşhis edilir:
SSH aracılığıyla dosyanın var olup olmadığını kontrol edin:
ls -la /var/www/html/images/photo.jpg
Ya da beklenen dizine gitmek için kontrol panelinizin dosya yöneticisini kullanın.
Nasıl düzeltilir:

Eksik görseli FTP, SFTP veya barındırma kontrol paneliniz aracılığıyla yeniden yükleyin.
Görsel silindiyse ve yerel bir kopyanız yoksa, sunucu yedeklerinizi kontrol edin. Otomatik yedeklemeli iyi yapılandırılmış bir VPS Hosting planı bu senaryoda hayat kurtarıcı olabilir.
WordPress siteleri için, görselin hâlâ wp-content/uploads/ içinde var olup olmadığını kontrol edin ve gerekirse Regenerate Thumbnails eklentisini kullanarak küçük resimleri yeniden oluşturun.

4. Yanlış Dosya İzinleri
Linux dosya izinleri, hangi kullanıcıların ve işlemlerin dosyaları okuyabileceğini, yazabileceğini veya çalıştırabileceğini kontrol eder. Bir görsel dosyasının izinleri çok kısıtlayıcıysa, web sunucusu (genellikle www-data veya nginx olarak çalışır) dosyayı okuyup sunamaz.
Doğru izin ayarları:




Kaynak
Önerilen İzin




Dosyalar
644 (sahip: okuma/yazma; grup ve diğerleri: okuma)


Dizinler
755 (sahip: okuma/yazma/çalıştırma; grup ve diğerleri: okuma/çalıştırma)




SSH aracılığıyla izinleri kontrol etme ve düzeltme:
# Check current permissions
ls -la /var/www/html/images/

# Fix file permissions recursively
find /var/www/html/images/ -type f -exec chmod 644 {} ;

# Fix directory permissions recursively
find /var/www/html/images/ -type d -exec chmod 755 {} ;
FTP aracılığıyla düzeltme:
FTP istemcinizde dosya veya klasöre sağ tıklayın, Dosya İzinleri‘ni seçin ve sayısal değeri girin (dosyalar için 644, dizinler için 755).
Uyarı: Görsel dosyalarını asla 777 olarak ayarlamayın. Bu, herkese yazma erişimi verir ve önemli bir güvenlik açığıdır.
5. Desteklenmeyen veya Uyumsuz Görsel Formatları
Tüm görsel formatları tüm tarayıcılar ve cihazlar tarafından evrensel olarak desteklenmez. Yaygın uyumluluk sorunları şunlardır:




Format
Sorun




WebP
Çok eski tarayıcılarda desteklenmez (IE, eski Safari)


AVIF
Eski tarayıcı sürümlerinde sınırlı destek


TIFF
Genellikle web tarayıcılarında desteklenmez


SVG
Bazı eski ortamlarda görüntüleme sorunları yaşanabilir


HEIC
Çoğu tarayıcıda yerel olarak desteklenmez




Nasıl düzeltilir:

Fotoğraflar için JPEG, şeffaflık gerektiren görseller için PNG ve JPEG/PNG geri dönüşüyle birlikte modern, yüksek verimli bir alternatif olarak WebP kullanın.
Modern formatları zarif geri dönüşlerle sunmak için HTML <picture> öğesini uygulayın:

  <picture>
    <source srcset="/images/photo.webp" type="image/webp">
    <source srcset="/images/photo.jpg" type="image/jpeg">
    <img src="/images/photo.jpg" alt="Descriptive alt text">
  </picture>

Görselleri ImageMagick (sunucunuzda mevcut), Squoosh veya GIMP gibi araçlarla dönüştürün.

6. Harici Görselleri Engelleyen Hotlink Koruması
Siteniz üçüncü taraf bir sunucuda barındırılan görsellere başvuruyorsa (“hotlinking” olarak bilinen bu uygulama), o sunucunun hotlink koruması isteklerinizi engelliyor olabilir. Bu, bant genişliği hırsızlığını önleyen yaygın ve meşru bir güvenlik önlemidir.
Nasıl tanımlanır:
HTML’deki görsel URL’si farklı bir alana işaret eder (örn. https://anotherdomain.com/images/photo.jpg). Görsel, o alana doğrudan gittiğinizde düzgün yüklenir ancak sitenizde bozuk bir simge veya yer tutucu görsel gösterir.
Nasıl düzeltilir:
Tek güvenilir çözüm, görsellerinizi kendi sunucunuzda barındırmaktır:

Görseli yerel makinenize indirin.
Kendi sunucunuzun görsel dizinine yükleyin.
HTML’deki src özelliğini kendi barındırdığınız kopyaya işaret edecek şekilde güncelleyin.

Bu aynı zamanda sitenizin güvenilirliğini de artırır — artık üçüncü tarafın çalışma süresine veya politikalarına bağımlı değilsiniz.
7. Tarayıcı Önbelleği Sorunları
Tarayıcılar, performansı artırmak için görseller gibi statik varlıkları agresif biçimde önbelleğe alır. Ancak bu durum şu hallerde sorunlara yol açabilir:

Sunucudaki bir görsel güncellenmiş olsa da tarayıcı hâlâ eski önbelleğe alınmış sürümü sunar.
Bir sayfanın önbelleğe alınmış sürümü, artık var olmayan bir görsel yoluna başvurur.

Son kullanıcılar için nasıl düzeltilir:
Kullanıcılara zorla yenileme yapmasını söyleyin:

Windows/Linux: Ctrl + Shift + R veya Ctrl + F5

Sunucu düzeyinde nasıl düzeltilir (önbellek kırma):

İçerik değiştiğinde tarayıcıların bunları yeni varlıklar olarak ele alması için görsel URL’lerine sürüm sorgu dizesi ekleyin:

<img src="/images/banner.jpg?v=2" alt="Banner">

Ya da web sunucusu yapılandırmanızda uygun Cache-Control başlıklarını ayarlayın. Nginx için:

location ~* .(jpg|jpeg|png|gif|webp|svg)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

8. Yavaş Sunucu Yanıtı veya Bağlantı Sorunları

Sunucunuz aşırı yüklüyse, yüksek gecikme yaşıyorsa veya kullanıcının yavaş ya da kararsız bir internet bağlantısı varsa, görseller yüklenmeden önce zaman aşımına uğrayabilir — bozuk görünebilir veya hiç görüntülenmeyebilir.

Sunucu tarafı sorunları nasıl teşhis edilir:

# Check server load
top
htop

# Check disk I/O
iostat -x 1

# Check active connections
ss -s

Nasıl düzeltilir:

• Görsellerinizi optimize edin: Yüklemeden önce görselleri sıkıştırın. TinyPNG, ImageOptim ve jpegoptim komut satırı aracı gibi araçlar, görünür kalite kaybını en aza indirerek dosya boyutlarını %50–80 oranında azaltabilir.
• Lazy loading uygulayın: Ekranın altındaki görsellerin yalnızca kullanıcı oraya kaydırdığında yüklenmesi için yerel loading="lazy" özelliğini kullanın:

  <img src="/images/photo.jpg" alt="Description" loading="lazy">

• CDN kullanın: İçerik Dağıtım Ağı, görsellerinizi küresel uç sunuculara dağıtarak kaynak sunucunuzdan uzaktaki kullanıcılar için gecikmeyi önemli ölçüde azaltır.
• Barındırmanızı yükseltin: Sunucunuz sürekli aşırı yükleniyorsa, daha güçlü bir plana geçme zamanı gelmiş olabilir. Dedicated Servers, yüksek trafikli siteler için maksimum kaynak ve tutarlı performans sunar.

9. CSS’deki Yanlış Görsel URL’leri

CSS’de tanımlanan arka plan görselleri, özellikle CSS dosyaları genellikle alt dizinlerde bulunduğundan (örn. /css/style.css) göreli yolların çözümlenme biçimini etkilediği için sık görülen bozuk görsel sorunlarının kaynağıdır.

Yaygın hata:

/* CSS file is at /css/style.css */
/* This looks for /css/images/background.jpg — probably wrong */
.hero {
    background-image: url('images/background.jpg');
}

Doğru yaklaşım — kök göreli yollar kullanın:

/* This always resolves from the site root, regardless of CSS file location */
.hero {
    background-image: url('/images/background.jpg');
}

CSS arka plan görsellerini nasıl hata ayıklarsınız:

1. Geliştirici Araçlarını açın (F12).
2. Eksik arka plana sahip öğeyi seçin.
3. Styles panelinde background-image URL’sinin üzerine gelin — tarayıcı kaynağın bulunup bulunmadığını veya hata döndürüp döndürmediğini gösterecektir.

10. Karma İçerik (HTTPS Sitelerinde HTTP Görselleri)

Web siteniz HTTPS üzerinden sunuluyorsa ancak görsellerinizden herhangi biri http:// URL’leri kullanılarak başvuruluyorsa, modern tarayıcılar bu görselleri “karma içerik” olarak engelleyecektir — bu, ortadaki adam saldırılarını önlemek için alınan bir güvenlik önlemidir.

Konsolda nasıl görünür:

Mixed Content: The page at 'https://yoursite.com' was loaded over HTTPS,
but requested an insecure image 'http://yoursite.com/images/photo.jpg'.
This content should also be served over HTTPS.

Nasıl düzeltilir:

1. Tüm görsel URL’lerini http:// yerine https:// kullanacak şekilde güncelleyin.
2. WordPress siteleri için, veritabanındaki tüm http://yourdomain.com örneklerini https://yourdomain.com ile bulmak ve değiştirmek üzere Better Search Replace eklentisini kullanın.
3. Güvenlik ağı olarak <head> bölümünüze aşağıdakini ekleyin (bu, tüm HTTP isteklerini otomatik olarak HTTPS’ye yükseltir):

   <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

1. Geçerli bir SSL sertifikasının yüklü olduğundan emin olun. Henüz yapmadıysanız, SSL Certificates her modern web sitesi için zorunludur ve hem kullanıcılarınızı hem de SEO sıralamalarınızı korur.

11. CDN Yapılandırma Sorunları

Görselleri sunmak için bir İçerik Dağıtım Ağı kullanıyorsanız, yanlış yapılandırma veya CDN kesintisi, kaynak sunucunuz tamamen sağlıklı olsa bile görsellerin küresel ölçekte başarısız olmasına neden olabilir.

CDN sorunları nasıl teşhis edilir:

• Sitenize doğrudan IP adresi üzerinden erişerek veya DNS ayarlarınızda CDN’yi devre dışı bırakarak CDN’yi geçici olarak atlayın.
• CDN atlandığında görseller düzgün yükleniyorsa, sorun CDN’ye özgüdür.
• Bildirilen olaylar için CDN sağlayıcınızın durum sayfasını kontrol edin.

Nasıl düzeltilir:

• CDN önbelleğini temizleyin — silinen veya taşınan görsellerin eski önbelleğe alınmış sürümleri CDN uç düğümlerinde kalıcı olabilir.
• CDN kaynak ayarlarını doğrulayın — CDN’nin doğru kaynak sunucuya ve porta işaret ettiğinden emin olun.
• CDN URL yeniden yazma kurallarını kontrol edin — bazı CDN yapılandırmaları, görsel URL’lerini yolları bozan şekillerde yeniden yazar.
• Sorun devam ediyorsa, araştırma yaparken CDN’yi geçici olarak devre dışı bırakmayı ve görselleri doğrudan kaynak sunucunuzdan sunmayı düşünün.

Adım Adım Sorun Giderme İş Akışı

Bozuk görsellerle karşılaştığınızda, bu sistematik teşhis sürecini izleyin:

Adım 1: Tarayıcı Geliştirici Araçlarını Açın

F12 tuşuna basın (veya sağ tıklayın → İncele) ve Network sekmesine gidin. Img ile filtreleyin. Sayfayı yenileyin ve 404, 403 veya 5xx durum kodları döndüren görselleri arayın.

Adım 2: Görsel URL’sini Doğrudan Test Edin

src özelliğinden görsel URL’sini kopyalayın ve doğrudan tarayıcınızın adres çubuğuna yapıştırın. Bu, dosyanın o yolda erişilebilir olup olmadığını anında söyler.

Adım 3: Sunucu Tarafındaki Dosyayı Kontrol Edin

Sunucunuza SSH ile bağlanın ve dosyanın var olduğunu, doğru izinlere sahip olduğunu ve beklenen konumda bulunduğunu doğrulayın:

ls -la /var/www/html/images/
stat /var/www/html/images/photo.jpg

Adım 4: Protokolü Doğrulayın

Sitenizde SSL etkinse, görsel URL’sinin http:// değil https:// kullandığından emin olun.

Adım 5: Birden Fazla Tarayıcıda Test Edin

Sayfayı Chrome, Firefox, Safari ve Edge’de açın. Görsel bazı tarayıcılarda yüklenip diğerlerinde yüklenmiyorsa, sorun büyük olasılıkla format uyumluluğu veya tarayıcıya özgü bir önbellek sorunudur.

Adım 6: CMS veya Eklenti Çakışmalarını Kontrol Edin

WordPress veya başka bir CMS kullanıyorsanız, görsel dağıtımına müdahale edebilecek olanları belirlemek için eklentileri tek tek devre dışı bırakın. Varsayılan bir temaya geçmek (örn. Twenty Twenty-Four) de temaya özgü sorunları izole etmeye yardımcı olabilir.

Adım 7: Sunucu Hata Günlüklerini İnceleyin

Web sunucunuzun hata günlüğünde ilgili girişleri kontrol edin:

# Nginx
tail -n 100 /var/log/nginx/error.log | grep -i "image|photo|jpg|png"

# Apache
tail -n 100 /var/log/apache2/error.log | grep -i "image|photo|jpg|png"

Gelecekteki Görsel Sorunlarını Önlemek İçin En İyi Uygulamalar

Bozuk görselleri reaktif olarak düzeltmek sinir bozucudur. Bu sorunların baştan önlenmesini sağlayan bir iş akışı oluşturmanın yolu şöyledir:

Güvenilir Görsel Dağıtımı İçin Doğru Barındırmayı Seçmek

Barındırma altyapınızın kalitesi, görsel dağıtım performansı ve güvenilirliğinde önemli bir rol oynar. Göz önünde bulundurulması gereken temel faktörler:

• Depolama türü: NVMe SSD’ler, geleneksel HDD’lere veya SATA SSD’lere kıyasla çok daha hızlı okuma hızları sunar; bu da görsel dosyalarının ne kadar hızlı sunulduğunu doğrudan etkiler.
• Sunucu kaynakları: Yeterli CPU ve RAM, sunucunuzun eş zamanlı görsel isteklerini kısıtlama olmadan karşılayabilmesini sağlar.
• Çalışma süresi garantileri: %99,9+ çalışma süresiyle güvenilir bir barındırıcı, görsellerinizin her zaman erişilebilir olduğu anlamına gelir.
• Root erişimi: VPS üzerinde tam root erişimi, web sunucusu ayarlarını, dosya izinlerini ve önbellek başlıklarını tam olarak ihtiyaç duyduğunuz şekilde yapılandırmanıza olanak tanır.

Önemli görsel kitaplıklarına sahip büyüyen web siteleri için VPS Hosting, performans, kontrol ve maliyet verimliliği arasında ideal dengeyi sunar. Yüksek trafikli siteler veya fotoğraf portföyleri ya da büyük e-ticaret platformları gibi görsel yoğun uygulamalar için Dedicated Servers, paylaşılmamış kaynaklar ve maksimum verim sağlar.

Birden fazla web sitesi yönetiyorsanız veya dosya yönetimi için kullanıcı dostu bir arayüz tercih ediyorsanız, cPanel’li Shared Web Hosting size sezgisel bir dosya yöneticisi, tek tıkla görsel yükleme ve basit izin kontrolleri sunar — daha küçük siteler için mükemmel bir başlangıç noktasıdır.

Sonuç

Bozuk görseller, bir web sitesinin yaşayabileceği en görünür ve zararlı sorunlardan biridir; ancak aynı zamanda en düzeltilebilir olanlar arasındadır. Temel nedenler — yanlış yollar, izin hataları, büyük/küçük harf duyarlılığı uyuşmazlıkları, karma içerik, format uyumsuzlukları ve CDN yanlış yapılandırmaları — hepsinin açık ve yerleşik çözümleri vardır.

Önemli olan sistematik bir yaklaşımdır: hatayı belirlemek için tarayıcınızın Geliştirici Araçlarını kullanın, yukarıda özetlenen teşhis adımlarını kullanarak temel nedenine kadar izleyin, uygun düzeltmeyi uygulayın ve ardından tekrar yaşanmasını önlemek için önleyici uygulamaları hayata geçirin.

İyi yapılandırılmış bir barındırma ortamı, uygun dosya organizasyonu, tutarlı adlandırma kuralları ve geçerli bir SSL sertifikasıyla görselleriniz her kullanıcı için, her cihazda, her seferinde güvenilir, hızlı ve doğru şekilde yüklenecektir.