Serve images in next-gen formats as the browser war rages on

The browser wars are far from over, with an invisible battle going on underneath the hood every time we access a website - the victims are innovation and customer satisfaction.

That biggest battle is the fight over the next-gen file formats and codecs for images and videos, the key elements that make up any modern online experience, and most web traffic today. Despite vast innovation, most people, websites, and devices still use JPEG, an image format that goes back to 1992 and is inefficient at reducing file size.

Why? With different browsers supporting different formats (e.g., Google Chrome pushes WebP and WebM, Apple Safari drives HEIF), there is a lack of unified support for next-gen formats and codecs, which forces Web developers to either attempt to write complex page code for each device, browser, and user -- or fall back JPEG and accept page bloat that cases webpage slowdowns, pixelation and other issues that degrade the user experience.

And with more business being conducted online and via mobile amid the pandemic, organizations can’t afford to provide an inferior experience to consumers who rely on web images and video more than ever instead of touch and feel products in person.

We connected with Sven Drummer, Senior Manager of Product Marketing at Akamai Technologies, to discuss the image and video format war and how developers can address it all.
 

ADM: How should developers manage the ongoing browser war? Are there helpful tools?

Dummer: There are two main paths you can take: write your own code to determine what device and browser version is being used by each visitor and then load the best format of a graphic, image, or video for that particular user. For this to work, you need to generate different versions of one and the same file, in different formats and sizes, and then serve the right one based on the user’s environment.

The biggest challenge with this approach is to know what “best format” means for all the different browsers and OSes, which browser supports what, and in which version. You’ll have to permanently track this, and update your code frequently. Sites like caniuse.com that collect this information make this a lot easier, yet it still means a lot of continuous research work.

An alternative to doing all this yourself is to use a specialized solution that does this work for you. Optimization solutions for images and videos typically only require one single version of a file on the original server and then convert and replace it on-the-fly with a format that’s best for the user. In this case, you don’t need to write your own code, and with that, there is also no need to do the research to find out what that code would have to do, which browser supports what, and what the last updates of the browser X and Y changed.

ADM: What do developers need to consider when automating browsers to support device formats?

Dummer: Web developers and designers should always start out by asking the question of what visual effect is desired, and what is it supposed to achieve? Then go from there to determine which type of media and file formats serve that purpose best. and They should carefully consider what alternatives there are to achieve certain visual results on a page or within an app. For effects like shadows or certain animations CSS can often be used instead of an image, and if a special font is required, it’s always better to embed a real web font rather than using an image as text. Having clarity on the requirements for a visual is key to determining the right format. If an image or video is supposed to give users a detailed impression of a product, high resolution and accurate colors are important, while in other scenarios lower quality might be acceptable. Different file formats have different strengths and weaknesses; as a very simple example, SVG is great at scaling graphics, but doesn’t work as well for very detailed images. So if you’re optimizing images and videos yourself as part of your responsive web design, your developers need to build up expertise on media formats and pick the right ones based on the requirements that designers and art directors provide.

When using a dedicated solution for image and video optimization, which is typically a SaaS solution, you can again outsource the majority of this effort and leave the choice of the right file format to the software. However, teams should still properly define the requirements for specific images and videos, so that the optimization software can be told what to aim for – does byte-reduction or visual quality take the highest priority? Optimization software should only require one single file as the source input to intelligently generate the optimal formats and sizes for a page visitor or app user, depending on their browser and device. This allows to significantly simplify the entire media workflow process, as you no longer need to worry about generating and uploading many different versions from one original source file. Teams want to make sure that one original file is of the highest quality and in a format that the optimization software can digest. This is typically a high-resolution, high-quality web format, such as JPEG or MP4, but not one of the lossless raw formats that professional-grade cameras produce.

ADM: Why is it crucial to leverage responsive designs to ensure a strong image/video quality across devices?

Dummer: Page visitors, users, and potential customers are always going to be browsing sites and apps from everywhere, across all channels and on a multitude of devices – desktop computers or laptops, large or small screens, iOS and Android-based mobile devices of different models and age, different browser types and versions, etc. Images and videos are being accessed through a variety of channels, for example, embedded on a reseller website or via a “microbrowser”, i.e. embedded into (for example) a social media application or within a messenger window.

Images and videos display differently on different devices, screens, and browsers, and depending on the supported file formats might not even display at all. As a consequence, the visual user experience might on one device look as it was intended by the designer, but gets messed up or will not display at all on another user’s screen. Responsive design aims to prevent this and allow for seamless user experiences across all channels.

Another problem with images and videos is their large size, which increases the data volume of a web page or application that needs to be transferred by the end user’s device (commonly referred to as page weight). As more data needs more time to download, end users might have to wait for pages to display and deal with broken or pixelated images or videos. It is a well-known fact (and proven by many studies) that, across all industries and demographics, the tolerance of consumers for online wait times is extremely low. One study showed that people waiting for delayed online videos to start playing show the same level of physical stress symptoms as people watching a disturbing scene in a horror movie. Slow load times will lead to high bounce rates, site abandonment, and missed transactions, which in return negatively impact revenue and factors like customer satisfaction, or brand reputation and loyalty.

For all these reasons, Google and the other major search engines are known to use responsiveness and performance as signals to rank pages on their search result pages. This by itself constitutes a major reason for businesses to treat responsive design and image and video optimization with high priority. These are key ingredients for a successful SEO strategy.

ADM: Serve images in next-gen formats: What is the significance of optimizing files for browsers such as Google Chrome + Apple Safari? What is the impact?

Dummer: The most common file formats for images and videos, such as JPEG, PNG, or MP4 have one thing in common: they are all decades-old and offer less efficient compression than their modern siblings, such as WebM, WebP, AV1, or AVIF. These new formats can offer anywhere from 30 to 75 percent smaller file sizes at the same level of visual quality, resulting in faster download times and less network traffic. For high volume websites, these byte reductions can add up to several terabytes per day.

But unlike the old classics, these newer formats are not necessarily supported by every browser; so your page code or your optimization solution has to decide for each and every user and their browser version what the most efficient format is.

ADM: What should we be expecting as the browser war progresses? What does it look like for developers in 2021?

Dummer: Despite what some browser vendors might say, there are no clear signs on the horizon that some of the established, yet outdated formats are going to be widely replaced with more modern, more efficient formats. The almost 30-year old JPEG format is likely to remain as popular as ever. That said, things are getting better as the major browsers are starting to support a solid foundation of high-efficiency formats, such as WebP, and as more vendors begin to embrace the value of standardization. AV1, an open and royalty-free video format, and its equivalent for images, AVIF, are promising examples. Both are developed by the Alliance for Open Media, a non-profit industry consortium, with support from major industry players. I expect this trend towards open standards to continue.

ADM: What are some tips/steps you can give to developers on how to efficiently navigate this war on the back end?

Dummer: In particular for larger, media-rich websites or apps with high traffic volume, consider a dedicated solution to automate image and video optimization – the level of efficiency these provide is hard to achieve internally even for very large organizations. For the cases where you do develop your own optimization and whenever you need to decide on an image or video format, go for open standards whenever possible – as opposed to proprietary, vendor-only formats with restrictive licensing.

About Sven Drummer

Sven Drummer oversees product marketing for Akamai’s edge computing, web performance, and services offerings. Before joining Akamai, Sven worked in product development, marketing, and management roles at Silicon Valley startups as well as Fortune500 companies. Sven is based in San Francisco.