Image

<img> element

The <img> element embeds an image into the document.

There are two important attributes to use:

• src defines the images location. It can be a relative or absolute URL
• alt provides descriptive, alternative text for SEO and accessibility

Example:

<img src="images/manly-beach.jpg" alt="Manly Beach">

Read more at MDN Web Docs: The Image element

Image dimensions

You can set the height and/or width of an image using the attributes height and width respectively.

Note: You do not need to provide the pixel units

Example:

<img src="images/manly-beach.jpg" alt="Manly Beach" width="200" height="200">

Responsive images

Normally, CSS is used to allow the images to resize to their container to be "responsive".

Try resizing the container below by dragging the bottom right corner.

img {
  max-width: 100%;
}