HTML Images

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

<img src="url" alt="description">

The src Attribute

The src attribute specifies the URL (web address) of the image:

<img src="image.jpg" alt="My Image">

The alt Attribute

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader):

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

Image Size - The height and width Attributes

You can use the height and width attributes to specify the size of the image:

<img src="image.jpg" alt="Description" width="500" height="600">

It is important to specify the right size of an image to maintain the page layout even if the image fails to load and to improve page loading times.

Images in a Folder

If your image is located in a folder, the src attribute's path must reflect that. For instance, if you have an image inside an 'images' folder:

<img src="images/image.jpg" alt="Description">

Images on a Different Server

When your image is hosted on a different server, you might use an absolute URL in the src attribute:

<img src="http://www.example.com/images/image.jpg" alt="Description">

Images on a Different Website

Similar to using images from another server, you would use the full URL to reference the image:

<img src="https://www.anotherwebsite.com/picture.jpg" alt="Description from another website">

Responsive Images

To make images flexible and responsive to the size of the user's screen, you can omit the height and width attributes and instead use CSS to control the image size:

<img src="responsive-image.jpg" alt="Description" style="max-width:100%;height:auto;">

This ensures that the image will scale nicely on all screen sizes.

Image as a Link

An image can be wrapped in an <a> tag to act as a hyperlink:

<a href="https://www.example.com">
    <img src="link-image.jpg" alt="Description">
</a>

Animated Images

Animated images, such as GIFs, can be added like any other image:

<img src="animation.gif" alt="Animated image description">

Image Floating

Use the CSS float property to let the image float to the right or left of a block of text:

<img src="float-image.jpg" alt="Floating image" style="float:right;">
<p>Here is some text that wraps around the floating image. </p>

Common Image Formats

The most common image formats used on the web are JPEG, PNG, GIF, and SVG:

• JPEG: Best for photographs and realistic images with smooth transitions between colors.
• PNG: Best for images that require transparency or images with text & sharp edges.
• GIF: Used for simple animations.
• SVG: Used for icons, logos, and illustrations. Scalable without loss of quality.

Image Formats Examples

<img src="photo.jpeg" alt="Description of JPEG image">

<img src="logo.png" alt="Description of PNG image">

<img src="animation.gif" alt="Description of animated GIF">

<img src="vector.svg" alt="Description of SVG image">