Image Optimization
The gatsby-transformer-sharp
and gatsby-plugin-sharp
plugins are used to optimize images for different screen sizes and devices. This includes resizing, compressing, and serving optimized images.
The plugins are configured to generate different image sizes based on the srcSet
attribute in the image tag. For example, the following code will generate images with sizes of 200px, 400px, and 800px:
<img srcSet="
image-200.jpg 200w,
image-400.jpg 400w,
image-800.jpg 800w
" />
The gatsby-transformer-sharp
plugin will also automatically create webp versions of the images, which are typically smaller in file size and load faster.
The gatsby-plugin-sharp
plugin provides a gatsbyImageData
prop that can be used to generate responsive images. The gatsbyImageData
prop takes an object with options for customizing the image output. For example, the following code will generate a responsive image with a maximum width of 800px:
import { GatsbyImage, getImage } from "gatsby-plugin-image"
const image = getImage(
{
file: 'image.jpg'
formats: [`AUTO`, `WEBP`],
breakpoints: [300, 600, 900],
},
);
<GatsbyImage image={image} alt="Image Alt" />
This will generate a series of images for different breakpoints, using the webp format where available. These images will be automatically loaded based on the screen size and device.
The use of gatsby-transformer-sharp
and gatsby-plugin-sharp
allows for efficient image optimization, resulting in improved page load times and reduced bandwidth consumption.
Top-Level Directory Explanations
src/ - This directory contains the source code for the Cilium project.
src/components/ - This directory contains components used in the project.
src/hooks/ - This directory contains hooks used in the project.
src/layouts/ - This directory contains the layouts used for the project’s website.
src/pages/ - This directory contains the pages for the project’s website.