Home
Support Forums

LFS image is just a small quite square

I have a website that uses a combination of react and non-react (housed under /public). The non react LFS images all work fine, and the react images also work ok locally only.

But on a deploy preview, this page: Refcode Community the top banner image does not work. It’s a CSS background image. The URL to it is:

background-image: url(../../media/bannerBackgrounds/connections.jpg);

^ that corresponds to the path src/media/bannerBackgrounds/connections.jpg in my project.

After being parsed by the LFS system creates this:

background-image: url(data:image/jpeg;base64,dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6MzJjOTAwODM1N2M3NDUyYmJmMDEwYmRhYzRiM2NhMDI2MTA0ZGZhOTlhZDJjM2U0NjcyNTQ2MDkwZDQwOTk2NQpzaXplIDcxNzE1NAo=);

The above image is not a 404, but rather is a small white square.

Hi, @brenton. Let’s take a look at that base 64 encoded image data:

dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6MzJjOTAwODM1N2M3NDUyYmJmMDEwYmRhYzRiM2NhMDI2MTA0ZGZhOTlhZDJjM2U0NjcyNTQ2MDkwZDQwOTk2NQpzaXplIDcxNzE1NAo=

Below I am using the base64 command line tool to decode that text:

$ echo 'dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6MzJjOTAwODM1N2M3NDUyYmJmMDEwYmRhYzRiM2NhMDI2MTA0ZGZhOTlhZDJjM2U0NjcyNTQ2MDkwZDQwOTk2NQpzaXplIDcxNzE1NAo=' | base64 --decode
version https://git-lfs.github.com/spec/v1
oid sha256:32c9008357c7452bbf010bdac4b3ca026104dfa99ad2c3e4672546090d409965
size 717154

The output above is the last three lines. If you are familiar with Git LFS you will recognize those as a Git LFS pointer:

version https://git-lfs.github.com/spec/v1
oid sha256:32c9008357c7452bbf010bdac4b3ca026104dfa99ad2c3e4672546090d409965
size 717154

Based on this, it seems clear that your site build is attempting to embed images as base64 encoded text into the HTML during the site build. This is a common practice and many static site generators do this. However, this is a “build time” image transformation and Large Media is incompatible with build time image transformations.

Quoting the Large Media documentation section on limitations, it says the following:

  • Files tracked with Large Media are uploaded directly to the Netlify Large Media storage service on push, completely bypassing the site build. This saves build time, but also means that the files are not available to tools that process asset files during the build, such as Hugo’s image processing or the gatsby-image plugin. Depending on your needs, you may be able to replace this functionality with Netlify’s image transformation service.

To summarize, your site’s build is doing build time image transformation (the base 64 encoding is a transformation of the image) and this won’t be possible with Large Media.

The solutions for this are to stop doing the build time image transformations or to remove the Large Media add-on from the site.

Note, you can do build time image transformations with third-party Git LFS services - it just doesn’t work when Large Media is used.

If there are other questions or if you want to disable Large Media (and, if so, please read this support guide first), please let us know.