🖼️ Chapter Roadmap
1 The Image Tag (<img>)
Images make web pages beautiful and engaging. But here is a secret: HTML does not actually insert images physically into the webpage. Instead, HTML creates an empty "Picture Frame" and links an external image file to show inside that frame.
Important Note: The <img> tag is an empty/void element. This means it only contains attributes and does not have a closing tag.
2 Essential Attributes (src & alt)
An <img> tag is completely useless on its own. It absolutely needs two super-attributes to function correctly: src and alt.
1. The src Attribute
Stands for "Source". This tells the browser exactly where to find the picture. It can be a local file name (Relative URL) or a link from the internet (Absolute URL).
src="my-photo.jpg"
2. The alt Attribute
Stands for "Alternate Text". If the internet is slow or the image is deleted, this text shows up instead. It also helps blind users (screen readers) understand the picture!
alt="A cute little puppy"
3 Width and Height
Sometimes an image is too large for your webpage. You can control its size using the width and height attributes. The size is always measured in Pixels (px).
If you only set the width, the browser will automatically calculate the height to keep the picture looking perfect. If you force both width and height to random numbers, your image might look stretched and ugly!
4 Image Formats & Lazy Loading
Which Image Format Should You Use?
Best for colorful photographs and complex camera pictures.
Best for logos and icons because it supports transparent backgrounds.
Best for short, looping, soundless animations and memes.
Modern format by Google. High quality but very tiny file sizes!
⚡ Pro Feature: Lazy Loading
If your webpage has 100 images, loading them all at once will make your site extremely slow. You can use the loading="lazy" attribute. This tells the browser: "Don't load this image until the user scrolls down near it!"