image
image copied to clipboard
nuxt
Make `width`, `height` and `alt` required props
Hey there!
In Nuxt Cloudinary module we have these props as required to promote good practices for images.
If you omit these props, popular tools such as Lighthouse can report this as an issue.
Do you think that we could add these props to Nuxt Image as well as required? Or maybe add a warning in the console that you should add them to have better score and overall :)
I can create a draft PR with this change if you would like to test how it works :)
The console warning is a particularly useful addition. Waiting for the draft
There are cases where leaving the alt attribute empty makes sense. For example, decorative images that don't add meaningful context can be hidden from screen readers by using alt="". This helps keep the experience clear and focused for users relying on assistive technologies.
Thanks for the comment @madc
What about then checking if an alt is empty but provided in this case? So if a user will not provide prop it will display warning but but if they pass an empty string it will not display a warning? :)
Width and height can be auto generated. Let's assume demo.jpg is 2000x2000.
I think this <NuxtImg src="/demo.jpg" sizes="sm:50vw md:400px" /> should be interpreted as <NuxtImg src="/demo.jpg" sizes="50vw md:400px" />.
And following this logic I don't see the need for sizes, as it's possible to do extend width syntax:
<NuxtImg src="/demo.jpg" width="50vw md:400px" /> that would be <img width="160" height="160"> - src as fallback gets the smallest image, 50vw of smallest screen is 320*50% = 160. The image ratio is 1:1, so height is also 160.
With pixel-sizes it's even easier:
<NuxtImg src="/demo.jpg" width="500px md:800px" /> would be <img width="500" height="500">
And empty width:
<NuxtImg src="/demo.jpg" /> would be <img width="320" height="320"> - src as fallback gets the smallest image, the size of xs screen. The biggest width is the original image or the largest breakpoint.
Sounds reasonable.
I wonder if this approach will not indicate to users that they could be using sizes for optimized images (in Lighthouse for example) and the users will try to use while it will no longer be needed.
And for the alt we could check if it was not provided (including the comment above) and if user will not provide anything, show a warning in the console.
WDYT?
@razbakov The width/height size doesn't matter (as the actual size of the image can be set in CSS), it's only the aspect ratio that is significant to the browser. Your example assumes we know it's square. If that's the case, you can just set width and height; this will work fine on any screen size.
More generally, it would be a very nice enhancement to support detecting sizes of images at build time, perhaps only with ipx provider.
I would also be up for (as an easy first step) showing a warning in development when height/width are omitted. (Later we can move this to the nuxt/hints module - cc: @Baroshem!)
More generally, it would be a very nice enhancement to support detecting sizes of images at build time, perhaps only with ipx provider.
Yes please! For ipx, height and width are known during the build and could be rendered as attributes to <img>, reducing work for the user and also the risk for unintended inconsistencies between the specified and actual image dimensions.
Making height and width mandatory would prevent that enhancement.
I never use width and height. I always uses sizes instead. Possibly also all of them could be omitted to display the original image.
Therefor I dont think any of these values should be required.
I never use
widthandheight. I always usessizesinstead. Possibly also all of them could be omitted to display the original image.Therefor I dont think any of these values should be required.
It's important for SEO to improve Google Pagespeed and to avoid layout shift and for this setting width and height is required
How would you set width and height for multiple different screen sizes e.g. mobile, tablet, etc?
Yeah, you are right. Here is what I found - https://stackoverflow.com/questions/67733589/pagespeed-warning-use-explicit-width-and-height-on-image-elements