HTML Images | Codeblox

Image

<img src="image.jpg" alt="description">

To add an image. Use alt to provide text and SEO.

<img src="image.jpg" alt="description" loading="lazy">

To set how the browser loads images. Lazy loading will only download the image once scrolled into window, increasing the speed of your site.

Image Map

<img src="imagemap.jpg" alt="" usemap="#workmap">
    <map name="workmap">
    <area shape="rect" coords="" alt="" href="example.com"> 
</map>

To add links inside an image at certain areas. Can use a image map generator.

Picture

<picture>
    <source media="(min-width: 0px)" srcset="img.jpg">
    <source media="(min-width: 768px)" srcset="img2.jpg"> 
    <img src="img3.jpg">
</picture>

Use different images based on different screen sizes.