perf(image): reduce svgo precision for tracedSVGs

Author: axe312ger

examples/gatsbygram/package.json

@@ -6,7 +6,7 @@
   "author": "Kyle Mathews <[email protected]>",
   "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",

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

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))
   })