gatsby-image - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

index.js

@@ -227,2 +227,9 @@ "use strict";
           }),
+          image.tracedSVG && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            src: image.tracedSVG,
+            opacity: !this.state.imgLoaded ? 1 : 0,
+            transitionDelay: "0.25s"
+          }),
           bgColor && _react2.default.createElement("div", {
@@ -296,2 +303,9 @@ title: title,
           }),
+          _image.tracedSVG && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            src: _image.tracedSVG,
+            opacity: !this.state.imgLoaded ? 1 : 0,
+            transitionDelay: "0.25s"
+          }),
           bgColor && _react2.default.createElement("div", {
@@ -298,0 +312,0 @@ title: title,

package.json

 {
   "name": "gatsby-image",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -19,3 +19,3 @@ # gatsby-image
 * Efficiently lazy load images to speed initial page load and save bandwidth
-* Use the "blur-up" technique to show a preview of the image while it loads
+* Use the "blur-up" technique or a "[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)" SVG to show a preview of the image while it loads
 * Hold the image position so your page doesn't jump while images load
@@ -98,4 +98,6 @@
 * `GatsbyImageSharpResolutions_noBase64`
+* `GatsbyImageSharpResolutions_tracedSVG`
 * `GatsbyImageSharpSizes`
 * `GatsbyImageSharpSizes_noBase64`
+* `GatsbyImageSharpSizes_tracedSVG`
 
@@ -109,4 +111,6 @@ ### gatsby-source-contentful
 
-If you don't want to use the blur-up effect, choose the fragment with `noBase64` at the end.
+If you don't want to use the blur-up effect, choose the fragment with `noBase64` at the end. If you want to use the traced placeholder SVGs, choose the fragment with `tracedSVG` at the end.
 
+_Please see the [gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/#tracedsvg) documentation for more information on `tracedSVG` and its configuration options._
+
 ## "Resolutions" queries
@@ -126,3 +130,3 @@
     resolutions(width: 400) {
-      # Choose either the fragment including a small base64ed image or one without.
+      # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
       ...GatsbyImageSharpResolutions
@@ -150,3 +154,3 @@ }
     sizes(maxWidth: 700) {
-      # Choose either the fragment including a small base64ed image or one without.
+      # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
       ...GatsbyImageSharpSizes_noBase64
@@ -153,0 +157,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

20086

increased by5.24%

Lines of code

311

increased by4.71%

Number of lines in readme file

175

increased by2.34%

No dependency changes