Explore the basics of using images and HTML
imgTags, and how to make them responsive
This label accepts one
srcAttribute, 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 requirements
altThe 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 set
heightAttributes 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 use
srcsetProperties 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">
wMeasure to indicate the width of the window.
Since doing this, we also need to use
<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 in
sizesThe attribute describes the image size related to the viewport, and multiple conditions are separated by commas.
max-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.
vw unit of measure can be new to you, and in short we can say that 1
vwIs 1% of the window width, so
100vwIt is 100% of the window width.
A useful website that can generate
srcsetThe gradually reduced image ishttps://sensitivebreakpoints.com/.
Download mine for freeHTML manual
More HTML tutorials:
- Introduction to HTML
- HTML `iframe` tag
- HTML table
- HTML `video` tag
- HTML `audio` tag
- HTML tags for text
- HTML table
- HTML `img` tag
- HTML `a` tag
- HTML `picture` tag
- HTML `figure` tag
- HTML container tags
- Accessibility on the web
- How to create comments in HTML
- How to change HTML image URL in dark mode
- Responsive image using `srcset`
- Change icon in dark mode