Images & Image Optimization

Images make web pages more attractive, informative and engaging. HTML provides the <img> element to embed images in a webpage.

Key Concept:

A good website does not simply display images. Images should be accessible, responsive, properly sized and optimized so that they load quickly without unnecessarily reducing quality.

1. Adding an Image to a Web Page

The <img> element is used to display an image on a webpage.

The <img> element is a void element. It does not require a closing tag.

Basic Syntax

<img src="images/school.jpg" alt="School building">

The src attribute specifies the location of the image, while alt provides alternative text.

2. Important Attributes of the <img> Element

Attribute	Purpose	Example
src	Specifies the path or URL of the image.	`src="images/photo.jpg"`
alt	Provides alternative text describing the image.	`alt="Students working in a laboratory"`
width	Specifies the displayed width of the image.	`width="600"`
height	Specifies the displayed height of the image.	`height="400"`
loading	Controls when the browser loads the image.	`loading="lazy"`
decoding	Provides the browser with a hint about image decoding.	`decoding="async"`
srcset	Provides multiple image sources for different screen sizes or resolutions.	`srcset="small.jpg 480w, large.jpg 1200w"`
sizes	Helps the browser choose an appropriate image from the available sources.	`sizes="(max-width: 600px) 100vw, 50vw"`

3. The Importance of the `alt` Attribute

The alt attribute provides alternative text for an image.

If the image cannot be loaded, the alternative text can be displayed. Screen readers can also use the text to communicate the meaning of an image to users who cannot see it.

Good Example

<img
    src="images/science-laboratory.jpg"
    alt="Students conducting an experiment in a science laboratory">

Poor Example

<img
    src="images/science-laboratory.jpg"
    alt="image">

Important:

Do not use meaningless alternative text such as "image", "photo" or "picture" when the image conveys useful information.

4. Decorative Images

Some images are used only for decoration and do not provide meaningful information.

For a purely decorative image, an empty alt attribute can be used.

<img src="images/decorative-line.png" alt="">

Remember:

Meaningful image → descriptive alt text.

Decorative image → alt="".

5. Image Paths

The value of the src attribute can contain a relative path or an absolute URL.

Relative Path

<img src="images/logo.png" alt="Website logo">

This assumes that the images folder is located relative to the current HTML file.

Image in a Parent Folder

<img src="../images/logo.png" alt="Website logo">

The .. moves one level up in the directory structure.

Absolute URL

<img
    src="https://example.com/images/logo.png"
    alt="Website logo">

6. Using Width and Height

The width and height attributes specify the intended dimensions of an image.

<img
    src="images/campus.jpg"
    alt="Modern school campus"
    width="800"
    height="500">

Providing the intrinsic dimensions can help the browser reserve appropriate space while the image loads.

Best Practice:

Keep the correct aspect ratio. Do not independently change width and height in a way that makes the image appear stretched or distorted.

7. Common Image Formats for Websites

Format	Typical Use	Key Characteristic
JPEG / JPG	Photographs and complex images.	Good compression for photographic content.
PNG	Graphics, screenshots and images requiring transparency.	Supports lossless compression and transparency.
GIF	Simple animations and limited-colour graphics.	Supports simple animation.
SVG	Logos, icons and vector illustrations.	Scales without losing vector quality.
WebP	General web images.	Modern format supporting efficient compression.
AVIF	Modern web images where strong compression is useful.	Can provide highly efficient image compression.

8. What is Image Optimization?

Image optimization is the process of reducing unnecessary image file size while maintaining acceptable visual quality and usability.

Large, unoptimized images can increase page loading time and consume unnecessary bandwidth.

Goal of Image Optimization:

Smaller file size + appropriate quality + fast loading + good user experience

9. Image Optimization Techniques

Technique	Purpose
Resize Images	Avoid uploading an image that is much larger than the size required on the webpage.
Compress Images	Reduce file size while maintaining suitable quality.
Use Modern Formats	Consider WebP or AVIF where appropriate.
Lazy Loading	Delay loading of images that are outside the initial viewport.
Responsive Images	Deliver an appropriate image size for different devices and screen sizes.
Provide Dimensions	Helps the browser reserve space for the image.
Use Descriptive Alt Text	Improves accessibility and communicates image meaning.

10. Lazy Loading

Lazy loading allows suitable images to be loaded when they are approaching the user's viewport instead of loading every image immediately.

<img
    src="images/library.jpg"
    alt="Digital library"
    width="800"
    height="500"
    loading="lazy">

When to Use:

Lazy loading is generally useful for images that are lower down the page and are not immediately visible.

11. Responsive Images

A responsive image can provide different image resources depending on the user's device and display requirements.

Using `srcset`

<img
    src="images/campus-800.jpg"
    srcset="
        images/campus-480.jpg 480w,
        images/campus-800.jpg 800w,
        images/campus-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Modern school campus"
    width="1200"
    height="750">

The browser can select an appropriate image resource based on available information about the display.

12. The `<picture>` Element

The <picture> element allows developers to provide multiple image sources and select among them based on supported formats or media conditions.

Example: Modern Image Format with Fallback

<picture>

    <source
        srcset="images/campus.avif"
        type="image/avif">

    <source
        srcset="images/campus.webp"
        type="image/webp">

    <img
        src="images/campus.jpg"
        alt="Modern school campus"
        width="1200"
        height="750">

</picture>

Why use <picture>?

It allows the browser to use an appropriate supported source while retaining a fallback image.

13. Using <figure> and <figcaption>

The <figure> element can group an image with related content such as a caption.

<figure>

    <img
        src="images/solar-system.jpg"
        alt="Diagram showing the planets of the Solar System"
        width="900"
        height="600">

    <figcaption>
        Major planets of the Solar System.
    </figcaption>

</figure>

The <figcaption> element provides a visible caption associated with the figure.

14. Making an Image a Link

An image can be placed inside an anchor element to make the image clickable.

<a href="courses.html">

    <img
        src="images/html-course.jpg"
        alt="HTML course">

</a>

When the user clicks the image, the browser navigates to courses.html.

15. Image Maps

An image map allows different regions of a single image to act as clickable links.

The usemap attribute connects an image with a <map> element.

<img
    src="images/world-map.jpg"
    alt="World map"
    usemap="#worldmap">

<map name="worldmap">

    <area
        shape="rect"
        coords="100,80,250,180"
        href="europe.html"
        alt="Europe">

</map>

Note:

Image maps are a specialised HTML feature. For modern responsive interfaces, normal links and accessible navigation are often easier to maintain.

16. Image Accessibility

Images should be designed with accessibility in mind.

Practice	Reason
Use meaningful alt text	Helps users who rely on screen readers.
Use empty alt for decorative images	Prevents unnecessary information from being announced.
Do not put essential text only inside images	Text inside an image may not be accessible or searchable like normal HTML text.
Use descriptive captions when appropriate	Provides additional context to users.

17. Images and SEO

Properly implemented images can also contribute to a better search experience.

Use meaningful alt text.
Use descriptive file names such as science-laboratory.jpg instead of IMG001.jpg.
Keep image file sizes appropriate.
Use relevant surrounding text and captions when appropriate.
Use responsive images for better performance across devices.

18. Good vs Poor Image Implementation

Poor Practice	Better Practice
`IMG12345.JPG`	`science-laboratory.jpg`
Missing `alt` text.	Meaningful `alt` text.
Huge image uploaded for a small display area.	Image dimensions are appropriate for the intended use.
Only one large image for every device.	Responsive images using `srcset` and `sizes`.
Unnecessary images loaded immediately.	Suitable below-the-fold images use lazy loading.

19. Complete Practical Example

The following example combines several good image practices.

<figure>

    <picture>

        <source
            srcset="images/campus.avif"
            type="image/avif">

        <source
            srcset="images/campus.webp"
            type="image/webp">

        <img
            src="images/campus.jpg"
            alt="Modern school campus surrounded by trees"
            width="1200"
            height="750"
            loading="lazy"
            decoding="async">

    </picture>

    <figcaption>
        A modern learning environment designed for collaborative education.
    </figcaption>

</figure>

Website Performance Case Study

A school website contains twenty large photographs, each several megabytes in size. Visitors using mobile networks experience slow page loading.

The developer resizes the photographs, compresses them, converts suitable images to modern formats, provides appropriate dimensions and enables lazy loading for images lower down the page.

These changes reduce unnecessary data transfer and can significantly improve the loading experience.

21. Interview Questions

1. What is the purpose of the <img> element?

It is used to embed an image in an HTML document.

2. What is the purpose of the alt attribute?

It provides alternative text for an image and supports accessibility when the image cannot be viewed or loaded.

3. Why is image optimization important?

Image optimization reduces unnecessary file size, improves loading performance, reduces bandwidth usage and provides a better user experience.

4. What is lazy loading?

Lazy loading delays the loading of suitable images until they are near the user's viewport.

5. What is the difference between src and srcset?

src specifies the image source, while srcset can provide multiple image resources so that the browser can select an appropriate one.

6. What is the purpose of the picture element?

The <picture> element allows developers to provide multiple image sources based on conditions such as supported formats or media requirements.

7. Why should width and height be provided for images?

They communicate the intended dimensions to the browser and can help it reserve the required space while the image loads.

8. Which image format is suitable for logos and icons?

SVG is often suitable for logos and icons because vector graphics can scale without losing vector quality.

22. Exam Questions

1 Mark Questions

Which HTML element is used to display an image?
Which attribute specifies the location of an image?
Which attribute provides alternative text for an image?
Which attribute can be used to enable lazy loading?
Name one modern image format used on websites.

Answers

<img>
src
alt
loading="lazy"
WebP or AVIF

2–3 Mark Questions

Explain the importance of the alt attribute.
Differentiate between src and srcset.
Explain any three techniques used for image optimization.
What is lazy loading? Why is it useful?

Competency-Based Question

A website displays a 5 MB photograph even though the image is displayed at a small size on a mobile phone. The page loads slowly.

Question: Suggest suitable techniques to improve the image loading performance.

Click to View Answer

The developer should resize the image to an appropriate resolution, compress it, consider a modern format such as WebP or AVIF, use responsive images with srcset and sizes, and use lazy loading if the image is not immediately visible.

Think Like a Web Developer

An online learning website contains hundreds of course thumbnails. Loading every full-resolution image when the page opens makes the website slow.

Task: Design an image strategy that improves performance without sacrificing accessibility.

Click to View Suggested Approach

Use appropriately sized thumbnails, compress the images, use modern formats where suitable, provide meaningful alt text, specify dimensions, use loading="lazy" for below-the-fold images, and use responsive image techniques where multiple sizes are required.

Common Beginner Mistakes

Forgetting the alt attribute.
Using meaningless alt text such as "image".
Uploading extremely large images without optimization.
Stretching an image by using an incorrect aspect ratio.
Using the same unnecessarily large image for every device.
Using lazy loading indiscriminately for every image, including important images that should be available immediately.
Ignoring accessibility while focusing only on visual appearance.
Using filenames such as IMG0001.jpg instead of descriptive names.

Best Practices

Practice	Recommendation
Accessibility	Always provide appropriate alt text for meaningful images.
Performance	Resize and compress images before publishing them.
Formats	Choose an appropriate format such as JPEG, PNG, SVG, WebP or AVIF according to the content and requirements.
Responsive Design	Use responsive image techniques when different image sizes are beneficial.
Loading	Use lazy loading for appropriate non-critical images.
Maintainability	Use descriptive filenames and well-organised image folders.

Quick Revision

<img> is used to embed images in HTML.
src specifies the image source.
alt provides alternative text.
Meaningful images should have descriptive alternative text.
Decorative images can use alt="".
width and height specify intended image dimensions.
srcset and sizes support responsive image delivery.
<picture> supports multiple image sources.
loading="lazy" enables lazy loading for suitable images.
Image optimization reduces unnecessary file size and improves performance.
WebP and AVIF are modern image formats designed for efficient web delivery.
<figure> and <figcaption> can associate an image with a visible caption.

Memory Trick

Remember the five key ideas:

S → A → O → R → L

S → Source using src
A → Accessibility using alt
O → Optimize file size
R → Responsive images
L → Lazy loading

Frequently Asked Questions (FAQs)

1. Is <img> a container element?

No. The <img> element is a void element and does not have a closing tag.

2. Is alt compulsory?

An alt attribute should be provided appropriately for images. Meaningful images should have useful alternative text, while decorative images can use an empty value such as alt="".

3. Does changing HTML width reduce the actual image file size?

No. Changing the displayed dimensions does not necessarily reduce the downloaded file size. The source image should itself be appropriately resized and compressed.

4. What is the difference between image resizing and image compression?

Resizing changes the image dimensions, while compression reduces the amount of data required to store or transmit the image.

5. What is the purpose of srcset?

It allows multiple image resources to be specified so that the browser can select an appropriate source for the user's display.

6. Should every image use lazy loading?

No. Lazy loading is most useful for suitable non-critical images that are not immediately needed. Important above-the-fold images may need to be available immediately.

Practical Activity

Create a webpage titled "Our Learning Environment" containing:

A school or institution logo.
A campus photograph.
A laboratory photograph.
Appropriate alt text for every meaningful image.
Width and height information.
One responsive image using srcset.
One image using loading="lazy".
A figure containing an image and a caption.

Final Takeaway:

Professional websites treat images as an important part of both design and performance. A web developer should select the right format, optimize file size, provide meaningful alternative text, maintain correct dimensions and use responsive delivery techniques whenever appropriate.

Next Topic: Lists & Tables

Images & Image Optimization