Tutorial by Examples

To add an image to a page, use the image tag. Image tags (img) do not have closing tags. The two main attributes you give to the img tag are src, the image source and alt, which is alternative text describing the image. <img src="images/hello.png" alt="Hello World"> Yo...

Note: The width and height attributes are not deprecated on images and never have been. Their use has been made much stricter though. The dimensions of an image can be specified using the width and height attributes of the image tag: <img src="images/200x200-img.png" width="2...

Alt-text is used by screen readers for visually impaired users and by search engines. It's therefore important to write good alt-text for your images. The text should look correct even if you replace the image with its alt attribute. For example: <!-- Incorrect --> <img src="anonymo...

Using srcset with sizes <img sizes="(min-width: 1200px) 580px, (min-width: 640px) 48vw, 98vw" srcset="img/hello-300.jpg 300w, img/hello-600.jpg 600w, img/hello-900.jpg 900w, img/hello-1200.jpg 1200w" src="img/hello-900.jpg&quo...

Code <picture> <source media="(min-width: 600px)" srcset="large_image.jpg"> <source media="(min-width: 450px)" srcset="small_image.jpg"> <img src="default_image.jpg" style="width:auto;"> </picture> ...