Signing Images Just Got Easier

Signing Images

Signing your images is a good first step toward avoiding malicious use—it keeps them from being used to produce unwanted renders or as a CDN for someone else’s site. We recommend that all images be signed, and require it for Web Proxy Sources.

In general, we recommend that you sign URLs using one of our Client Libraries; this makes the process more efficent and less prone to error. However, we also recognize that you may need to sign images individually or in small batches sometimes, and we've upgraded the signing tool in the Dashboard to make that easier. You can now sign up to 100 images at once, and the tool checks to make sure your Source is set up for signing.

See the Securing Images guide for more information and updated signing instructions, or go directly to the signing tool in your Dashboard.

Using imgix with lazysizes

header image

Lazyloading is a good way to improve image performance, if you have a lot of images on the page that fall below the fold. By only loading images and other large assets when they're about to be displayed, you can greatly reduce the initial page weight and get the page on-screen for your users more quickly. For simple pages, or where SEO is important, you’ll probably want to leave loading up to the browser, but if your site is a good candidate or is already using this method, read on.

Read the rest

Building Branded, Dynamic Social Images with imgix

Page Weight Report

A few weeks ago, we released our new Page Weight tool. Page Weight tells website owners exactly how much heavier their sites are when responsive design is improperly implemented or not implemented at all.

Many sites are waking up to exactly how much page weight and page speed affect the user experience. The Financial Times just finished and documented a test of how page speed affects subscription rates to their paper. Spoiler alert: poor response times negatively affected engagement and subscription rates.

As part of Page Weight, we wanted to include a simple flourish: using imgix to dynamically generate the social images for each report. These social images are important not just for sharing things on Facebook and Twitter, but many other systems as well.

Page Weight is not necessarily a tool that gets shared publicly, but rather privately with a team. Thus, we wanted to introduce some magic every time a report was shared in Slack or company chat. We did this by dynamically creating an og:image to reflect the contents of each report.

Slack convo

This is a cool effect, and something we wanted to document. This blog post covers how you can use imgix to generate dynamic og:image URLs for your site.

Read the rest

Measure and Improve Your Image Performance

Page Weight Logo

Performance is key to the success of any website or app. The engagement and conversion costs of slow-loading pages have spurred multiple industry efforts to measure and improve speed, from YSlow to AMP to Client Hints and many others.

As a company whose mission is to improve both the speed and quality of images on the web, imgix is always looking at ways to support and implement these efforts into our service (for example, by offering Client Hints support the day it went live in Chrome).

On a typical web page, images make up more than 65% of the total page weight. Front-end developers and designers agonize over minimizing JavaScript and CSS file sizes, but have historically not spent as much time worrying about images. We believe this isn't due to lack of effort or desire, but a lack of tooling—measuring both a baseline and improvement can be challenging.

Read the rest

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

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