Web Sitemde Görsel Neden Görünmüyor? Nasıl Düzeltilir?

Bozuk görsel simgesi, boş bir alan ve hiç kaybolmayan yer tutucu farklı ipuçları verir. Dosya eksik olabilir, tarayıcı dosyayı görüntüleyemeyebilir veya sayfa başarıyla yüklenmiş bir görseli gizliyor olabilir.

Sorunlu tek bir görselle başlayın. İlk kontroller için site düzenleyicisi ve tarayıcı yeterlidir. Site yöneticilerine yönelik isteğe bağlı bölüm, istekleri, HTML ve CSS’yi ve tarayıcının güvenlik mesajlarını ele alır.

Görsel sayfanızda görünüyor ancak arama sonuçlarında çıkmıyorsa Google Görseller rehberini kullanın. Sonunda görünüyor ama çok geç yükleniyorsa yavaş görsel yükleme sorununu inceleyin.

1. Yayımlanan sayfadan başlayın

Düzenleyici önizlemesi yerine herkese açık sayfayı açın. Düzenleyicide görselin seçildiğini, değişikliğin kaydedildiğini ve sayfanın yayımlandığını doğrulayın. Hangi görsellerin etkilendiğini ve sorunun dosya yükleme, tasarım değişikliği ya da site taşıma işleminden sonra başlayıp başlamadığını not edin.

Herkese açık sayfayı bir gizli pencerede de deneyin. Farklı bir sonuç yararlı bir ipucudur; ancak oturum durumu, kayıtlı veriler ve eklentiler pencereler arasında değişebilir.

2. Görsel adresini bulup deneyin

Eksik görsele veya bozuk görsel simgesine sağ tıklayıp Resmi yeni sekmede aç ya da Resim adresini kopyala seçeneğini arayın. Arka plan görsellerinde veya boş yer tutucularda bu seçenekler bulunmayabilir.

Görseli düzenleyicide seçip medya ayrıntılarını da açabilirsiniz. Ek sayfasının veya bulut paylaşım sayfasının adresini değil, dosyanın URL’sini kopyalayın. Paylaşım sayfası görseli bir indirme arayüzünde gösterebilir ya da oturum açmanızı isteyebilir.

Herkese açık sayfa küçük resim, mobil kırpma veya ayrı bir görsel dağıtım hizmetindeki kopyayı kullanıyor olabilir. Yalnızca medya kitaplığındaki aslına ulaşabiliyorsanız bunu başlangıç noktası olarak alın. Network kontrolü, sayfanın hangi sürümü istediğini belirler.

Görsel adresini oturum açmadan gizli bir pencerede açın ve sonraki adımı seçin:

• Görsel açılıyor: sayfadaki görünürlük kontrollerine geçin. Bunlarda neden bulunmazsa sayfanın gerçek isteğini inceleyin.
• Hata, oturum açma sayfası veya erişim uyarısı çıkıyor: dosya konumu ve erişim bölümüne geçin.
• Sorun yalnızca telefonda yaşanıyor: asıl dosya açılsa bile mobil sürümler ve yükleme bölümüne geçin.
• Tarayıcı dosyayı indiriyor: yanıt üst bilgilerini kontrol edin. İndirme ayarları bu davranışı açıklayabilir; ancak görselin sayfa içinde çalışıp çalışmadığını tek başına göstermez.

Yeni sekmede başarılı bir test, dosyanın o bağlamda görüntülenebildiğini doğrular. Sayfa yine de başka bir sürümü istiyor veya gömme kısıtlamasına takılıyor olabilir.

3. Dosyayı geri getirin veya erişimi düzeltin

Dosya eksikse ya da adres yanlışsa

1. Doğru görseli medya kitaplığında bulun. Dosya adresini çalışmayan adresle karşılaştırın. Alan adını, klasörü, dosya adını, uzantıyı ve büyük-küçük harfleri kontrol edin. Bazı sunucular Photo.JPG ile photo.jpg arasında ayrım yapar.
2. Etkilenen görsel bloğundaki veya bileşendeki bozuk seçimi değiştirin. Mevcut çalışan dosyayı seçin, kaydedin ve yayımlayın. Asıl dosya silindiyse önce güvenilir bir yedek yükleyin.
3. Herkese açık sayfayı yeniden açın. Artık çalışan bir görsele başvurduğunu kontrol edin. Hâlâ eksik küçük resmi istiyorsa aşağıdaki oluşturulmuş boyut kontrolünü izleyin.

Site taşıma işleminden sonra dosya adının yanı sıra görselin barındırıldığı sunucuyu da karşılaştırın. Sayfa hâlâ eski alan adına veya yükleme klasörüne başvuruyor olabilir. Elle yazılmış yollar için teknik kontrolleri kullanın.

Asıl dosya çalışıyor ama küçük resim eksikse

Dosyayı yeniden yüklemek, hâlâ eksik sürümü belirten sayfayı mutlaka düzeltmez. Siteyi yöneten kişiye çalışan asıl dosyanın ve çalışmayan küçük resmin URL’lerini verin. Eksik boyutu yeniden oluşturmasını ve ona başvuran görsel listelerini güncellemesini isteyin. Network paneli başarısız URL’yi ve durumunu gösterir.

Örneğin: “Asıl görsel açılıyor ama bu sayfa 404 döndüren küçük bir sürüm istiyor. Lütfen bu boyutu geri getirin ve sayfanın duyarlı görsel başvurularını kontrol edin.” Böylece platformun görsel oluşturma araçlarını bilmeden yapılması gereken düzeltmeyi tarif edebilirsiniz.

Erişim reddediliyorsa veya oturum açmak gerekiyorsa

Önce görselin herkese açık olup olmaması gerektiğini belirleyin. Herkese açık olacaksa sitenin normal genel medya yükleme süreciyle eklenmiş bir dosya seçin. Yerel bir file:///C:/... adresi, geçici blob: önizlemesi veya özel bulut paylaşım bağlantısı kalıcı bir genel görsel adresi değildir.

401 veya 403 yanıtında barındırma sağlayıcısına tam başarısız URL’yi, onu kullanan sayfayı ve test saatini gönderin. Hangi kimlik doğrulama veya dağıtım kuralının isteği reddettiğini sorun. Süresi dolan bağlantılar ve başka sitelerde gömmeyi sınırlayan hotlink koruması olası nedenlerdir. Kuralı düzeltin veya sağlayıcının desteklediği genel görsel URL’sini kullanın. Özel dosyalar için amaçlanan erişim denetimlerini koruyun.

4. Görselin sayfadaki görünürlüğünü kontrol edin

Görsel doğrudan açılıyorsa sayfa düzenleyicisindeki ayarlarla başlayın:

• Görseli ve üst bölümünü kontrol edin. “Mobilde gizle” veya “Yalnızca masaüstü” gibi görünürlük ayarlarını arayın. Gizlenen bölüm içindeki görselleri de gizler.
• Arka planları ayrı kontrol edin. Bir bölümün arka planı için görünür bir kapsayıcı gerekir. Boş bölüme düzenleyicide gereken yüksekliği verin; ardından arka plan konumunu ve üzerindeki katmanı inceleyin.
• Saydam grafikleri başka bir renk üzerinde inceleyin. Beyaz bir logo doğru yüklense bile beyaz sayfaya karışabilir. Görseldeki öğe görünmüyorsa saydamlık rehberini kullanın.

İlgili değişikliği kaydedip herkese açık sayfayı inceleyin. Görsel hâlâ eksikse engellenen bir istek ile düzenin gizlediği bir görseli ayırt etmek için teknik kontrolleri kullanın.

5. Mobil görselleri ve takılı kalan yer tutucuları kontrol edin

Sorun yalnızca telefonda yaşanıyorsa

Düzenleyicinin mobil görünümünü açıp görselin veya bölümün gizlenip gizlenmediğini kontrol edin. Ayrı bir mobil görsel ayarı varsa kullanılabilir bir dosyaya işaret ettiğini doğrulayın. Ardından herkese açık sayfayı sorunun yaşandığı telefonda deneyin.

Siteler birden fazla boyut oluşturup seçimi tarayıcıya bırakabilir. Telefon eksik bir küçük sürümü isterken dizüstü bilgisayar çalışan büyük sürümü kullanabilir. Site yöneticisinden çalışan ve çalışmayan ekran boyutlarında seçilen URL’leri karşılaştırmasını ve eksik sürümü geri getirmesini isteyin. Seçimin nasıl bulunacağı teknik kontrollerde anlatılır.

Ekrandaki görsel yer tutucu olarak kalıyorsa

Sayfanın altındaki bir görseli veya henüz açılmamış galeri slaydını yüklemek için beklemek kasıtlı olabilir. Görsele ulaştığınızda ya da ilgili slaydı açıp yüklenmesi için zaman tanıdığınızda hâlâ boşsa inceleyin. Başarısız olan istek ile hiç başlamayan istek farklı çözümler gerektirir.

Bir test kopyasında, etkilenen galeri veya gecikmeli yükleme ayarını tek sayfada deneyin. Görsel geri gelirse daha geniş bir değişiklik yapmadan önce o bileşeni düzelttirin. Sayfa açılır açılmaz görünen ana görsel için gecikmeli yüklemenin uygunluğunu değerlendirin. Lazy loading rehberimiz seçenekleri açıklar.

6. Düzenleyiciyi ziyaretçilerin aldığı sayfayla karşılaştırın

Görsel yalnızca düzenleyicide görünüyorsa değişikliği doğru sayfada yayımladığınızı doğrulayın. Ardından medya kitaplığındaki adresi herkese açık sayfanın isteğiyle karşılaştırın. Düzenleyicideki özel önizleme ile herkese açık çalışan bir dosya farklı şeylerdir.

Eski bir sayfayı veya görsel başvurusunu düzelttikten sonra ilgili sayfa ya da dosyanın önbelleğini yenilemek için yayın sisteminizin belgelenmiş araçlarını kullanın. İçerik dağıtım ağının, yani CDN’nin, kendi önbelleği olabilir. Tarayıcı verilerinizi silmek sitenin paylaşılan önbelleğini yenilemez.

Sorun yalnızca bir tarayıcı profilinde görülüyorsa eklentiler olmadan deneyin ve o profilin site izinlerini inceleyin. Gizli gezinme her yapılandırmada eklentileri otomatik kapatmaz. İçerik engelleyicide mi yoksa sitenin dağıtım yönteminde mi işlem gerektiğine karar vermeden önce başarısız isteği kaydedin.

Site yöneticileri bölümü, tarayıcının normal HTTP önbelleği olmadan test etmeyi açıklar. MDN’nin önbellek rehberi, tarayıcı önbelleğini ve paylaşılan önbellekleri anlatır.

7. Neden biçim veya boyutsa dosyayı değiştirin

Dönüştürücü seçmeden önce gerçek dosya türünü ve hedefin gereksinimlerini kontrol edin. Dönüştürme biçim uyumsuzluğunu çözebilir; eksik bir adresi geri getiremez veya gizli bölümü görünür yapamaz.

• Dosya HEIC veya HEIF, hedef ise JPG istiyorsa: HEIC → JPG aracını kullanarak hareketsiz bir görsel kopyası oluşturun. Sonucu kontrol edin ve aslını saklayın. iPhone fotoğrafı zaten JPEG olabilir; önce biçimini kontrol edin.
• Platform SVG’yi reddedip PNG’yi kabul ediyorsa: uygun piksel boyutlarında bir PNG kopyası oluşturun. Yüklemeden önce grafiği inceleyin.
• Dosya kendi cihazınızda da açılmıyorsa: çalışan bir asıl dosyayı geri alın veya onu oluşturan uygulamadan yeniden dışa aktarın. Dosya uzantısını değiştirmek bozuk veriyi onarmaz.
• Yükleme belirtilen sınırı aşıyorsa: sınıra uyan bir kopya hazırlayın. Ardından yüklemenin tamamlandığını ve sayfanın yüklenen dosyayı kullandığını doğrulayın.

MDN biçim rehberi, tarayıcı desteğini ve biçimlerin özelliklerini karşılaştırır. Dışa aktarılan SVG farklı görünüyorsa SVG rehberine bakın. Görünen ama net olmayan bir görsel için bulanık görsel rehberini kullanın.

Örnek: ürün fotoğrafı mobilde kayboluyor

Bu açıklayıcı senaryoda, mağaza taşındıktan sonra ürün fotoğrafı dizüstü bilgisayarda çalışır ancak telefonda bozuk görsel görünür. Medya kitaplığındaki asıl dosya açıldığı için mağaza sahibi telefonun gerçek görsel isteğini kontrol eder.

Telefon, 404 döndüren /media/blue-mug-640.webp dosyasını seçer. Dizüstü bilgisayar /media/blue-mug-1280.webp dosyasını kullanır. Taşıma işlemi büyük dosyayı kopyalamış, küçük sürümü atlamıştır.

Site yöneticisi eksik boyutu yeniden oluşturur, sunulan diğer sürümleri kontrol eder ve gerekiyorsa eski sayfa başvurularını günceller. Mağaza sahibi herkese açık sayfayı telefonda yeniden yükleyip istenen dosyanın artık doğru görseli döndürdüğünü doğrular. Neden, oluşturulmuş bir dosyanın eksikliğiydi; asıl dosyanın biçimini değiştirmek bu başvuruyu düzeltmezdi.

8. Düzeltmeyi ziyaretçi gibi doğrulayın

Başarısız testi aynı herkese açık sayfada, ekran boyutunda ve galeri slaydında tekrarlayın. Doğru görselin göründüğünü ve yeniden yükledikten sonra da kullanılabildiğini doğrulayın. Görsel herkese açık olacaksa yönetici oturumu olmadan deneyin.

Şablon veya dağıtım değişikliğinde aynı bileşeni kullanan başka bir sayfayı da masaüstünde ve mobilde kontrol edin. Nedeni ve değiştirdiğiniz dosya ya da ayarı kısaca not edin.

Düzeltmeyi başka biri tamamlayacaksa sayfa URL’sini, seçilen görsel URL’sini, hata saatini, tarayıcı ve cihaz bilgilerini ve ilgili hatayı gönderin. Görselin düzenleyicide, doğrudan yeni sekmede veya başka ekran boyutunda çalışıp çalışmadığını belirtin. Herkese açık paylaşacağınız materyallerden özel belirteçleri ve kişisel bilgileri çıkarın.

İsteğe bağlı: site yöneticileri için teknik kontroller

Yukarıdaki bulgulara uygun kontrolleri kullanın. Bunlar kullanılamayan dosyayı, başarısız isteği ve yüklenmiş ama gizli görseli birbirinden ayırır.

Görsel isteğini Network panelinde inceleyin

1. Sorunlu herkese açık sayfayı açın. Chrome menüsünden Diğer araçlar → Geliştirici araçları yolunu, ardından Network sekmesini seçin. Diğer tarayıcılarda da benzer araçlar vardır.
2. Kaydı açık tutup sayfayı yeniden yükleyin. Img filtresini seçin veya dosya adını arayın. Yüklemeyi normalde bu başlatıyorsa görsele ilerleyin ya da galeri slaydını açın.
3. İsteği seçin. Headers altında Request URL, durum ve yanıt üst bilgilerini not edin. Dönen içeriği görmek için Preview veya Response kullanın.
4. Sonuç yoksa filtreleri temizleyin. URL değişmiş olabilir veya bir betik görseli Fetch/XHR üzerinden alıyor olabilir.

Yeni bir indirmeyle karşılaştırmak için Disable cache seçeneğini açın, geliştirici araçlarını açık bırakıp sayfayı yenileyin. Bu, tarayıcının normal HTTP önbelleğini atlar; CDN önbelleğini değil. Siteye bir service worker müdahale ediyorsa kayıtlı yanıtlarını ayrıca inceleyin. Chrome Network başvurusuna bakın.

Durum kodu araştırmayı daraltır ama her nedeni açıklamaz. MDN, HTTP durum kodlarını ve normal 304 doğrulamasını açıklar. Sunucu adı veya sertifika hatalarında görsel sunucusunun DNS ve HTTPS ayarlarını kontrol edin.

Yanıt gerçek görsel verisi ve image/jpeg veya image/webp gibi uygun bir Content-Type içermelidir. Sonu .jpg olan bir URL HTML döndürebilir; bir görsel hizmeti ise aynı uzantı üzerinden geçerli şekilde başka bir görsel biçimi sunabilir.

Adresi açmak dosyayı indiriyorsa

İçerik türünün yanında Content-Disposition değerini de kontrol edin. Content-Disposition: attachment içeren yanıt, adresi doğrudan açtığınızda indirmeyi başlatabilir. Bu tek başına görselin sayfada çalışmadığını kanıtlamaz: gömülü isteği de inceleyin. İndirme bağlantısı kopyaladıysanız sağlayıcının desteklediği görsel sunum URL’sini kullanın. Content-Disposition başvurusuna bakın.

Seçilen duyarlı görsel URL’sini bulun

Chrome veya Edge’de sorunlu görsele sağ tıklayıp İncele seçeneğini seçin. Elements içinde kapsayıcısını veya <picture> öğesini değil, gerçek <img> öğesini seçin. Console sekmesini açıp yalnızca bilgi okuyan şu ifadeyi yazın:

$0.currentSrc

$0, bu geliştirici araçlarında en son seçilen öğeyi belirtir. Sonuç seçilmiş görsel adresidir; yüklemenin başarılı olduğunun garantisi değildir. Network içinde kontrol edin. Console Utilities başvurusu, $0 ifadesini açıklar; MDN ise currentSrc özelliğini belgeler.

Tarayıcı srcset içinden veya koşullara uyan bir <picture> kaynağından dosya seçebilir. Çalışan bir src, seçilmiş ama eksik bir adayı onarmaz. Picture yedek seçimi kaynak koşullarına ve desteğe bağlıdır; seçilen dosyanın 404 hatasını gidereceğine güvenmeyin. Duyarlı görsel seçimine ve picture başvurusuna bakın.

HTML ve CSS görsel yollarını çözümleyin

https://example.com/services/kitchens/ sayfasında farklı bir temel URL belirlenmemişse şu iki kaynak farklı konumları ister:

<img src="images/kitchen.jpg" alt="Meşe dolaplı tamamlanmış mutfak">
<img src="/images/kitchen.jpg" alt="Meşe dolaplı tamamlanmış mutfak">

İlki /services/kitchens/images/kitchen.jpg, ikincisi aynı sunucuda /images/kitchen.jpg adresini ister. Varsa alt dizin öneki de dahil olmak üzere gerçek yayın konumunuza uyan adresi seçin. MDN, göreli ve mutlak yolları açıklar. Harici CSS dosyasında göreli görsel URL’si stil dosyasının adresine göre çözümlenir; CSS URL başvurusuna bakın.

Düzeni ve yükleme uygulamasını inceleyin

Elements → Computed içinde görseli ve üst öğelerini display: none, visibility: hidden, sıfır opaklık, çökmüş boyutlar, kırpma veya üstteki katman açısından kontrol edin. Arka plan görseli boş kapsayıcıya fotoğrafın yüksekliğini vermez. Sorumlu kuralı düzenleyicide veya kaynak stil dosyasında düzeltin; geliştirici araçlarındaki geçici değişiklik genellikle yeniden yüklemede kaybolur. Chrome CSS inceleme rehberine ve background-image başvurusuna bakın.

Gerçek URL yalnızca data-src içinde bulunuyorsa görsel kaynağını atayan betiği ve ilgili Console hatalarını kontrol edin. Yerleşik loading="lazy" kullanırken uygun boyutları verin ve yüklenmeden önce görsele düzende yer ayrıldığını doğrulayın. Tarayıcı düzeyinde lazy loading rehberi bu davranışı açıklar.

Content Security Policy: amaçlanan görsel sunucusunun img-src ile, görsele özel yönerge yoksa default-src ile eşleştiğini kontrol edin. CSP görsel kaynağı başvurusuna bakın.

Karma içerik: HTTPS sayfasındaki HTTP görsel başvurusu, kullanımına göre HTTPS’ye yükseltilebilir veya engellenebilir. Görselin HTTPS üzerinden kullanılabildiğini doğrulayın ve başvuruyu güncelleyin. MDN’nin karma içerik açıklamalarına bakın.

CORS ve gömme politikaları: farklı bir kaynaktan normal görsel göstermek ile piksellerini canvas üzerinden okumak farklı gereksinimlere sahiptir. crossorigin eklemek, sunucu gerekli CORS yanıtını sağlamıyorsa yüklemeyi bozabilir. Görseller için CORS belgelerini ve bildirilen Cross-Origin Resource Policy kısıtlamalarını inceleyin.

Sık sorulan sorular

Görseli ben görebilirken ziyaretçiler neden göremiyor?

Düzenleyici yayımlanmamış veya geçici önizleme gösterebilir; açık oturumunuzun ziyaretçilerde olmayan erişim hakları olabilir. Herkese açık sayfayı bu oturum olmadan deneyin. Dosya genel erişime açık olacaksa sitenin genel medya sürecini kullanın; değilse kimlik doğrulamalı gösterimin incelenmesini isteyin.

Görsel neden yeni sekmede açılıyor ama sayfanın içinde çalışmıyor?

Önce tam adresleri karşılaştırın: sayfa başka bir boyut istiyor olabilir. Aynılarsa gömülü istekte erişim veya tarayıcı politikası hatası arayın. Görsel isteği başarılıysa sayfanın görünürlük ve düzen ayarlarına geçin.

200 yanıtı görselin çalıştığını kanıtlar mı?

Hayır. Yanıtın içeriğini kontrol edin. Durum kodu 200 olan oturum açma sayfası bir görsel değildir. Yanıt doğru görseli içeriyorsa ilgili Console mesajlarına ve sayfadaki gösterimine bakın. Yanıt kodu tek başına görünür bir sonucu doğrulamaz.

Boyutları küçültmek veya sıkıştırmak bozuk görseli düzeltir mi?

Yükleme belirtilen sınırı aşıyorsa veya çok büyük görsel yavaş aktarılıyorsa yardımcı olur. Yanlış yol, eksik küçük resim veya gizlenmiş bölüm farklı bir düzeltme ister. Dosyayı değiştirmeden önce yükleme hatası ya da görsel isteği üzerinden sorunun ne olduğunu belirleyin.

Dosyanın adını veya uzantısını değiştirmeli miyim?

Belirli bir yol ya da adlandırma sorununu çözmek için dosyanın adını değiştirin, ardından eski adı kullanan başvuruları güncelleyin. Dosya uzantısını .heic yerine .jpg yapmak görseli dönüştürmez. Gerçek biçim desteklenmiyorsa dönüştürücü kullanın ve aslını saklayın.

Alt metni, robots.txt veya Search Console görseli görünür yapar mı?

Alt metni, görsel görülemediğinde onu betimler; dosyayı getirmez. Robots yönergeleri ve Search Console, tarama ve arama görünürlüğüyle ilgilidir. Ziyaretçinin sayfasında eksik olan görsel için önce dosya, istek ve düzen kontrollerini tamamlayın.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)