gatsby-image - npm Package Compare versions

Comparing version 1.1.0-alpha.03b9df85 to 1.1.0-alpha.3f307d61

package.json

 {
   "name": "gatsby-image",
-  "version": "1.1.0-alpha.03b9df85",
+  "version": "1.1.0-alpha.3f307d61",
   "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 @@ ],

README.md

@@ -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 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25836

increased by3.32%

Number of lines in readme file

261

increased by10.13%

No dependency changes