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.
It seems I hadn’t thought about the interaction between git LFS and Netlify.
I found the answer in this thread.
I’d maybe just suggest to add this environment variable information (GIT_LFS_ENABLED and GIT_LFS_FETCH_INCLUDE) to the Large Media Setup docs, because these are interconnected, yet the variable information is only specified in the general environment variable section.
Seems like these two variables should just be added to the large media section to prevent issues like mine from happening, especially for people like me, who hadn’t worked with both Netlify and git LFS before.
Hi, @acelinsek. Actually, these environment variables cannot be used with Large Media.
If you are using Large Media (and not some other Git LFS service) you cannot and must not use the GIT_LFS_ENABLED and GIT_LFS_FETCH_INCLUDE environment variable. These environment variables are used for all other Git LFS services except Large Media.
You site is using those environment variables and Git repo it uses is using Git LFS but your site is not using Large Media.
Please note that Large Media and Git LFS are not the same thing (although, they are related). Large Media is one Git LFS service (one which enables browse time image transformations) but it is not the default Git LFS for sites with Git repositories linked.
Unless Large Media is manually activated, the Git LFS service used will be the service provided by the Git repository host (GitLab, Bitbucket, GitHub).
If you use the Git host’s Git LFS service then , yes, you must use GIT_LFS_ENABLED=true. This is used for sites using all other Git LFS services besides Large Media. However, it cannot be enabled for Large Media itself.
As you stated, the environment variables themselves are covered in our documentation here. I do think we should have a Support Guide which covers the topics above and I will write that guide soon.