HTML `img` tag

Explore the basics of using images and HTMLimgTags, and how to make them responsive

can useimglabel.

This label accepts onesrcAttribute, we use it to set the image source:

<img src="image.png" />

We can use multiple images. The most common are PNG, JPEG, GIF, SVG and most recently WebP.

HTML standard requirementsaltThe attributes to be displayed to describe the image. Both screen readers and search engine robots use this feature:

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

You can setwidthwithheightAttributes to set the space the element will take up so that the browser can describe it and will not change the layout when it is fully loaded. It needs a value, in pixels.

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

Responsive image usesrcset

ThissrcsetProperties allow you to set the responsive image that the browser can use according to your preferences, depending on the pixel density or window width. In this way, it can only download the resources needed to render the page, but not larger images (for example, on mobile devices).

In the following example, we provide 4 other pictures for 4 different screen sizes:

<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">

insidesrcsetWe usewMeasure to indicate the width of the window.

Since doing this, we also need to usesizesAttributes:

<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">

In this example(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxString insizesThe attribute describes the image size related to the viewport, and multiple conditions are separated by commas.

Media situationmax-width: 500pxSet the image size relative to the viewport width. In short, if the window size is less than 500 pixels, it will render the image at 100% of the window size.

If the window is larger, but <900px, It will render the image at 50% of the window size.

If it is larger, it will render the image at a resolution of 800px.

Thisvw unit of measure can be new to you, and in short we can say that 1 vwIs 1% of the window width, so100vwIt is 100% of the window width.

A useful website that can generatesrcsetThe gradually reduced image ishttps://sensitivebreakpoints.com/.

Download mine for freeHTML manual


More HTML tutorials: