Step 7: Image Size Issues

The Problem

Loading full-size images regardless of the device's screen size wastes bandwidth and slows down page load. Check the Network tab to see the actual image sizes being downloaded.

Issues:

  • Mobile devices download desktop-sized images
  • Unnecessary bandwidth usage
  • Slower page load times
  • Higher data costs for users

Problematic Code:


<img
  ngSrc="https://picsum.photos/1080/720"
  width="1080"
  height="720"
  alt="Large image"
/>

Open Chrome DevTools, go to the Network tab, and check the size of images being downloaded. Try resizing your browser window - the same large images are always downloaded.

Large image

This image is always 1080x720 pixels, even on mobile devices. Check the Network tab to see its size.

Card image 1

Card 1

Card image 2

Card 2

Card image 3

Card 3

Card image 4

Card 4