Gatsby has detailed documentation on importing assets directly into files you could refer to for further understanding. Yes, it’s as simple as that - much like importing a component or variable and then directly using it. This can be directly used as image src Tell webpack this JS file requires this image Place it in the static folder and use it in a component file like this: import React from "react" ![]() Say you have a file named logo.svg that requires no processing. The bundler automatically copies the contents to the public folder where the final build can directly access the files. Gatsby provides a very simple process for dealing with the static group: add all the files to a folder named static at the root of the project. Now that we have things organized in some form of order, we can move onto managing each of these groups. any other image that can be processed, which are basically common image formats other than vectors.other vector files (like decorative artwork).icons and logos that require no processing.Your definitions may differ, but that grouping might look something like this: How do we group these assets? Considering our goal of efficiency and the Gatsby project structure mentioned above, the best approach would be to split them into two groups: one group that requires no processing and directly imported into the project and another group for images that require processing and optimization. Image gallery (like team head shots on an About page or something).decorative images (generally vector or PNG files).Let’s start with the common image files that we could encounter and would need to organize Read more about how the Gatsby project structure works here. The overall structure gatsby-starter-default uses looks like this: / ![]() The generated output is placed in a /public folder. While attempting to organize files, another thing to consider is that Gatsby uses a custom webpack configuration to process, minify, and export all of the files in a project. This helps us set up processing more intuitively and create a separation of concerns. It helps to organize images in some order rather than piling all of them up in a single directory on the server. Even a single page site can contain a whole bunch of image assets, ranging from icons to full-on gallery slides. Projects can easily grow in size and complexity. ![]() This is one of the benefits of using gatsby-image in the first place: it does all the resizing and compressing automatically while doing the job of setting up srcset attributes in an tag. You can read up more on how this works in the Mozilla docs. ![]() Additionally, it holds the image position which prevents page jumps as they load and you can even create blur-up previews for each image.įor responsive images you’d generally use an tag with a bunch of appropriately sized images in a srcset attribute, along with a sizes attribute that informs the layout situation the image will be used in. It is the React component that Gatsby uses to process and place responsive, lazy-loaded images. If you haven’t done it already, you should go through the gatsby-image docs. Medium uses the blur-up technique for images. Adding to the friction is that gatsby-image works quite differently from a regular tag and implementing general use cases for sites could end up complex as you configure the whole system. I found the combination of gatsby-source-filesystem, GraphQL, Sharp plugins and gatsby-image quite tedious to organize and un-intuitive, especially considering it is fairly common functionality. This helps with a smoother user experience that is faster and more appealing. With plugins and some configuration, you can even setup image preloading and a technique called blur-up for your images using Gatsby. For example, it helps you save time with image optimization because you don’t have to manually optimize each image on your own. Gatsby does a great job processing and handling images.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |