Next.js Discord

Discord Forum

Can I deliver different image files/sizes depending on screen size with next image?

Unanswered
Plott Hound posted this in #help-forum
Open in Discord
Plott HoundOP
I’m trying to optimise my site images for mobile and large screens. What’s the best way to do this?

2 Replies

Plott HoundOP
bump
Cape lion
Hey, I'd know if there are any best practices around this as well. Right now, it seems like I can do this for images using "fill", by providing a sizes array, but what would I do for example, if I want the image to have fixed dimensions, but it should be a lot smaller on mobile than on desktop?

I don't want to check the viewport size client-side (like in the example below), because that will cause layout shift and is a bit inefficient. Any ideas?

  <Image
          src={src}
          width={isMobile ? 64 : 100}
          height={isMobile ? 64 : 100}
          alt={alt}
        />