Skip to content
finote

01. Images

Introduction

Section titled “Introduction”

Images are essential for creating visually appealing and informative web pages. The HTML <img> element embeds images into web documents. Understanding how to properly use images, including attributes like src, alt, and responsive techniques, is crucial for creating accessible and performant websites.

Basic Usage

Section titled “Basic Usage”
<img src="image.jpg" alt="Description of the image">

Essential Attributes

Section titled “Essential Attributes”

src

Section titled “src”

Image source URL:

<img src="photo.jpg" alt="Photo">
<img src="/images/photo.jpg" alt="Photo">
<img src="https://example.com/image.jpg" alt="Photo">

alt

Section titled “alt”

Alternative text (required for accessibility):

<img src="logo.png" alt="Company Logo">

Common Attributes

Section titled “Common Attributes”

width and height

Section titled “width and height”

Specify dimensions:

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

loading

Section titled “loading”

Lazy loading:

<img src="photo.jpg" alt="Photo" loading="lazy">

srcset and sizes

Section titled “srcset and sizes”

Responsive images:

<img src="photo.jpg"
     srcset="photo-small.jpg 300w, photo-large.jpg 800w"
     sizes="(max-width: 600px) 300px, 800px"
     alt="Photo">

Best Practices

Section titled “Best Practices”

Always Include alt

Section titled “Always Include alt”
<!-- Good: Descriptive alt text -->
<img src="sunset.jpg" alt="Beautiful sunset over the ocean">


<!-- Avoid: Missing or empty alt -->
<img src="sunset.jpg">
<img src="sunset.jpg" alt="">

Optimize Images

Section titled “Optimize Images”
  • Use appropriate formats (WebP, JPEG, PNG)
  • Compress images
  • Use responsive images
  • Consider lazy loading

References

Section titled “References”