Skip to content
DEV Récap

Adding Images

The <img /> tag

Section titled “The <img /> tag”

To display an image in an HTML page, we use the self-closing <img /> tag.

Basic syntax:

Section titled “Basic syntax:”
<img src="path/to/image.jpg" alt="image description" />

The src attribute

Section titled “The src attribute”

To define the source of the image, you can use:

An absolute URL

Section titled “An absolute URL”
<img src="https://placekitten.com/408/287" alt="A cute gray cat" />

A root-relative URL (starts with /)

Section titled “A root-relative URL (starts with /)”
<img src="/images/my-favorite-cat.jpeg" alt="My favorite cat" />

A relative URL to the current HTML file

Section titled “A relative URL to the current HTML file”
<img src="./pictures/my-avatar.png" alt="Profile avatar" />

The alt attribute (alternative text)

Section titled “The alt attribute (alternative text)”

Essential for:

  • Accessibility (screen readers)
  • SEO (search engines)
  • When the image fails to load

Best practices for alt:

Section titled “Best practices for alt:”
  • Be clear and precise
  • Describe the content, not the type (“image of…” → avoid)
  • Don’t overload with SEO keywords
  • If the image is purely decorative: alt=""

Example:

Section titled “Example:”
<img src="machu.jpg" alt="Machu Picchu in Peru at sunrise" />

Width and height

Section titled “Width and height”

You can define the display size of the image with width and height.

Example:

Section titled “Example:”
<img src="photo.jpg" width="300" height="400" />
Warning

If you specify only one attribute, the other will be calculated automatically. Don’t change the original aspect ratio, otherwise the image will be distorted.

Tip:

Section titled “Tip:”

Don’t load a 4000×3000 px image to display it at 300×200 px.
Optimize your images to the right size before inserting them!

Do you really need an image?

Section titled “Do you really need an image?”
  • If it’s purely decorative, use CSS (e.g., background-image) instead of an <img /> tag.
  • HTML is meant for structured information.

Complete example:

Section titled “Complete example:”
<img
  src="https://placekitten.com/300/300"
  alt="Gray cat sitting in a basket"
  width="300"
/>

Quick summary

Section titled “Quick summary”
Table : Quick summary
ElementRole
<img />Display an image
srcDefine the image source
altDescribe the image (accessibility + SEO)
width / heightDefine display size
alt=""For decorative images
Bonus tip

To test easily, use services like https://placekitten.com/ or https://picsum.photos/ to generate temporary placeholder images.