2/1/2024 0 Comments Fluid image gatsbygatsby-image doesn't take image urls directly like a normal tag does, but instead, takes a special fluid or fixed type that optimizes the images differently. GQL queries will also need to be updated to return fixed or fluid images. The static images can be easily fixed by replacing all uses of with from gatsby-image. Instead of manually optimizing each static image we can let gatsby-image do this for us. Some of the images are lossless compressed PNGs that can be JPGs instead, and some of them are already JPGs but their sizes far exceed the size of the container they're in. This example comes from a page with many images that are being used as-is with no post-processing in the site build. We found that many of our static images weren't compressed as optimally as they could be and were inflating page sizes. ![]() We have images that are both statically hosted, and images that are hosted in Contentful. Our Labs website is written using Gatsby, and uses images in many places. Hopefully this post guides you through querying GraphQL for your own Gatsby project, and how to display images correctly using the benefits of Gatsby Images.□Performance: Optimizing Images on Gatsby Sites I got stuck several times during the process of trying to query through my images with GraphQL, and then again displaying them correctly as Gatsby Images. To view the playground, run your Gatsby development server and visit: Making it Work It will help you identify what is being held in your GraphQL data and how to get to it, and doing some digging around will help you understand how GraphQL queries work. The Gatsby GraphQL playground is particularly fun to play around with and test your queries. Run Gatsby Development Server and view GraphQL Playground To overcome this issue, many developers make use of Flexbox instead of float, to shape and align images on the page. One issue developers might notice while implementing Gatsby Images is that they break with the use of CSS float properties. Using Flexbox vs Float (Float breaks Gatsby Image) To consolidate and DRY up multiple pages that might put into use the same Gatsby Image queries, you can create a component with the Gatsby Image query, and pass URL paths as props. ![]() Making Gatsby Image a component, and passing URL path as props. RelativePath: Įnter fullscreen mode Exit fullscreen mode The original way to import an image into React is through The benefits of using Gatsby Images were a major benefit for my portfolio site, so I opted to learn how querying in GraphQL works so I would then be able to individually place a fast loading Gatsby Image on demand. Gatsby-images is a react component that lazy-loads images with a blur-up effect, speeding up page loading times dramatically and holding image positions until loaded. One plugin that Gatsby does very well is Gatsby-images. Static site generators create blazing fast single page applications, and also allow for a quicker and simplified development process with multiple available plugins. I struggled hard at figuring out how to use the gatsby-image plugin, and how to query GraphQL assets to display individual images on in the correct spot.įor many reasons React developers are choosing to use static site generator such as Gatsby or Next.js. This was the case for me when learning to use Gatsby, and how GraphQL works. When learning new tools, often times the most challenging parts will lead to the coolest features and benefits.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |