If maintaining aspect ratios while resizing images is a concern, use the fit=clip parameter. 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. To resize the image based on a percentage, you set the w or h parameter to a value between 0 and 1. 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. Imgix also supports percentage-based sizing using the w and h parameters. Pixel-based sizing works well with the fit and 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. Original (resized to 30% for display here)
For example, this original image is much too large for most applications. Whenever a w or h parameter is set and has a value over 1, the image is resized to new pixel dimensions. Any image served through imgix can be resized dynamically. The most common method of resizing images on imgix is with pixel-based sizes using the width ( w) and height ( h) parameters. 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. Images are often served out much larger than needed for a page, which adds to the page weight considerably. Resizing is the easiest way to remove unnecessary data from an image. You can see a breakdown of potential savings in our Improving Image SEO guide. By not fetching extraneous data, pages on your site or application will load and paint much faster. 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. 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.įrom a raw pixel perspective, every 100×100 pixels you remove from an image is almost 40KB. Variations in the image data and file format can increase the file size further. Reducing Image DataĬameras and display capabilities are increasing all the time, which drives up the size of your Origin Images-even a sample smartphone camera image (with compression) weighs in at 1.4MB and 3264×2448 pixels. No need to bring or configure your own CDN your images will always be delivered as quickly as possible. Using imgix’s Content Delivery Networkīy 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.
This guide covers in detail the many ways imgix can make your site snappy. 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.