1. Add background color/small image as a placeholder

To enhance perceived performance and reduce the perceived load time, consider using placeholders such as a background color or a small, low-quality image while the full-sized image loads. This technique gives users visual feedback that content is loading and prevents the page from appearing blank during the loading process.

// language: markup
<div class="img-thumbnail">      
  <img src="hero.jpg" /> 
</div>

// language: css
.img-thumbnail {        
  position: relative;         
  height: 400px;
  width: 300px;      
  background-color: #cdcdcd; 
  /* background-image: url("placeholder.jpg"); */
}

.img-thumbnail img {
  width: 100%;     
  position: absolute;        
  inset: 0;
}

2. Avoid layout shifting by fixing size

One common issue users encounter when loading web pages is layout shifting, where elements on the page move as images load, causing a disruptive experience. To mitigate this problem, always specify your images' dimensions (width and height) in the HTML or CSS. This allows browsers to allocate space for the images before fully loaded, preventing sudden layout shifts.

// language: markup
<img src="image.jpg" alt="description" width="300" height="200">

3. Use proper size and utilize the picture tag for responsive design

// language: markup
<picture>
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <source srcset="image-medium.jpg" media="(max-width: 1200px)">
  <img src="image-large.jpg" alt="description">
</picture>

4. Lazy loading

// language: markup
<img src="hero.jpg" alt="description" loading="lazy">