Improving Site Performance with imgix
Using imgix is a great way to improve your site or app’s performance by decreasing page weight without affecting the quality of your images. This guide covers in detail the many ways imgix can make your site snappy.
Using imgix’s Content Delivery Network
By default, imgix serves all of your images through a global content delivery network (CDN) to ensure that your images load as quickly as possible through one of our 23 POPs. No need to bring or configure your own CDN; your images will always be delivered as quickly as possible.
Reducing Image Data
Cameras and display capabilities are increasing all the time, which drives up the size of your master images—even a sample smartphone camera image (with compression) weighs in at 1.4MB and 3264×2448 pixels. Variations in the image data and file format can increase the file size further. As a result, decreasing the amount of raw data contained in an image to just what is needed is the most straightforward way to reduce its file size.
From a raw pixel perspective, every 100×100 pixels you remove from an image is almost 40KB. Similarly, for images with large areas of the same color, reducing the color palette can give you solid size savings without an obvious difference in quality. By not fetching extraneous data, pages on your site or application will load and paint much faster. You can see a breakdown of potential savings in our Improving Image SEO guide.
Resizing is the easiest way to remove unnecessary data from an image. Images are often served out much larger than needed for a page, which adds to the page weight considerably. By resizing your images with imgix, you ensure that you deliver the exact amount of data required and not a pixel more, without having to create multiple versions for different devices or viewport sizes.
The most common method of resizing images on imgix is with pixel-based sizes using the width (
w) and height (
h) parameters. Any image served through imgix can be resized dynamically. Whenever a
h parameter is set and has a value over
1, the the image is resized to new pixel dimensions. For example, this original image is much too large for most applications.
Original (resized to 30% for display here)
- File Size: 1.99MB
- Dimensions: 1942×2913 pixels
Resized for Web — 600 pixels high
- File Size: 95kB
- Dimensions: 400×600 pixels
Similarly, you can resize for a mobile browser or a thumbnail display and save even more.
Resized for Mobile — 200 pixels high
- File size: 15kB
- Dimensions: 133×200 pixels
Pixel-based sizing works well with the
crop parameters when dealing with a known container size and image content at varying sizes, enabling you to center the most relevant part of the image in the container.
imgix also supports percentage-based sizing using the
h parameters. This method is especially useful when looking to scale down a large library of images by the same amount—for example, to 10% of the original images’ dimensions.
To resize the image based on a percentage, you set the
h parameter to a value between
1. For example, setting a 1000-pixel image to
w=0.5 will result in an image 500 pixels wide, with a corresponding 50% decrease in height.
Maintaining Aspect Ratios
If maintaining aspect ratios while resizing images is a concern, use the
fit=clip parameter. By setting
fit=clip, the image will always fit within the size specified by
h while maintaining its aspect ratio. Let’s see this in action:
Original (resized to 15% for display here)
- File size: 7.0MB
- Dimensions: 5615×2907 pixels
Now, we want to scale this image down to be at most 600×400, but maintaining the aspect ratio:
Resized to fit 600×400 container
- File size: 55kB
- Dimensions: 600×311 pixels
The resulting image is 600×311 pixels. Notice that the exact aspect ratio of the original image is maintained. In cases like this where the requested dimensions don’t match the existing aspect ratio, the
w parameter defines the max size, and the
h parameter is adjusted from the requested size to the dimension that keeps the aspect ratio correct.
Cropping Images to the Container
Another way to reduce the amount of data in an image is to crop it to just the most meaningful part, so the extraneous content isn’t displayed. In effect, it allows you to zoom in on the image if the resolution of the original has enough data to allow it. This method also allows you to easily change the aspect ratio of an image to highlight one section.
Resized to 800 pixels wide
- File size: 105kB
- Dimensions: 800×414 pixels
Suppose we now want to focus the viewer on the part of the image where the person is, but in a vertically-oriented container. We can do this by changing the height parameter so it’s larger than the width, and setting
fit=crop parameter to exclude the rest of the image.
Cropped to fit vertically-oriented container
- File size: 46kB
- Dimensions: 250×414 pixels
Now we have a more visually striking image, with a 58% reduction in file size compared to the full image at the same height.
Supporting HiDPI Environments
Supporting high-density screens can be difficult with a large media library. New pixel densities are constantly being introduced, and can require reprocessing of entire image libraries to ensure the best experience. imgix’s
dpr parameter is an easier way to deliver the same image at different device-pixel ratios. This eliminates the need to scale down a larger image for lower-DPI environments or maintain a copy of the image in multiple sizes to support different screen densities.
Let’s see how this works in practice. We’ll start with a long-exposure night shot, sized to fit a web page on a standard monitor (
dpr=1 by default, if unset).
Original (600×400 pixels)
Now let’s say we want to serve this image on an Apple Retina device, like an iPhone 6. The device-pixel ratio on these devices is 2: for every logical pixel, there are 2 pixels lengthwise and widthwise on the screen. To serve more pixels to these devices, we simply add the
dpr=2 parameter. (This version will look sharper on a Retina display.)
dpr=2 (1200×800 pixels)
The resulting image is 1200×800, twice as large in each raw dimension. This easily drops into existing containers sized to 600×400 logical pixels.
dpr parameter will also work with sub-pixel values, like
1.5. This is useful for dealing with other platforms like Android. The
srcset attribute makes managing multiple pixel densities easy; in brief, you can manage all of the platforms listed above with one line of code:
<img srcset="https://assets.imgix.net/guide-site-perf-ocean.jpg?w=400 1x, https://assets.imgix.net/guide-site-perf-ocean.jpg?w=400&dpr=2 2x, https://assets.imgix.net/guide-site-perf-ocean.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/guide-site-perf-ocean.jpg?w=400">
See our tutorial about using
srcset with imgix for more information.
Once you’re only serving the pixels you need, the next step is to compress the image to reduce the file size further. imgix offers several compression methods that can be used separately or together.
Choosing a File Format
Different image file formats are best for compressing different types of images, and some are only supported by certain browsers. For example, transparency is only supported by the GIF, PNG, and WebP formats, and WebP is currently only supported in the Chrome, Opera, and Android browsers. The type of image also matters; if it’s a photograph with a lot of detail, for example, one of the JPEG formats is likely to be your best bet. Google has an excellent article about image formats that can help guide your choices.
Once you’ve determined the best format for your images, you can use imgix to convert them to that format, regardless of the format they’re currently in, by using the fm parameter.
Automatic Content Negotiation
imgix can serve the best images to your customers’ browsers through use of the auto=format URL parameter. This lets you take advantage of the newer formats without extra dependencies or rendering steps, by automatically checking to see if the user’s browser supports them and then converting the image if so. You can also provide a fallback format if the new one isn’t supported. For more information and examples, see our tutorial about this feature.
Adjusting Image Quality
For image formats that allow lossy compression (where some image data is discarded), you can control the quality of the compression using the
q parameter. Valid values are between
100, with lower values resulting in more compressed images; the default is
75, which provides a good balance between meaningful size savings and visible image quality.
When lossy image compression is acceptable for your site or app, decreasing the
q value can shave kilobytes off of the resulting image. You can use lossy compression on the JPEG, JPEG XR, Progressive JPEG, or WebP formats. imgix uses a different quality scale that captures much more detail at lower quality settings than other image compression solutions—don’t be afraid to experiment with lower
q values than you might normally try for your use case.
Lossless Compression with Modern Image Formats
In cases where lossy compression (as with the examples above) degrades the image too much for your use case, you can still compress your images and save on load time by using lossless compression for the formats which support it (JPEG XR and WebP). Lossy compression is a better option when trying to reduce file size, however—even with the quality parameter set to
q=90, you will see a significant savings over lossless compression.
Lazy-loading and Responsive Images with imgix.js
By using imgix.js with the
imgix.fluid() method, you can resize and serve images automatically to your customers’ web browsers. They will update and crop to fit their containers and will also respond to changes in the orientation of a device, when set with the correct styles. This enables pixel-perfect image sizes without needing to pre-define the image size in the URL parameters.
imgix.js also supports a
lazyLoad parameter, which tells images to not load until they are within the browser’s viewport. This helps reduce the initial page load for your site, leading to a better experience for your customers and less likelihood that they will click away.
Alternately, you can use the
Width Client Hints to make your images responsive for browsers that support them. See our blog post about Client Hints for more information about browser support and implementation.
imgix gives you and your site or app several different methods of speeding up your site by serving right-sized images to your users. As with anything in software development, set a baseline before you switch to imgix and measure constantly. We’re confident that you’ll enjoy the improvements that our service is able to provide.
Further Reading and Resources
Images are a large part of page weight and therefore site performance, but they aren’t the only factor. For more information about improving other aspects of your site with regard to performance, check out these resources.