Using Images in HTML

Images are powerful visual tools on websites. HTML allows us to display them with very simple syntax, but it’s important to understand how all related attributes work.

Using the <img> Tag

To insert images, we use the <img> element. It’s a self-closing tag that must include at least the src and alt attributes.

<img src="https://via.placeholder.com/150" alt="Example image">

The Role of the alt Attribute

The alt (alternative text) attribute describes the image for cases where it doesn't load or when the user relies on a screen reader. Always provide a meaningful and concise description.

Embedding Local Images

You can use images stored within your project, not just external ones. For example, if you have a folder named 'images', you can access them like this:

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

Defining Width and Height

The width and height attributes control image size. You can use pixels or percentages. It’s important to maintain the aspect ratio.

<img src="photo.jpg" alt="Photo" width="300" height="200">

title Attribute

The title attribute is useful for showing a tooltip when the cursor hovers over the image.

<img src="image.jpg" alt="Description" title="This is an image">

Resizing Images with Stylesheets

CSS makes it easy to resize images. To make an image fit the width of its parent container, you can use the following setting:

<img src="photo.jpg" alt="Resized image" style="width: 100%; height: auto;">

Image Formats (JPG, PNG, GIF, WebP)

There are various image formats for different use cases. JPG is good for photos, PNG supports transparency, GIF handles animations, and WebP is a modern, compressed, fast-loading format.

Accessibility and Images

Always make sure that images serve more than just a decorative purpose — they should contribute to the content as well. Using the alt attribute is crucial for user experience and accessibility.