by Team imgix
April 20, 2016
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.
Read the rest ➤
by Team imgix
April 5, 2016
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 ➤
by Carol Gunby
March 30, 2016
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 ➤
by Carol Gunby
March 11, 2016
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 ➤
by Team imgix
March 9, 2016
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 ➤
by Carol Gunby
March 4, 2016
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 ➤
