HTML Images

In HTML, images can be embedded using the <img> tag. The <img> tag is used to display images on a webpage and has attributes such as src, alt, and width.

Basic Image Structure

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

Image Attributes

src

<img src="image.jpg">

The src attribute specifies the source (URL or path) of the image.

alt

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

The alt attribute provides alternative text that describes the image if it cannot be displayed.

width and height

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

The width and height attributes set the dimensions of the image.

Example

<img src="landscape.jpg" alt="A beautiful landscape" width="600" height="400">

Here's an example of embedding an image with a width of 600 pixels and height of 400 pixels.

Image Formats

Common image formats supported in HTML include:

• JPEG (recommended for photographs)
• PNG (supports transparency)
• GIF (supports simple animations)
• SVG (scalable vector graphics)

Example of different image formats:

<img src="image.jpg" alt="JPEG image">

<img src="image.png" alt="PNG image">

<img src="image.gif" alt="GIF image">

<img src="image.svg" alt="SVG image">

Image Links

Images can also be linked to other pages using the <a> tag:

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

This example shows an image that links to a webpage when clicked.