Images in HTML

In the world of web development, images are essential for enhancing the visual appeal and meaning of a webpage. HTML provides the <img> tag to display images directly on websites, making the content more engaging and easier to understand. To support responsive design, HTML also includes the <picture> and <source> tags, which allow developers to display different images based on the user’s device or screen size. These tags work together to ensure that images look good and load efficiently across all types of screens, helping create a better experience for every visitor.

Let’s learn how to use images in HTML to make our web pages more attractive and user-friendly.

1. <img> Tag

This tag is used to show an image on a webpage.

Syntax:

<img src="image.jpg" alt="Description of image">

Attributes of img tag

1. src

The most important part of the <img> tag is the src attribute. This tells the browser where to find the image. The value of src can be:

• The name of the image file (like cat.jpg) if it is saved in the same folder as your HTML file.
• A path to the image (like images/dog.png) if it is saved inside another folder.
• Or a full URL (like https://eduitlearning.in/pic.jpg) if the image is from the internet.

Example:

<img src="car.jpg">

This means: “Hey browser, show me this car.jpg image.”

If you make a mistake in the file name or path, the image will not appear.

2. alt

The alt attribute is also very important. It gives text description of the image. If for any reason the image cannot be shown (maybe the file is missing or the user has slow internet), the text in the alt will be shown instead.

Also, alt is very helpful for people who cannot see the screen and use screen readers (visually impaired users). The screen reader will read the alt text for them, so they know what the image is about.

Example:

<img src="apple.jpg" alt="A red apple">

So even if the image doesn’t load, the browser will show: “A red apple” as text. This makes your site more user-friendly and accessible.

3. title

The title attribute adds a small pop-up text (called a tooltip) that appears when the user hovers the mouse over the image. It’s like giving extra information to the user without showing it directly on the page.

Example:

<img src="book.jpg" title="This is a book cover">

So when the user puts the mouse on the image, they’ll see a small box saying “This is a book cover”.

4. width and height

Sometimes you want to resize your image to make it smaller or fit better inside your layout. That’s when you use width and height.

You can give these values in:

• Pixels (px) – Example: 300 means 300 pixels
• Percentage (%) – Example: 50% means half the width of the container

If you only set the width, the browser will automatically adjust the height to keep the image looking good (not stretched or squished). Same goes for height.

Example:

<img src="dog.jpg" width="300" height="200">

This will make the image 300 pixels wide and 200 pixels tall.

5. loading

The loading attribute controls when the image should load.

• loading="lazy" means the image will only load when the user scrolls down and is about to see it. This is useful for long pages with lots of images — it makes the page load faster.
• loading="eager" means load it immediately when the page starts loading.

Example:

<img src="map.jpg" loading="lazy">

This tells the browser: “Don’t load this image until the user scrolls down near it.”

2. <picture> Tag

In normal HTML, when we use the <img> tag, it shows one single image. But sometimes we want to show different images based on screen size or device type — like mobile, tablet, or desktop. For example:

• On a small mobile screen, we want to show a small version of an image.
• On a large screen, we want to show a high-quality big image.
• Maybe we want to show a WebP format (which loads faster) if the browser supports it, or a JPEG as a fallback.

To do this smartly, we use the <picture> tag.

The <picture> tag lets you write multiple versions of the same image inside it, and the browser will automatically choose the best one based on screen size, device, or format.

How does the <picture> tag work?

The <picture> tag is like a wrapper or container. Inside it, we put:

1. One or more <source> tags – these are optional image choices.
2. One final <img> tag – this is the default image (shown if none of the <source> options are chosen).

Basic structure:

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="A beautiful landscape">
</picture>

What’s happening here:

• If the screen is 600px wide or smaller (like a mobile), the first <source> will be chosen and small.jpg will be loaded.
• If the screen is 601px to 1200px (like a tablet), the second <source> will be used and medium.jpg will load.
• If it’s anything bigger (like a desktop), the browser will skip the <source> tags and show large.jpg from the <img> tag.

This way, you’re giving the browser multiple choices, and it will pick the one that makes the most sense for that device.

<img> tag inside <picture>?

This is the fallback image. If none of the <source> conditions match, or the browser doesn’t understand <picture> and <source>, it will always load this one.

Also, we put the alt text here to describe the image, just like in a normal <img> tag.

So even if <source> doesn’t work, users will still see an image.

Attributes of source tag

1. srcset attribute

The srcset attribute is used inside the <source> tag to tell the browser which image file to load.

So when you write:

<source srcset="small.jpg">

It means: “Use this image if this <source> tag’s conditions are true.”

2. media attribute

The media attribute is used to define the condition (like screen size) when that image should be used.

Example:

<source srcset="mobile.jpg" media="(max-width: 600px)">

This means: “If the screen is 600px or smaller, then use mobile.jpg.”

You can also use min-width, orientation, and other CSS-style conditions.

Most important Questions

1. What is the difference between <img> and <picture>? When do you use <picture>?

The <img> tag is used to show one single image. It’s straightforward — you write <img src="image.jpg"> and the browser loads that image everywhere on every device. It doesn’t change depending on screen size or browser.

The <picture> tag is like a container for images. Inside it, you can put multiple <source> tags that tell the browser, “Hey, if the screen is this size or the browser supports this format, use this image instead.” Then there is always a fallback <img> tag with a default image.

You use <picture> when you want to give users different images depending on their device or browser. For example, phones can load smaller images to save data, desktops can load bigger images, and browsers that support newer formats like WebP can get better quality images with smaller file size. This makes your site load faster and look good on all devices.

2. How does the browser choose which image to show inside <picture> with multiple <source> tags?

The browser looks at the <source> tags one by one from top to bottom. For each <source>, it checks two things: the media condition (like screen width) and the type (image format). If the user’s device or browser matches those conditions, the browser picks that image and stops checking the rest.

If no <source> matches, the browser shows the image inside the <img> tag, which is the fallback. So the order matters: put the most specific sources at the top and more general ones below.

3. What happens if a browser does not support <picture>? Will the image still show?

Yes, it will still show the image. Browsers that don’t understand the <picture> tag just ignore the <source> tags and load the <img> tag image directly. This is why the <img> tag is always included inside <picture> — to make sure there’s a fallback image for old browsers.

4. What is the difference between src and srcset? Can you use srcset inside <img>?

The src attribute gives the URL of one single image. The browser loads exactly that image.

The srcset attribute allows you to specify multiple images with different sizes or resolutions. The browser looks at the screen size and pixel density (like Retina displays) and picks the best image from the list. This lets the browser load smaller images on small screens or higher resolution images on big screens without extra code.

Yes, you can use srcset inside <img>. This is useful when you want responsive images but don’t need to use <picture>. <picture> is for more complex scenarios, like changing image formats or conditions other than size.

5. What is the purpose of the type attribute in <source>? How does the browser use it?

The type attribute tells the browser what image format is in the <source> file, like image/webp or image/jpeg.

The browser checks if it supports that format. If it does, and the media query matches, it picks that image. If it doesn’t support the format, it skips this <source> and moves to the next one.

This way, you can offer newer formats like WebP (which are smaller and faster) for browsers that support them, and fallback to JPEG or PNG for older browsers.

6. How do you design a hero banner image that changes size and format on different devices and browsers?

You use <picture> with several <source> tags inside. For example, one <source> for WebP format with a media query for desktop screens, one <source> for JPEG for older browsers on desktop, one <source> for WebP for mobile screens, and one <source> for JPEG for mobile fallback. Then you have an <img> tag with a default image.

This way, the browser picks the right image based on screen size and supported format, which keeps the website fast and visually good everywhere.

7. Why must you always include an <img> tag inside <picture>? What happens if it’s missing?

The <img> tag is the fallback image. If the browser does not support <picture>, or if no <source> matches, the browser will use the <img> image. If you don’t have <img>, there will be no image shown at all in those cases.

So, the <img> tag inside <picture> ensures that an image always shows no matter what.

8. What happens if multiple <source> tags have overlapping media queries?

The browser checks the <source> tags in the order they appear. When it finds the first <source> whose media query matches the current device, it picks that image and stops looking further. So the order controls priority — put the more specific or smaller screen sizes first, then the bigger ones.

9. How does using <picture> and responsive images improve website performance?

By letting the browser load the smallest possible image for the device screen and using modern image formats, you reduce the file size. Smaller images mean faster page loading, less data used, and better experience for users, especially on slow or mobile networks.

Responsive images also avoid downloading big images when they’re not needed, saving bandwidth and speeding up the website.

10. What is the purpose of the alt attribute with <img> and should it be inside <picture>?

The alt attribute provides a text description of the image. It helps screen readers for visually impaired users and shows text if the image fails to load.

The alt attribute belongs inside the <img> tag because <picture> is just a container, not the actual image. Only the <img> tag displays the image and needs alt.