Images in HTML
Welcome to the visual world of web design! In this chapter, we'll explore how to seamlessly integrate images into your HTML documents. Images in html are not only add aesthetic appeal to your website but also serve as powerful tools for conveying information. Let's delve into the details using examples and straightforward language.
Including Images
To showcase an image on your webpage, employ the <img> tag. Here’s a straightforward example:
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="image.jpg" alt="Description of the image" title="Images in HTML 2">
<img>: The image tag.src: Specifies the image file’s source (in this case, “image.jpg”).alt: Offers a brief description of the image, crucial for accessibility.
Image File Types
Images come in various formats, including JPEG, PNG, and GIF. Choose the format based on your specific requirements:
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="photo.jpg" alt="A beautiful landscape" title="Images in HTML 3">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="icon.png" alt="Website logo" title="Images in HTML 4">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="animation.gif" alt="Fun GIF animation" title="Images in HTML 5">
Adjusting Image Size
Take control of your image sizes using the width and height attributes:
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" decoding="async" data-src="thumbnail.jpg" alt="Small image" width="100" height="100" title="Images in HTML 6">
Image Links
Transform images into clickable links, similar to text:
<a href="fullsize.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="thumbnail.jpg" alt="Click to view full size" title="Images in HTML 7">
</a>
Congratulations! You've now harnessed the power of images in HTML, breathing life into your webpage and enhancing user engagement. Always remember to use descriptive alt text for accessibility, choose the right file format, and experiment with image sizes to find the perfect fit for your design. Happy coding !❤️