\n\n> Generates vectorized primitive version of images to be used as preview thumbnails.\n\n## Disclaimer\n\nThis project can create beautiful results, but this comes with the cost of processing power. It may take several seconds on your machine to generate the preview. **Make sure to invest some time and to cache your `public` folder to avoid regeneration of the previews on every build.**\n\n\nTable of contents:\n\n- [Usage](#usage)\n - [Configuring and getting the previews](#configuring-and-getting-the-previews)\n - [Options](#options)\n - [Sharp](#sharp)\n - [Contentful](#contentful)\n - [Displaying the previews](#displaying-the-previews)\n - [Pure JSX](#pure-jsx)\n - [Gatsby Image](#gatsby-image)\n- [Configuration recommendations](#configuration-recommendations)\n\n\n\n## Usage\n\n### Configuring and getting the previews\n\nWith `gatsby-transformer-sharp`:\n\n```graphql\nimage {\n sqip(numberOfPrimitives: 12, blur: 12, width: 256, height: 256) {\n dataURI\n },\n fluid(maxWidth: 400, maxHeight: 400) {\n ...GatsbyImageSharpFluid_noBase64\n }\n}\n```\n\nWith `gatsby-source-contentful`:\n\n```graphql\nimage {\n sqip(numberOfPrimitives: 30, blur: 0) {\n dataURI\n },\n fixed {\n ...GatsbyContentfulFixed_withWebp_noBase64\n }\n}\n```\n\n#### Options\n\n##### `numberOfPrimitives`: Integer, default: `10`\n\nNumber of primitive shapes of the image. This has a strong impact on the resulting size of the image. See below for more information.\n\n##### `mode`: Integer, default: `0`\n\nDetermines which type of shapes are used to generate the image.\n\n- 0: Combo\n- 1: Triangles\n- 2: Rectangles\n- 3: Ellipses\n- 4: Circles\n- 5: Rotated Rectangles\n- 6: Bezier Curves\n- 7: Rotated Ellipses\n- 8: Polygons\n\n##### `blur`: Integer, default: `1`\n\nBlur factor of the image. Reflects the deviation value of the [SVG Gaussian Blur](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur) filter. `0` disables the blur completely.\n\n##### `width`: Integer, default: `256`\n\nWidth of the input image, which is used to generate the preview. 256px is an ideal width which provides enough details and is small enough to ensure a quick generation. It is recommended to keep this value as it is.\n\n##### `height`: Integer, default: `auto`\n\nThe height of the input image, which is used to generate the preview. By default this value is calculated automatically to keep the aspect ratio of the input image. Make sure to adjust the value to reflect the desired aspect ratio of your generated sharp/Contentful thumbnails.\n\n#### Sharp\n\n##### `grayscale`: GraphQLBoolean, default: `false`\n\nUses Sharp's greyscale to convert the source image to 8-bit greyscale, 256 shades of grey, e.g.\n\nSee: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#grayscale\n\n##### `duotone`: DuotoneGradientType, default: `false`\n\nSee: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#duotone\n\n##### `cropFocus`: ImageCropFocusType, default: `sharp.strategy.attention`\n\nSee: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#cropfocus\n\n##### `rotate`: GraphQLInt, default: `0`\n\nSee: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#rotate\n\n#### Contentful\n\n##### `resizingBehavior`: ImageResizingBehavior\n\nSee: https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/change-the-resizing-behavior\n\n##### `cropFocus`: ImageCropFocusType, default: `null`\n\nSee: https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/specify-focus-area-for-resizing\n\n##### `background`: GraphQLString, default: `null`\n\nSee: https://www.contentful.com/developers/docs/references/images-api/#/reference/image-manipulation/background-color\n\n### Displaying the previews\n\n#### Pure JSX\n\n```jsx\n
\n \n \n
\n```\n\n```css\n.image-wrapper {\n position: relative;\n overflow: hidden;\n}\n.image-wrapper img {\n display: block;\n}\n\n.image-wrapper img.image {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: auto;\n z-index: 1;\n}\n```\n\n**Pros:**\n\n- No client-side JavaScript required\n- Browser cache ensures previews are not shown when a user visits the page a second time\n\n**Cons:**\n\n- All images are loaded, no matter if they are in the viewport or not\n\n#### Gatsby Image\n\nJust use it as usual with the exception that you overwrite the base64 value with your SQIP dataURI.\n\n```jsx\nconst Img = require(`gatsby-image`)\n\n\n\n// or\n\n\n```\n\n**Pros:**\n\n- Nice fade-in effect\n- Only images within the viewport are loaded\n\n**Cons:**\n\n- Requires client-side JavaScript\n- Images fade in all the time, even when the image is already in the browser cache\n\n## Configuration recommendations\n\nThe plugin offers a wide variety of settings, which affect the size of the resulting preview image.\n\nThe maximum size of your previews really depend on your current html payload size and your personal limits.\n\n- Smaller thumbnails should range between 500-1000byte\n- A single header image or a full sized hero might take 1-10kb\n- For frequent previews like article teasers or image gallery thumbnails I’d recommend 15-25 shapes\n- For header and hero images you may go up to 50-200 shapes\n\n**Generally:** Keep it as small as possible and test the impact of your image previews via [webpagetest.org](https://www.webpagetest.org/) on a 3G connection.\n\nYou may use my research repository for more detailed insights on how much the configuration can affect your payload size: https://axe312ger.github.io/embedded-svg-loading-impact-research/\n","readmeFilename":"README.md"}
![\"NPM\"](\"https://img.shields.io/npm/v/gatsby-transformer-sqip.svg\")
\n \n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/gatsby-transformer-sqip.svg\")
\n \n![\"SQIP](\"demo.gif\")
\n \n