CSS Mobil Uyumlu Tasarımda Gizlenmiş Resimlerin Yüklenmesini Engellemek

Çok uzun bir başlık oldu ama gerçekten tam olarak nasıl anlatılır bilemiyorum. Şöyle anlatayım. Diyelim ki bir css ile bir tema yapıyoruz ve temanın mobil görümünde üst kısımdaki reklamı gizleyeceğiz. Normalde reklam olan kısmın divini display:none yaparız ve gizleriz.

Fakat bu şekilde yaptığımızda her ne kadar o alan gözükmese de tarayıcılar o reklam alanındaki resimi yükler. Haliyle bu da o resimin mobil cihazda indirilmesini; sitenin daha yavaş çalışmasına ve ziyaretçilerin daha fazla internet verisi kullanmasına yol açar.

Bu durumunda çaresi CSS’de mevcut.

Normalde bu şekilde gizleme yaparız.

 .reklam {
    background: url(reklam.png);
  }
 
  @media (max-width: 600px) {
     .reklam { 
        display: none;
     }
  }

Bu şekilde yaptığımızda reklam divindeki resimi tarayıcılar indirir haliyle yukarıda anlattığım durum ortaya çıkar.

.reklam {
    background: url(reklam.png);
  }
 
  @media (max-width: 600px) {
     .reklam { 
        background-image: none;
     }
  }

Bu şekilde kullandığımızda, yukarıdaki veri harcaması ve sitenin çalışması durumlarındaki yavaşlık bir nebze azalacaktır ve size performans açısından daha iyi sonuçlar verecektir.