How to Use JPEG 2000 (JP2) for a Faster Images on iPhone (Sponsored)

Celý článek

Images Slow Down Websites

Images slow down the page-loading performance of many websites. Audit tools like Google’s Lighthouse can quickly tell you how many seconds you can save by optimizing your images. When you are delivering to desktops or android devices running Chrome browser, a quick solution is to convert your images to WebP. This can save up to 80% in your image payload. 

Accelerating Apple Safari Users

But what about Apple iPhones or iPads or any laptop running Safari browser? For many companies or organizations, Apple devices can make up more than 50% of their traffic. Unfortunately, Apple Safari does not support WebP. However, a little known but powerful image file format called JPEG 2000 (mimetype image/jp2) is supported since Safari 5 and iOS 5 with some exceptions. The trick is identifying Safari users and quickly serving images in JPEG2000 format. 

What is JPEG 2000?

JPEG2000 is an image standard created in the year 2000. The Joint Photographic Experts Group (JPEG) intended the new format to take over for the even more ancient JPEG standard created in 1992. To date, its adoption is limited. The standard has really caught on in industries where digital archiving is important. JPEG2000 is the preferred format for storing satellite images, x-rays, architectural imagery, art and so on, thanks to its higher bit depth, lossless compression, and flexible compression. 

In the web space, Apple Safari browser supports JPEG2000. Its effectiveness in optimizing image is impressive. Looking at millions of different original images, if one resizes, compresses, and use the JPEG 2000 file format, then you can save an average of 59% of file payload.

Source: ImageEngine – September 2019

How Serve Apple Safari Users with Responsive Images

Responsive image techniques can be used to optimize images for Safari users. While there are ways to identify Safari, developers will need to proactively convert images to the JPEG 2000 format. This increases the workflow complexity, particularly for sites with many images that are continuously refreshed.

Responsive images, as defined in the W3C Working Group, is markup that enables the browser to request different image urls in response to different environmental conditions. For example, a desktop screen presents very different environmental conditions than a smartphone or tablet. A browser should be able to respond to these conditions and dynamically display an optimal image.

These environmental conditions are typically expressed to the browser through CSS media features. Some common media features are device pixel ratio (DPR) and maximum width of the screen.

To achieve their goals, the working group introduced several new HTML markup elements and attributes to assist with responsive images. These include adding the sizes and attributes to the <img> element. The working group also added a brand new <picture> element. 

For JPEG 2000, you can use the picture element to implement image file format switching. The browser will evaluate the sources and their types in sequential order. For example, If Safari finds a next-gen type that it supports (e.g. jp2), it will select that srcset. Otherwise, it will default to the image specified in the img src. In this example, it is a png. 

<picture>
  <source srcset="logo.webp" type="image/webp">
  <source srcset="logo.jp2" type="image/jp2">
  <img src="logo.png" alt="logo">
</picture>

In addition to this new code, the developer behind the scenes will need to generate, store, and manage the next-gen variants of the original image. And as you start to add art direction, resolution, and image sizing functionality to the responsive images, the code complexity starts to grow exponentially. While the responsive image approach is effective, there is an easier way. 

Simplify with an Automated Image CDN 

A much easier way to achieve these image optimization goals is to use an image CDN that includes JPEG 2000 automatically. What is an image CDN? It is a CDN that can take all of your existing original master content, optimize it, caching the images, and deliver them. It vastly simplifies a very complicated image optimization process. 

Effectively maximizing optimization requires a great deal of information about the requesting device. Various image CDNs achieve this in different ways. ImageEngine is the only image CDN that has device-aware edge servers. This means that the network instantly identifies the exact specifications of the requesting device upon the initial http request. Instantly, the edge server can serve optimized images that it has in its cache that are tailored specifically to the device. In the case of iPhones, this means that ImageEngine can instantly serve JPEG 2000 images to iPhones.  

As for coding, once you have directed image traffic to the origin hostname established in your ImageEngine account, you can use a image tag like this: 

<img src="//img.foo.com/logo.png" alt="logo">

In this example, the image tag refers the request to imageEngine when the img.foo.com domain is CNAMEd to ImageEngine as part of the account configuration. It will take the “logo.png” and automatically deliver the optimal image file format (e.g. JPEG 2000) for the browser and device. 

Integrating an Image CDN

Setting up an image CDN is straightforward if you are comfortable managing DNS and can put a CNAME record to direct traffic to the image CDN. After pointing the image CDN at the URL of the master images, the image CDN will pull and optimize the master images only when needed.  This means you do not have to move or upload your images; the image CDN will manage retrieval, optimization, caching. ImageEngine also supports SSL certificates so that security can be maintained.

What about image quality?

A natural skepticism arises around the degradation in image quality. Surely if you compress an image, then you lose quality. For purists, the answer is yes, However, most image CDNs calibrate their quality setting so no quality difference is perceptible – particularly on mobile devices like iPhones. An image CDN like ImageEngine combines its knowledge of the devices screen resolution and pixels per inch (PPI) with rigorous study of quality metrics like Structural Similarity Index Method (SSIM) to generate images of nearly identical quality, but dramatically smaller file size. 

In the near future, artificial intelligence of ImageEngine will start to analyze image content to aid in the optimization. Recognition of overlaid text and faces will assist in ensuring quality and assist in art direction of automatic cropping.

Image Optimization Benefits

For most websites, the image payload savings range from 60-80% for typical for an image CDN serving JPEG 2000 effectively. This typically equates to page-load acceleration by several seconds, frequently up to 50% faster.

This page load savings has collateral benefits for many eCommerce sites. Page load time influences SEO page rankings. Faster page loading also leader directly to lower bounce rates and higher engagement metrics like time on site and pages viewed. And for many eCommerce companies, these metrics link directly to sales conversions.

Getting Started

The easiest way to see if JPEG 2000 will work for you is to start a free trial with an image CDN. ImageEngine provides a no risk 30 day free trial that does not require a credit card. And if you do end up using the service, an interesting feature is that unlike other image management platforms, they do not charge for by the number of image transformations. Instead, they charge by the optimized GBs delivered (they call them smart bytes). So the greater the optimization, the lower your bill.

The post How to Use JPEG 2000 (JP2) for a Faster Images on iPhone (Sponsored) appeared first on David Walsh Blog.