Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vercel: Predefined sizes should not use image.screens #1180

Open
MickL opened this issue Jan 5, 2024 · 4 comments · May be fixed by #1181
Open

Vercel: Predefined sizes should not use image.screens #1180

MickL opened this issue Jan 5, 2024 · 4 comments · May be fixed by #1181

Comments

@MickL
Copy link

MickL commented Jan 5, 2024 •
edited

I am trying to simply resize an image:

<NuxtImg src="/img/my-image.png" sizes="400 md:600 lg:800" />

This works fine on dev where ipx is used. Deployed to Vercel however it uses the provider 'vercel' it does not work and will print warnings in the console (only on dev):

The width being used (400) should be added to image.screens. Defaulting to 575. Warning originated from /img/my-image.png.
The width being used (800) should be added to image.screens. Defaulting to 991. Warning originated from /img/my-image.png.
The width being used (600) should be added to image.screens. Defaulting to 767. Warning originated from /img/my-image.png.

What I dont understand is why the vercel-provider is even making a check like this. image.screens not related to the image width, it is used for defining screen sizes and breakpoints to load different image widths. It makes no sense to restrict image resizing just to these screen size breakpoints.

So I created a PR to remove this restriction: #1181
@MickL MickL linked a pull request Jan 5, 2024 that will close this issue
Open
@danielroe
Copy link
Member

This is a Vercel restriction; @nuxt/image is just letting you know about it. To prevent overuse of image optimisation, Vercel requires you to explicitly specify valid allows widths. (Otherwise your image optimisation endpoint could be spammed for every conceivable width....)

Some details here: https://vercel.com/docs/build-output-api/v3/configuration#images

@MickL
Copy link
Author

MickL commented Jan 5, 2024 •
edited

In this case it should use another config property because this property is for screen sizes and break points.

Right now presets could be used for that or we need a new property like allowedSizes. Personally I wouldnt use presets because they cant be used with screen sizes, e.g. the example above wouldnt work with presets:

<NuxtImg src="/img/my-image.png" sizes="400 md:600 lg:800" />

@MickL MickL changed the title Vercel: sizes does not work without predefining valid width in image.screens Vercel: Predefined sizes should not use image.screens Jan 5, 2024
@danielroe
Copy link
Member

You can define screens like this:

screens: {
  400: 400
}

@MickL
Copy link
Author

MickL commented Jan 18, 2024

This works but still I think the screens option should not be misused for defining allowed image sizes and there should be a dedicated option instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Vercel: Removed restriction to use only predefined width's MickL/image
2 participants
@MickL @danielroe