App Router

acme.com
/responsive-image/

Responsive Images (with same asset + LCP optimization)

Image Component With Layout Responsive

Dingo
  • The image is automatically resized by NextJS.
  • When using priority=true a preload link is added to the <head /> tag using the corresponding srcSet.
  • This srcSet is created based on the NextJS sizes.
  • To use multiple sources, this needs to be handled differently.