A tiny, base64 version of the image gets inlined into the document, while the larger version is loaded and overlayed on top. The <img>
element for the full-size version has a srcset
attribute, so the browser will only download the resolution that it needs.
NPM Dependencies:
gatsby-plugin-sharp
gatsby-transformer-sharp
styled-components
auto-bind
<Image info={this.props.data.img} />
The info
prop needs to come from your page's graphql query.
Here's an example query, assuming that your image is named splash-bg.jpg
:
img: imageSharp(id: { regex: "/splash-bg/" }) {
...imageInfo
}
The width
and height
props accept any CSS <length>
values.
- Set only one value, and the other will be set automatically based on the image's aspect ratio.
- Set both values, and the image will scale to cover the area you've defined.
<Image info={this.props.data.img} width='100%' height='50vh' />
The fill
keyword is shorthand for width={100%} height={100%}
<Image info={this.props.data.img} fill />