HTML "img` Etiketi

<img> etiketi HTML belgeleriniz için görüntü(resim) tanımlar.

imgEtiket kullanılarak görüntüler görüntülenebilir .

Bu etiket src, görüntü kaynağını ayarlamak için kullandığımız bir özniteliği kabul eder :

<img src="image.png" />

Geniş bir resim seti kullanabiliriz. En yaygın olanları PNG, JPEG, GIF, SVG ve daha yakın zamanda WebP'dir.

HTML standardı alt, görüntüyü açıklamak için bir özniteliğin mevcut olmasını gerektirir . Bu, ekran okuyucular ve ayrıca arama motoru botları tarafından kullanılır:

<img src="dog.png" alt="A picture of a dog" />

Tarayıcının bunu hesaba katabilmesi ve tam olarak yüklendiğinde düzeni değiştirmemesi için öğenin alacağı alanı ayarlamak için widthve heightniteliklerini ayarlayabilirsiniz. Piksel cinsinden ifade edilen sayısal bir değer alır.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

Kullanan duyarlı görüntüler srcset

srcsetÖzellik tercihlerinize göre, tarayıcı piksel yoğunluğu veya pencere genişliğine bağlı olarak kullanabileceği duyarlı görüntüleri ayarlamanızı sağlar. Bu şekilde, örneğin bir mobil cihazdaysa daha büyük bir görüntü indirmeden, yalnızca sayfayı işlemek için ihtiyaç duyduğu kaynakları indirebilir.

İşte 4 farklı ekran boyutu için 4 ek resim verdiğimiz bir örnek:

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

İçinde pencere genişliğini belirtmek için ölçüyü srcsetkullanıyoruz w.

Bunu yaptığımız için, şu özelliği de kullanmamız gerekiyor sizes:

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

Bu örnekte, öznitelikteki (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxdize, sizesvirgülle ayrılmış birden çok koşulla, görüntü alanına göre görüntünün boyutunu açıklar.

Ortam koşulu max-width: 500px, görüntü alanı genişliğiyle ilişkili olarak görüntünün boyutunu ayarlar. Kısacası, pencere boyutu <500px ise, görüntüyü pencere boyutunun% 100'ünde işler.

Pencere boyutu daha büyükse ancak <ise 900px, görüntüyü pencere boyutunun% 50'si oranında işler.

Ve daha da büyükse, görüntüyü 800 pikselde işler.