spottrends.blogg.se - Fluid image gatsby

Now let's investigate what do we actually need to make this work. Complexity of plugin based processing pipeline makes it a bit harder to understand than good old static site generators. Looking back I would compare Gatsby to Webpack. Getting started with something as complex as Gatsby.js is always a challenge. Yeah sure, but they didn't use it together with Netlify CMS while using beta of v2 :) Now with Gatsby v2 released things are a bit easier. I thought “Everyone talks that I can have out of the box responsive images and other cool things!”. The most popular feature, at least from my point of view, is Image Processing with gatsby-transformer-sharp. Consuming the imagesĬontrary to the StaticImage example, GatsbyImage accepts an image prop.Time has come and even I got the opportunity to try out currently trending Gatsby.js static site generator. 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. That we don't cause layout movements, as the images abruptly load.

That we don't load all the page at once, consuming bandwidth, when the visitor might not even scroll to see most of the pages.That we serve modern image formats when possible.That we serve the right image based on the device pixel density.

That the images are properly resized for each screen.If you were to include an image on a website, you have to assure: