Gatsby-Image Sometimes. Sanity Image Others.
Sanity is a pretty quick CMS for setting up client needs. I recently had a site that was setup to funnel all images from Sanity to Gatsby-Image. This ensured everything would be compressed/optimized. Thing is, it did it to .Gif files too. What happens then? Lotta nothin. It compresses the file out of .GIF-mode. Here is my animated .GIF:
Add in a Toggle in Sanity to Nuke Gatsby-Image on occasion and you are set. You can have your .GIF and compressed images too.
Sanity uses your secondary solution for images. In my case it loads the image/gif that was uploaded without any additional compression settings.
Here's how it's put it together.
1: Configure the figure.js schema in Sanity:
Add a boolean to the figure schema you typically use. (Lines 30-34)
2: Setup a conditional in Gatsby:
** getFluidGatsbyImage, buildImageObj, and imageUrlFor, are outlined thoroughly through the attached links.
- Lines 13-27: if gatsby-image is NOT disabled Use Gatsby-Image
- Lines 27-29: if gatsby-image is disabled use standard <img/> with sanity image setup
That's it! Now you can pick Gatsby-Image as needed.