H2 - Images

Images on websites should look good, load quickly and work in modern browsers.

• JPG: good for photos, uses compression, no transparency.
• GIF: old format, limited colors, can animate.
• PNG: sharp, supports transparency, often larger.
• WEBP: modern, small files, transparency and animation.
• AVIF: very modern, often even smaller, can be heavier to create.

Prefer WEBP for many web images. Avoid spaces in file and folder names.

You add an image with the <img> element. It does not have a closing tag. The most important attribute is src, which points to the image file.

<img src="photo.webp" alt="A student working on a website">

• src tells the browser where the image is.
• alt describes the image when it cannot be seen.
• The path must match the exact file name.

The alt attribute is important for accessibility and for situations where the image cannot load. Write what the image shows or what its function is.

• Use clear alt text for meaningful images.
• Use an empty alt attribute for purely decorative images: alt="".
• The title attribute can show extra information on hover, but it is not a replacement for alt text.

With width and height you tell the browser the natural size of the image. This helps prevent layout jumps while the page is loading.

<img src="banner.webp" alt="Website banner" width="1200" height="600">

Use CSS when you want the image to resize visually.

img {
    max-width: 100%;
    height: auto;
}

A path tells the browser where a file is located.

• photo.webp means the image is in the same folder as the HTML file.
• images/photo.webp means the image is inside an images folder.
• ../photo.webp means go one folder up.

• A relative path starts from the file you are currently editing.
• An absolute URL starts with a full address, such as https://.
• For your own files, relative paths are usually easiest while learning.

<img src="images/logo.webp" alt="Logo">
<img src="https://www.example.com/image.webp" alt="Example image">