![]() ![]() ![]() It took me a few goes to get to grips with Gatsby image, mainly because of not jumping into GraphQL. Gatsby.js makes image optimisation easy, except for one thing: if you’ve never used GraphQL before, the process might take a little while to get used too. A powerful combination: React, GraphQL and Gatsby Introducing Gatsby Image Optimisation They load quickly, in a way that looks really smooth, at the ideal resolution. Using several Gatsby components, you can easily optimise your delivery of images - complete with “blur up” animations or traced SVG placeholders - plus added optimisations, like using WebP image formats for browsers that support them. But - so far - nothing I’ve encountered comes close to Gatsby.js. Now, as a React developer, I have encountered lots of different image-processing systems and modules that make image optimisation straightforward. Trying to solve these manually was good for learning, but it was certainly not something I wanted to do again and again. But optimising the image sizes, configuring different sizes and resolutions of each image for different displays, and setting up lazy-loading with a nice “fade in” animation was a lot of work. It was an important lesson for a relatively new developer, and I set about learning how to make as many optimisations as possible. Up until this point, I hadn’t done any significant image optimisations. Far too many seconds passed by as the images slowly juddered into life. When a pushed the site live for the first time, I typed in the URL and… waited. I built it as a custom WordPress theme, and I had grand plans for a homepage filled with high-quality images of the articles. Like so many developers, my first fully-functioning site was a blog. To generate an Image Sharp we will use gatsby-plugin-sharp and gatsby-transformer-sharp, and because ImageSharp only works if the image is a File node in the GraphQL layer, we have to link our previous created node to File node.By Bret Cameron Why I believe Gatsby.js has JavaScript’s best tools for image optimisation - and how to use them A beginner’s guide to using Gatsby.js and GraphQL for image optimisation Image Credit: Ryan Searle / Unsplash In onCreateNode we will use the function createRemoteFileNode from gatsby-source-filesystem to download the image in a local file, obtaining a reference to the file afterwards. Gatsby-image component uses gatsby-plugin-sharp for image transformation and is used with Gatsby’s GraphQL queries, in the following way: This package provides the most optimized image loading performance possible for Gatsby websites, it will resize images for each device size and screen resolution, implementing progressive image loading - uses the “blur-up” effect, loading a tiny and pixelated version of the image to show while the full image is loaded. Gatsby ImageSharp uses gatsby-image, the “official image component used in building Gatsby websites”. In this article we will talk about Gatsby Image, Gatsby ImageSharp and how to load a Gatsby Image Sharp from image URL source, but if you are new to Gatsby, I highly recommend going through their official website first and familiarize yourself with how Gatsby works. ![]() Create blazing fast apps and websites without needing to become a performance expert”. “Gatsby is an open source, modern website framework that builds performance into every site by leveraging the latest web technologies such as React and GraphQL. ![]()
0 Comments
Leave a Reply. |