This guide explains how you can use the gatsby-image
plugin with GraphQL queries to display optimized images inside your Gatsby pages and React components. The images are lazy-loaded with blurred SVG background, the large images are resized automatically and the meta data is stripped from images.
<Image src="sunset.png" alt="Sunset" />
The gatsby-image
plugin generates multiple versions of an image for different display/device scenarios and these are served inside the <picture>
element. Small images are embedded inline and served as base64 while SVG images are not processed by the plugin.
Here’s how the image is served inside the HTML:
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden;">
<picture
><source
srcset="
/static/images/6d161/175833.png 150w,
/static/images/630fb/175833.png 300w,
/static/images/2a4de/175833.png 600w,
/static/images/40a00/175833.png 647w
"
sizes="(max-width: 600px) 100vw, 600px" />
<img
sizes="(max-width: 600px) 100vw, 600px"
srcset="
/static/images/6d161/175833.png 150w,
/static/images/630fb/175833.png 300w,
/static/images/2a4de/175833.png 600w,
/static/images/40a00/175833.png 647w
"
src="/static/images/2a4de/175833.png"
alt="Upload files from Google Drive"
loading="lazy"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"
/></picture>
</div>
#gatsby #images