With the advent of technology and the attendant fast-growing demand for feature-rich computing devices (laptops, smartphones, iPads), their manufacturers are rising to the occasion by producing high-resolution machines with screens of various sizes and device-pixel ratios. Thus was born the impetus behind the need for and creation of responsive images, which automatically optimize their online display according to the size and resolution of the device screen, ensuring sharpness and crispness—a delightful user experience.
Typically, with Cloudinary, you want to do two complementary things for a remarkable user experience: save bandwidth and load your site as fast as possible because the smaller the sizes of the resources, the faster your site loads. And it’s been proven time and again that the longer your site takes to load, the smaller the number of visitors who will return. No matter whether you’re a developer or content creator, you will find Cloudinary’s tools that optimize digital media (aka digital assets) simple, intuitive, and effective.
Part 1 of this series introduces the Free Lossy Image Format (FUIF), which I recently developed. Part 2 explains the why, what, and how of FUIF. This post, part 3 of the series, delves into how FUIF is legacy friendly, which I alluded to in Part 2.
In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.
Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.
I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.
Cloudinary has recently added the Cloudinary Demo - eCommerce App to the Google Play Store. The App demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart.
In 2015, Chrome 35 added support for Client Hints. Client Hints are awesome! With Client Hints, you can simplify the HTML required for Responsive Images, ensure that images are crisp on high-DPR displays, and improve #webperf. At the time of writing, Chrome 35+ is the only browser to have adopted this standard. Cloudinary has introduced support with the w_auto, dpr_auto, and q_auto parameters.
Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.
Responsive design turns 8 this year, and to celebrate, we asked experts from across the web industry a simple question: what does responsive design mean to you and your work, in 2018?
I’m fascinated by their answers. As many state, the technical aspects of responsive design – flexible grids, flexible media, and media queries – are more-or-less well understood, eight years in. But those simple-sounding ideas about CSS are still having far-reaching effects, which extend far beyond code. Below, you’ll read about responsive design’s impact on how individuals, teams, and entire organizations work and think. How should we model our content, now that it is responsively adapting to fit new and different contexts? How in the heck should we be prototyping and testing responsive designs? How can our teams and workflows be structured to better accomplish this new kind of work?
In this part, I'll show you how to implement our new responsive images solution, which enables you to optimize the image you deliver based on the requesting device's resolution and the available dimensions. This new feature can help you to simplify the many complexities of creating multiple variants of every media assets, with on-the-fly manipulation and fast delivery through the CDN.