gatsby-image
Advanced tools
Comparing version 1.1.0-alpha.8c822451 to 1.1.0-alpha.926cb6da
{ | ||
"name": "gatsby-image", | ||
"version": "1.1.0-alpha.8c822451", | ||
"version": "1.1.0-alpha.926cb6da", | ||
"description": "Lazy-loading React image component with optional support for the blur-up effect.", | ||
@@ -13,2 +13,3 @@ "main": "index.js", | ||
"gatsby", | ||
"gatsby-component", | ||
"react-component" | ||
@@ -15,0 +16,0 @@ ], |
@@ -34,3 +34,3 @@ # gatsby-image | ||
Doing this consistantly across a site feels like sisyphean labor. You manually | ||
Doing this consistently across a site feels like sisyphean labor. You manually | ||
optimize your images and then… several images are swapped in at the last minute | ||
@@ -60,4 +60,26 @@ or a design-tweak shaves 100px of width off your images. | ||
This is what a component using `gatsby-images` looks like. | ||
## Install | ||
`npm install --save gatsby-image` | ||
Depending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config. | ||
``` | ||
npm install --save gatsby-transformer-sharp | ||
npm install --save gatsby-plugin-sharp | ||
``` | ||
Then in your `gatsby-config.js`: | ||
``` | ||
plugins: [ | ||
`gatsby-transformer-sharp`, | ||
`gatsby-plugin-sharp` | ||
]; | ||
``` | ||
## How to use | ||
This is what a component using `gatsby-image` looks like: | ||
```jsx | ||
@@ -78,3 +100,3 @@ import React from "react"; | ||
childImageSharp { | ||
# Specify the image processing steps right in the query | ||
# Specify the image processing specifications right in the query. | ||
# Makes it trivial to update as your page's design changes. | ||
@@ -90,2 +112,4 @@ resolutions(width: 125, height: 125) { | ||
For another explanation of how to get started with gatsby-image, see this blog post by community member Kyle Gill [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e) | ||
## Two types of responsive images | ||
@@ -92,0 +116,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
25836
261