Description
Across the Layer5 repository, particularly within the Kanvas and Features sections (e.g., src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js, src/components/Features/index.js), there is extensive use of raw HTML <img> tags to render static assets. Using raw img tags bypasses Gatsby's built-in image optimization capabilities. To fix this, we need to import StaticImage from gatsby-plugin-image and replace at least 20-30 <img> instances with <StaticImage> syntax, updating CSS where necessary.
Expected Behavior
The site should use Gatsby's StaticImage or GatsbyImage for these assets. This will significantly reduce the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times, provide automatic WebP/AVIF formatting, and prevent unnecessary large cumulative layout shifts (CLS).
Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Description
Across the Layer5 repository, particularly within the Kanvas and Features sections (e.g.,
src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js,src/components/Features/index.js), there is extensive use of raw HTML<img>tags to render static assets. Using rawimgtags bypasses Gatsby's built-in image optimization capabilities. To fix this, we need to importStaticImagefromgatsby-plugin-imageand replace at least 20-30<img>instances with<StaticImage>syntax, updating CSS where necessary.Expected Behavior
The site should use Gatsby's
StaticImageorGatsbyImagefor these assets. This will significantly reduce the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times, provide automatic WebP/AVIF formatting, and prevent unnecessary large cumulative layout shifts (CLS).Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.