{"id":363526,"date":"2022-02-24T07:31:49","date_gmt":"2022-02-24T15:31:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363526"},"modified":"2022-02-24T07:31:52","modified_gmt":"2022-02-24T15:31:52","slug":"superior-image-optimization-an-ideal-solution-using-gatsby-imageengine","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/superior-image-optimization-an-ideal-solution-using-gatsby-imageengine\/","title":{"rendered":"Superior Image Optimization: An Ideal Solution Using Gatsby & ImageEngine"},"content":{"rendered":"\n

In recent years, the Jamstack<\/a> methodology for building websites has become increasingly popular. Performance, scalable, and secure, it\u2019s easy to see why it\u2019s becoming an attractive way to build websites for developers.<\/p>\n\n\n\n

GatsbyJS is a static site generator platform. It\u2019s powered by React, a front-end JavaScript library, for building user interfaces. And uses GraphQL, an open-source data query and manipulation language, to pull structured data from other sources, typically a headless CMS like Contentful.<\/p>\n\n\n\n

While GatsbyJS and similar platforms have revolutionized much about the web development process, one stubborn challenge remains: image optimization. Even using a modern front-end development framework like GatsbyJS, it tends to be a time-intensive and frustrating exercise.<\/p>\n\n\n\n

For most modern websites, it doesn\u2019t help much if you run on a performant technology but your images aren\u2019t optimized. Today, images are the largest contributor to page weight, and growing<\/a>, and have been singled out by Google as presenting the most significant opportunity for improving performance<\/a>.<\/p>\n\n\n\n

With that in mind, I want to discuss how using an image CDN as part of your technology stack can bring improvements both in terms of website performance and the entire development process.<\/p>\n\n\n\n\n\n\n

A Quick Introduction to Gatsby<\/h2>\n\n\n

GatsbyJS is so much more than the conventional static site generators of old. Yes, you still have the ability to integrate with a software version control platform, like Git, as well as to build, deploy, and preview Gatsby projects. However, its services consist of a unified cloud platform that includes high-speed, scalable, and secure hosting as well as expert technical support and powerful third-party integrations.<\/p>\n\n\n\n

What\u2019s more, all of it comes wrapped in a user-friendly development platform that shares many similarities with the most popular CMSs of the day. For example, you can leverage pre-designed site templates or pre-configured functions (effectively website elements and modules) to speed up the production process.<\/p>\n\n\n\n

It also offers many benefits for developers by allowing you to work with leading frameworks and languages, like JavaScript, React, WebPack, and GraphQL as well as baked-in capabilities to deal with performance, development iterations, etc.<\/p>\n\n\n\n

For example, Gatsby does a lot to optimize your performance without any intervention. It comes with built-in code-splitting, prefetching resources, and lazy-loading. Static sites are generally known for being inherently performant, but Gatsby kicks it up a notch.<\/p>\n\n\n

Does Gatsby Provide Built-in Image Optimization?<\/h3>\n\n\n

Gatsby does, in fact, offer built-in image optimization capabilities.<\/p>\n\n\n\n

In fact, it recently upgraded in this regard, replacing the now deprecated gatsby-image package with the brand-new Gatsby image plugin. This plugin consists of two components for static and dynamic images, respectively. Typically, you would use the dynamic component if you\u2019re handling images from a CMS, like Contentful.<\/p>\n\n\n\n

Installing this plugin allows you to programmatically pass commands to the underlying framework in the form of properties, shown below:<\/p>\n\n\n\n

Option<\/th>Default<\/th>Description<\/th><\/tr><\/thead>
layout<\/code><\/td>constrained<\/code> \/ CONSTRAINED<\/code><\/td>Determines the size of the image and its resizing behavior.<\/td><\/tr>
width<\/code>\/height<\/code><\/td>Source image size<\/td>Change the size of the image.<\/td><\/tr>
aspectRatio<\/code><\/td>Source image aspect ratio<\/td>Force a specific ratio between the image’s width and height.<\/td><\/tr>
placeholder<\/code><\/td>\"dominantColor\"<\/code> \/ DOMINANT_COLOR<\/code><\/td>Choose the style of temporary image shown while the full image loads.<\/td><\/tr>
formats<\/code><\/td>[\"auto\", \"webp\"]<\/code> \/ [AUTO,WEBP]<\/code><\/td>File formats of the images generated.<\/td><\/tr>
transformOptions<\/code><\/td>[fit: \"cover\", cropFocus: \"attention\"]<\/code><\/td>Options to pass to sharp to control cropping and other image manipulations.<\/td><\/tr>
sizes<\/code><\/td>Generated automatically<\/td>The <img><\/code> sizes<\/code> attribute, passed to the img tag. This describes the display size of the image, and does not affect generated images. You are only likely to change this if you are using full width images that do not span the full width of the screen.<\/td><\/tr>
quality<\/code><\/td>50<\/code><\/td>The default image quality generated. This is override by any format-specific option.<\/td><\/tr>
outputPixelDensities<\/code><\/td>For fixed images: [1, 2]<\/code>

For constrained: [0.25, 0.5, 1, 2]<\/code><\/td>		A list of image pixel densities to generate. It will never generate images larger than the source, and will always include a 1\u2715 image. The image is multiple by the image width, to give the generated sizes. For example, a 400px<\/code> wide constrained image would generate 100<\/code>, 200<\/code>, 400<\/code> and 800px<\/code> wide images by default. Ignored for full width layout images, which use breakpoints<\/code> instead.<\/td><\/tr>
breakpoints<\/code><\/td>[750, 1000, 1366, 1920]<\/code><\/td>Output widths to generate for full width images. Default is to generate widths for common device resolutions. It will never generate an image larger than the source image. The browser will automatically choose the most appropriate.<\/td><\/tr>
blurredOptions<\/code><\/td>None<\/td>Options for the low-resolution placeholder image. Ignored unless placeholder<\/code> is blurred.<\/td><\/tr>
tracedSVGOptions<\/code><\/td>None<\/td>Options for traced placeholder SVGs. See potrace options. Ignored unless placeholder<\/code> is traced SVG.<\/td><\/tr>
jpgOptions<\/code><\/td>None<\/td>Options to pass to sharp when generating JPG images.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

As you can see, that\u2019s quite the toolkit to help developers process images in a variety of ways. The various options can be used to transform, style, and optimize images for performance as well as make images behave dynamically in a number of ways.<\/p>\n\n\n\n

In terms of performance optimization, there are a few options that are particularly interesting:<\/p>\n\n\n\n