From d4f1164f21951bc8137b5266d2ad8cc89db40c35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?=
 <axe312ger@users.noreply.github.com>
Date: Wed, 28 Feb 2018 07:37:01 +0100
Subject: [PATCH] perf(image): reduce svgo precision for tracedSVGs (#4270)

---
 examples/gatsbygram/package.json           |  2 +-
 examples/gatsbygram/src/components/post.js | 14 +++++++-------
 packages/gatsby-plugin-sharp/src/index.js  |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json
index 9a661103fbd57..f1b8ec42b4cd3 100644
--- a/examples/gatsbygram/package.json
+++ b/examples/gatsbygram/package.json
@@ -6,7 +6,7 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "gatsby": "^1.9.52",
-    "gatsby-image": "^1.0.5",
+    "gatsby-image": "^1.0.39",
     "gatsby-link": "^1.6.20",
     "gatsby-plugin-glamor": "^1.6.8",
     "gatsby-plugin-google-analytics": "^1.0.8",
diff --git a/examples/gatsbygram/src/components/post.js b/examples/gatsbygram/src/components/post.js
index ef9bf8990076c..cdf14dd2ab914 100644
--- a/examples/gatsbygram/src/components/post.js
+++ b/examples/gatsbygram/src/components/post.js
@@ -2,6 +2,7 @@ import * as PropTypes from "prop-types"
 import React from "react"
 import HeartIcon from "react-icons/lib/fa/heart"
 import Link from "gatsby-link"
+import Img from "gatsby-image"
 
 import { rhythm, scale } from "../utils/typography"
 import presets from "../utils/presets"
@@ -42,7 +43,6 @@ class Post extends React.Component {
         }}
         css={{
           display: `block`,
-          backgroundColor: `lightgray`,
           flex: `1 0 0%`,
           marginRight: rhythm(1 / 8),
           width: `100%`,
@@ -61,14 +61,11 @@ class Post extends React.Component {
             flexDirection: `column`,
             flexShrink: 0,
             position: `relative`,
-            paddingBottom: `100%`,
             overflow: `hidden`,
           }}
         >
-          <img
-            src={small.src}
-            srcSet={small.srcSet}
-            sizes="(min-width: 960px) 292px, 33vw"
+          <Img
+            sizes={{ ...small }}
             css={{
               margin: 0,
               height: `100%`,
@@ -133,9 +130,12 @@ export const postFragment = graphql`
     likes
     smallImage: image {
       childImageSharp {
-        small: responsiveSizes(maxWidth: 292, maxHeight: 292) {
+        small: sizes(maxWidth: 292, maxHeight: 292) {
           src
           srcSet
+          aspectRatio
+          sizes
+          tracedSVG
         }
       }
     }
diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
index f34bf062af4bc..827e1134ce982 100644
--- a/packages/gatsby-plugin-sharp/src/index.js
+++ b/packages/gatsby-plugin-sharp/src/index.js
@@ -757,7 +757,7 @@ function encodeOptimizedSVGDataUri(svgString) {
 
 const optimize = svg => {
   const SVGO = require(`svgo`)
-  const svgo = new SVGO({ multipass: true, floatPrecision: 1 })
+  const svgo = new SVGO({ multipass: true, floatPrecision: 0 })
   return new Promise((resolve, reject) => {
     svgo.optimize(svg, ({ data }) => resolve(data))
   })