Optimizing Quality and Speed for High-DPR Images

DPR & quality illustration

The explosion of high-DPR devices makes serving a highly-performant site more complex. High-DPR images are heavy, particularly on mobile devices where there is a collision between screen resolution and download speed.

Our previous tutorials on using srcset, Client Hints and <picture> cover several approaches to implementing responsive design with imgix, and touched briefly on changing quality settings to improve file size and loading speed of high-DPR images, which has become an industry best practice. This post goes into more detail about how to optimize for different DPR settings using imgix's dpr, q, and usm parameters.

Read the rest

New Auto Parameter: Compression

Auto compress

In our ongoing quest to make imgix more useful, we're always looking at ways to automate solutions for common customer use cases. Image file size is obviously a key one, which we've already addressed with several parameters:

Optimizing for the best compression while retaining reasonable quality can be a trial-and-error process, however, especially if you have both illustrations and photographs in your catalog. The “best” parameters for these types are quite different. And there are cases where more compression than normal is preferable for load times.

Our new auto=compress parameter enables you to optimize for smaller file sizes, with a minimal quality loss and without tweaking each image.

Read the rest

Serving Images Faster with the Save-Data Client Hint

Save Data With Client Hints

Client Hints have greatly expanded the content negotiation and cache friendliness of HTTP headers, allowing clients to advertise what they prefer to receive in response to content requests. The new Save-Data Client Hint enables a better user experience for people in low-bandwidth situations, who can now choose a "data-saving" mode in some browsers to receive web pages in a more highly-optimized format.

Chrome 49 supports the Save-Data Client Hint, and because so much of the data savings comes from image compression, so does imgix. Here's how you can use them together to deliver smaller websites to low-bandwidth users with a minimal effect on image quality, and without the need for JavaScript or cookie-based capability checks.

Read the rest

Motif—Custom Open Graph Images for Sharing Content

Motif Header

When sharing content on social networks, images are a key driver of user engagement. But creating them can be time-consuming due to the optimum size for different platforms and devices. For example, Facebook recommends 1200×630 pixels for high-resolution displays, and Twitter recommends at least 630×150.

These large sizes may be scaled down for some devices, resulting in slower page load speeds. Add in the need for consistent branding across many pieces of content and it's enough to drive a designer or social media manager crazy.

Enter Motif.

Read the rest

Upgrade—Base64 Encoding

Some of imgix's most powerful features, like watermarks and multiline text, require passing in a URL or a text string as the value of a parameter. For these parameters, we've recommended that both URLs and strings be URI-encoded.

Today we're announcing Base64 encoding support for these parameters, to ensure that they resolve correctly even when nested several levels deep. This makes doing complex composting with imgix more reliable and easier to implement.

Read the rest

Managing User-Generated Images

Standardizing user-generated content like user avatars and for-sale photos can be a time sink and a hit to page load times. Learn how to use imgix to manage and enhance the images your users provide, so their content and your products look better and load faster.

Stay up to date with our blog for the latest imgix news, features, and posts.