Middle

Mobil cihazlarda resmin küçük boyutta yüklenmesini nasıl sağlayabilirim?

sobes.tech yapay zeka

AI'dan gelen yanıt

Mobil cihazlarda küçük boyutlu resimleri yüklemek için HTML ve CSS kullanılarak uyumlu resimler kullanılır:

Tarayıcının ekran boyutuna göre uygun resim boyutunu seçmesi için <img> öğesini srcset ve sizes öznitelikleriyle kullanın:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Resim açıklaması">

CSS kullanarak resmin maksimum genişliğini sınırlayın:

img {
  max-width: 100%;
  height: auto;
}

Ayrıca, dosya boyutunu küçültmek için modern resim formatları (WebP, AVIF) kullanılabilir.

Bu şekilde, mobil cihazdaki tarayıcı, boyut açısından en uygun dosyayı yükleyecek, bu da performansı artırır ve trafik azaltır.

Önceki Sonraki