![]() Consuming the imagesĬontrary to the StaticImage example, GatsbyImage accepts an image prop. If that's not possible, this option is for you. Gatsby allows us to do some transforms too:įrankly, Gatsby is a bit notorious for its build times, so I would advise to do a pre-processing to avoid transforming the same images again and again. Here are the first three options side to side. Looks better with the background prop set. DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.TRACED_SVG: a low-resolution traced SVG of the image.BLURRED: (default) a blurred, low-resolution image, encoded as a base64 data URI.PlaceholdersĮverything is in order, but we probably want a smooth fallback. This setting will make sure to include copies for both jpg and webp, even if we don't specifically request for the latter. If your images don't go through the Gatsby GraphQL layer, you can use StaticImage If the image is the 404 illustration, the image of a section, or something ephemeral, inlining is the best way to go.If the image is part of a collection, like the cover of a blog post, you will have an easier time with GraphQL.If the image comes from a remote source, you're already using GraphQL.That said, with the latest gatsby-plugin-image we have the solution, and we can safely go one way or the other depending on the use case. If you had a simple local image but wanted a cool blur effect, you had to go through GraphQL. That resulted in an unnecessary boilerplate. But for everything outside the GraphQL layer, there wasn't anything. To help with the images that these sources include, the Gatsby team & collaborators added a set of utilities to optimize them. Fetch the data (instagram, wordpress, etc), push them into the GraphQL layer, and populate your pages based on that data. ![]() Gatsby is a fantastic framework if you want to consume data from various remote sources. Thankfully, now it's possible with the help of the StaticImage component. Up to recently, if you didn't want to go the GraphQL route, you were all out of luck. Thankfully, Gatsby offers some nice utilities, bundling all the steps required into a single tool-chain, letting us focus on other things.
0 Comments
Leave a Reply. |