I’m hosting a recipe website on Netlify (https://metricbaker.com/) that was built with Nuxt and nuxt-content. It uses quite a few images, which are saved as pointers in the repo via git LFS. I can see the images in the repo and they have the git LFS tag, so it’s not an issue with the upload.
Since I wanted to improve my page speed score, I looked into the images and decided to convert the jpgs into webp files. I store them in the exact same way, exact same place, with the exact same name (except extension of course) and they are also fetched identically (since they’re fetched by a generic method).
When I’m running the app in dev mode or generate the page and run the index.html locally, the paths to the images are correct. However, once I pushed my changes to git and Netlify made a new build, any webp images are not pointed at correctly. The jpg images are still displayed normally (and are fetched in the exact same way, as mentioned).
For example, when I’m running my dev server, the image tag would be:
<img src="/_nuxt/assets/recipes/panna-cotta/panna-cotta-thumb.webp" alt="" class="recipe-img" data-v-0141a259="">
The same image run locally after generating the static site:
<img src="/_nuxt/img/panna-cotta-thumb.cd057d8.webp" alt="" class="recipe-img" data-v-85589460="">
Whereas on the deployed site the same images points at:
<img data-v-62941583="" src="data:image/webp;base64,dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6YzY0YTE0ZGQ3Y2E3OWU1ZTMwMGIyNDQ1NWE1NTI4NDMwODM3ODFlZWM5OTE3ZDE5ZjQ3NzZjNWM1NzZkMjQ5NQpzaXplIDEwOTAyCg==" alt="" class="recipe-img">
Am I doing something wrong in terms of Netlify? Because I cannot for the life of me find a solution to this issue.