gatsby-image - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

index.js

@@ -88,2 +88,18 @@ "use strict";
 
+var isWebpSupportedCache = null;
+var isWebpSupported = function isWebpSupported() {
+  if (isWebpSupportedCache !== null) {
+    return isWebpSupportedCache;
+  }
+
+  var elem = typeof window !== "undefined" ? window.document.createElement("canvas") : {};
+  if (elem.getContext && elem.getContext("2d")) {
+    isWebpSupportedCache = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
+  } else {
+    isWebpSupportedCache = false;
+  }
+
+  return isWebpSupportedCache;
+};
+
 var Img = function Img(props) {
@@ -193,2 +209,8 @@ var opacity = props.opacity,
 
+      // Use webp by default if browser supports it
+      if (image.srcWebp && image.srcSetWebp && isWebpSupported()) {
+        image.src = image.srcWebp;
+        image.srcSet = image.srcSetWebp;
+      }
+
       // The outer div is necessary to reset the z-index to 0.
@@ -279,2 +301,8 @@ return _react2.default.createElement(
 
+      // Use webp by default if browser supports it
+      if (_image.srcWebp && _image.srcSetWebp && isWebpSupported()) {
+        _image.src = _image.srcWebp;
+        _image.srcSet = _image.srcSetWebp;
+      }
+
       // The outer div is necessary to reset the z-index to 0.
@@ -281,0 +309,0 @@ return _react2.default.createElement(

package.json

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

README.md

@@ -98,5 +98,11 @@ # gatsby-image
 * `GatsbyImageSharpResolutions_tracedSVG`
+* `GatsbyImageSharpResolutions_withWebp`
+* `GatsbyImageSharpResolutions_withWebp_noBase64`
+* `GatsbyImageSharpResolutions_withWebp_tracedSVG`
 * `GatsbyImageSharpSizes`
 * `GatsbyImageSharpSizes_noBase64`
 * `GatsbyImageSharpSizes_tracedSVG`
+* `GatsbyImageSharpSizes_withWebp`
+* `GatsbyImageSharpSizes_withWebp_noBase64`
+* `GatsbyImageSharpSizes_withWebp_tracedSVG`
 
@@ -112,2 +118,4 @@ ### gatsby-source-contentful
 
+If you want to automatically use WebP images when the browser supports the file format, use the `withWebp` fragments. If the browser doesn't support WebP, `gatsby-image` will fall back to the default image format.
+
 _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._
@@ -114,0 +122,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

21460

increased by6.84%

Lines of code

334

increased by7.4%

Number of lines in readme file

183

increased by4.57%

No dependency changes