Responsive Images: srcset and sizes Best Practices

·5 min read
ResponsivesrcsetHTML
Alex Chen· Image Performance Engineer

The Problem

A single 2000px image served to a 375px phone wastes 80% of bandwidth. Responsive images solve this.

srcset Explained

...

The browser picks the best size based on viewport width and pixel density.

Recommended Breakpoints

  • 320w: Small phones
  • 640w: Large phones
  • 768w: Tablets portrait
  • 1024w: Tablets landscape / small laptops
  • 1536w: Desktops
  • 2048w: Large/retina displays

    • Art Direction with picture

    Use when you need different crops for different screen sizes, not just different resolutions.

    Related Guides

  • Core Web Vitals Image Optimization
  • Image Optimization for Next.js

    • Ready to optimize your images?

    Try BulkPicConv — Free