One of imgix's most powerful benefits is the ease of setting up the service and serving better images right away. This is true whether you're serving images directly to your customers or building a platform for others to use. One of our customers, Stream, demonstrated this in their tutorial about building a demo app called Cabin in React with their feed service.
Here's how they did it, in their own words. (This is part 5 in their series.)
"Page weight" may well become the new chant to replace "developers, developers, developers." As websites continue to become more visually rich (and need to, to be effective), ensuring that visitors don’t have to wait for images is paramount.
So, how to make sure that your site loads as quickly as possible but still with a visually compelling experience? The Low-Quality Image Placeholders (LQIP) method initially loads a low-quality, smaller version of the final image to fill in the container until the high-resolution version can load.
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.
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.
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.
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.
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.
Stay up to date with our blog for the latest imgix news, features, and posts.
