NextJS Image optimization on Vercel generates big file size images

[eddyw]

Hi,

I'm using the default loader on NextJS 10.0.3 to deliver optimized images. Running a production build locally generates smaller file size images than on Vercel. On Vercel, they're usually twice as big than locally (MacOS Big Sur).

I added resolutions to resolve sharp library to latest or the one currently in use locally:

	"resolutions": {
		"sharp": "0.26.3"
	}

That managed to reduce Vercel generated images by around ~2kB. However, all file size images are still twice as big. The following table illustrates a comparison for some images delivered using next/image:

Local delivered image file size	Vercel delivered image file size
32.6kB	96kB
89kB	114kB
3.2kB	10kB
2.6kB	87kB (<- 30x bigger!)

This can be reproduced in the image-component example provided in the NextJS docs:
Repo: https://github.com/eddyw/image-component (clone of image-component)
Preview: http://image-component-git-master.eddyw.vercel.app/

Running locally, the example on the Intrinsic image, for instance, results in:

Local delivered image file size	Vercel delivered image file size
28.3kB	76.8kB

Is there a way to achieve a consistent behavior? this makes it impossible to fully leverage NextJS image optimization for us:

• Vercel decreases the file size of the image, but image file size is still bigger by 2x or 3x than running locally
• In certain situations when the original image is small enough, Vercel increases it's size by >2x. However, locally the image file size remains small (same or smaller than original file size)

[styfle]

Hi @eddyw

Thanks for reporting!

You should never see the image become larger than the original.

We'll take a look and see why the quality prop doesn't seem to match dev vs prod.

[styfle]

Good observation!

Are you expecting the EXIF data to be preserved or removed?

[eddyw]

I'd expect the EXIF data to be removed since it isn't actually useful in a website.

[KevinFerm]

I'm also experiencing the same issue. I'd also expect EXIF and anything not explicitly related to displaying the image to be removed, so as to save more on the file size.

It's especially bad in cases where a test case is requiring the images to be the same.

[styfle]

We'll get this fixed, thanks 👍

[styfle]

We reduced the image quality to better match sharp locally.

We are still investigating if we can safely strip EXIF metadata, thanks!

[karmeleon]

I'm getting something similar -- a large animated .webp image on my Next.js site weighs in at 1.7 MB locally with sharp installed (both in npm run dev and npm run build && npm run start flavors) and 2.4 MB deployed on Vercel. Other, smaller, non-animated .png images on the page are also around 20% smaller locally than deployed on Vercel. For my animated test image, I've found that a quality of 75 locally outputs a similar filesize to a quality of 55 on Vercel, with the local output being noticeably higher quality.

The delta between filesizes is a lot closer for me now than for OP in December, but it's still a significant hit for use cases like my blog, where images are by far the heaviest requests on the page. Is this something that Vercel considers to be a bug and will be investigating, or is this an intentional tradeoff between quality and cost that won't be improving further? If the latter, maybe I could work around it by implementing my own image optimization using serverless functions.

[eddyw]

I'm not using Next.js nor Vercel since about half year ago but I still follow the releases. I think Next.js has moved from sharp to use Squoosh (if I recall correctly) with a WebAssembly version so theoretically there shouldn't be a mismatch in the quality 🤔

Are you running the latest Next.js version?

[styfle]

Animated images are not resized, so thats why they're larger than a non-animated image like a png

[karmeleon]

Are you running the latest Next.js version?

Oh hey 11.1.0 just came out a few days ago, I'll give that a shot! Worth investigating squoosh too, should be pretty easy to tell if that's what Vercel is using under the hood.

Animated images are not resized, so thats why they're larger than a non-animated image like a png

Ah good to know! In my case though, the next/image is large enough relative to the source image that it's requesting the full-size version.

[jordanlambrecht]

Popping in after having to scour google: I'm still having this issue with animated WebP images. Local size is 577kb, served image on the production site is 2.8mb. Did anyone ever figure this out @styfle @eddyw ? Running 13.0.2

[styfle]

If you create a support case with the deployment url, the team can take a look, thanks!

https://vercel.com/help#issues

I also recommend upgrading to the latest Next.js version since 13.0.2 is nearly a year old.