feat: use nuxt image module #26
Conversation
|
@pi0 is attempting to deploy a commit to the Nuxt Movies Team on Vercel. To accomplish this, @pi0 needs to request access to the Team. Afterwards, an owner of the Team is required to accept their membership request. |
|
@pi0 |
|
PR LGTM @pi0. Thanks for filing it. I am keen for us to better understand the gaps left for image loading once |
|
FYI: I'm looking into this PR and gathering some discussing points regarding the best practices in loading images. |
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nuxt-movies/nuxt-movies/zlb072jwb |
|
@pi0 |
|
I think |
|
I found that the performance has improved to a great extent by using |
|
The project originally applied aspect-ratio to images using CSS. What do you think? |
|
Hi @anton-karlovskiy thanks for update.
|
|
Thank you for the update
Yes, it's still occurring. And whenever refreshing the site, errors are stacked in the server console. I guess this error occurs to every new image URL.
The version still appears to be 0.02.
Then I will get rid of the original CSS aspect-ratio and use the aspect-ratio feature of
It's what I wanted to ask because we have failed |
As far as I know, TMDB does not provide WebP format images for now. |
|
I've tried with width and height set up. One thing I've noticed is according to the docs: Could you please teach me what's wrong? Thank you. |
|
@pi0 @atinux @danielroe cc @addyosmani The original project had the transition (animation) when lazy-loading images using CSS. As we got rid of the original Should we use https://vuejs.org/v2/api/#transition for replicating this animation or does the The original project: https://movies.jason.codes/person/90633 The current project: https://nuxt-movies-d4lvpnplw.vercel.app/ |
|
Hi @pi0 |
|
Hi @pi0 Could you possibly share with me some demo projects using |
|
Dear @anton-karlovskiy as mentioned before we are developing image module so that are no reference projects using it out there! (a simple demo is planned to publish during announcement) |
| if (width) { | ||
| operations += 'w' + width; | ||
| } | ||
| if (height) { | ||
| operations += (operations ? '_and_' : '') + 'h' + height; | ||
| } | ||
| if (operations) { | ||
| operations += '_bestv2'; | ||
| } |
There was a problem hiding this comment.
It will be broken because the predefined TMDB size prefix strings are not consistent with the implementation.
|
Thank you for letting me know about the demo projects. |
|
@anton-karlovskiy Please see my comment regarding CDN changing. It probably worth doing it instead of working around for directly using TMDB url (replacing current provider i added) since it doesn't meet resize features we need for responsive sizes.... |
|
Regarding:
Do you mean the following comment?
To be honest, I think I have not understood it correctly. |
|
Issue is, image optimizers like cloudinary or imgix, allow setting size parameters to any value while with
For a static generated website, we can use |
|
Thank you for your explanation. One thing I'm concerned about is if we use that approach, I'm wondering if the website will end up experiencing And as long as there are some services providing a set of predefined image sizes like TMDB, I'm just wondering if we would be able to adapt to such services by opening a way to just using the native Out of curiosity, does |
|
Do you think the free pricing plan (https://cloudinary.com/pricing) is enough for our project? |
Actually we pass original image to CDN to resize it (so end users never download original size) @anton-karlovskiy Please be patient before using Cloudinary 😄 We are in parallel working on image module and solutions around it and I'm trying to keep you updated. Ideally it should be best if we don't ask users to use a 3rd party service and doing it with less possible configuration. For vercel, finally they have to provide us resizer endpoint (which is currently only available for nextjs) but in the meantime we have an opensource solution (IPX) that can be added as a serverless function.
You can always use
Yep it also generates I would appreciate if you can wait until i finish PR for cdn part and merge then feedbacks more than welcome for image module improvements :) Our goal is not having performant website but advocate a way to make performant websites with nuxt. |
…et by modifiders turn to undefined in the provider
|
Thank you for explaining. :) |
|
No worries @anton-karlovskiy <3 BTW feel free merging this PR as is so you can focus on working on other areas. I can open next one for CDN migration |
|
Yes, then after an hour or so of work, I'm going to merge this PR. |
|
The placeholder images for videos are broken. They should use another baseURL but Is there any way to use different base URLs per image? |
|
@anton-karlovskiy Yes we do support multi-providers too. I guess using |
| let operations = ''; | ||
| if (width) { | ||
| operations += 'w' + width; | ||
| } | ||
| if (height) { | ||
| operations += (operations ? '_and_' : '') + 'h' + height; | ||
| } | ||
| if (operations) { | ||
| operations += '_bestv2'; | ||
| } |
There was a problem hiding this comment.
This might not be always true.
Actually, episode images are broken as w400_bestv2 is not available. Probably og:images will be broken as w500_bestv2 is not available.
There was a problem hiding this comment.
No worries, I can fix this.
|
Sorry i have to close since have no enough time to track at the moment. Will reopen after supporting CDN so have no issues |
|
Oh, I was going to merge this PR. |
|
@anton-karlovskiy If it is okay that there are known issues (broken images, limited sizes) i highly advice to merge and avoid stacking stuff in same PR. Otherwise if you prefer a clean change with final ideal changes then we shall wait :D |
|
OK, then I think I will merge this PR and work on another area. |
Resolve #25 by using
<nuxt-img>tag andloading="lazy"(internally using intersectionObserver for maximum browser compatibility but usage is consistent with native<img>tag)This is initial step for integrating image module.
By providing
widthandheightattributes component can also generate responsive urls (srcset) and also we have possibility to use more advanced<nuxt-picture>element for posters which automatically uses modern format (like webp), fallback, highres/responsive variant and blurry image for placeholder. For this we need to pass CDN resizing arguments which I would suggest doing in another PR.