Guy Podjarny of Akamai Technologies outlined ways to optimize photos for speedy delivery in a session yesterday at Velocity 2013 in Santa Clara. (Photo: Rich Miller)
SANTA CLARA, Calif. - The web is filled with photos. Photos of cats. Photos of kids. Pictures of what you just had for dessert. Animated GIFs of Hello Kitty riding a unicorn over a rainbow.
Even as they touch and entertain us, these photos fill up storage arrays and the pipes that power the Internet. The explosion of mobile devices and high-resolution screens has meant more photos and bigger photos. For web performance engineers, optimizing photos to load quickly has become a major priority.
"We have an image problem on the web today," said Guy Podjarny, the CTO for Web Experience at Akamai Technologies. "We like images because they're static and simple. They're visually significant on a page. But they contend with other resources for bandwidth and CPU and connections."
Podjarny provided a deep dive on photo optimization Tuesday in a session at the Velocity 2013 conference titled "A Picture Costs A Thousand Words," in which he outlined the importance of photo optimization.
Images make up 61 percent of the bytes on the average web page, and 70 percent on pages delivered to mobile devices. The average image weight of a web page has grown to 881 kilobytes, Podjarny said.
To address this problem, Podjarny outlined detailed strategies to optimize photo formats, delivery and loading, along with techniques to address
Formats
Most of the images on the web use one of three formats: the Graphics Interchange Format (GIF), the Joint Photographic Experts Group (JPEG) and Portable Network Graphics (PNG). All three formats date to the mid-1990s or earlier. "These photo formats are ancient," said Podjarny.
But they're widely supported in current web browsers, which isn't yet true of two newer formats: the WebP format from Google and the JPEG XR format championed by Microsoft. Both formats have reduced image sizes by 25 to 33 percent compared to the GIF, JPEG and PNG, but are supported by only about 25 percent of the current global browser footprint. Over time, Podjarny said, they will become more widely supported.
In the meantime, web site operators can improve their page loading times by using progressive JPEGs rather than the standard "baseline" format. New research from Patrick Meenan and Ann Robson discovered that just 7 percent of JPEGs on major web sites use progressive loading, which can improve page load times by 7 percent on cable modems and 15 percent on DSL connections.
Which format is best? Podjarny outlined the current collective wisdom:
- For tiny images (like 1x1 pixels) use GIFs
- For most small images, use PNG
- Where possible, use JPEG rather than PNG on larger images
Delivery and Loading
To optimize delivery, performance engineers should consider using a cookieless domain, caching content with a CDN (such as Akamai or Limelight), and leverage browser caches to store images locally on user systems.
A particular challenge in image loading is a new design trend featuring extremely long pages laden with images. Many of these images are "below the fold" - meaning they slow down the page load time but don't appear within the initial field of vision for readers. Podjarny presented several methods to manage this problem, including "lazy loading," which uses a script or style sheet to load an image if it appears in the visible portion of the page, and then load additional images as needed if the user scrolls down the page.
Another option is LQIP - short for Low Quality Image Placeholders - in which smaller versions of images are loaded first, and then replaced by higher quality images as the page load completes.
Mobile
The growing universe of mobile devices includes screens of every shape and size. When full-size images are delivered to these smaller screens, they are displayed at smaller sizes. So why not use smaller images whenever possible? It requires creating multiple versions of each image, and sorting out which image to deliver to a device.
"There is value in serving smaller images to smaller devices," said Podjarny. "We can't do it easily, because it's hard to detect mobile" with precision.
Podjarny said scripts and CSS can be used to deliver custom images based upon the screen size of the device. There's also an effort to expand markup languages to expand the capabilities of web page tags, allowing them to declare multiple sources for an image or delay image loads depending on their location on a page. See ResponsiveImages for more.
"Images are not as simple as they seem," said Podjarny. "But they're worth optimizing."
