WebPerf How to Deliver High Performance Images

The web is dominated by images.

As of June 2015, images account for 63% of the average web page’s size. Despite this, many websites tend to poorly optimize their images. Image optimization not only reduces the size and complexity of a web page, but it can vastly improve the way users experience a website.

Guy Podjarny, founder of Snyk, discusses several approaches to image optimization in his talk High Performance Images – Beautiful Shouldn’t Mean Slow. He presents three key areas of focus: image compression, image loading, and image operations.

In this post, we’ll explore these three areas and present some additional ways to speed up your images.

Image Compression


We’ve talked about data compression in previous posts and how it can shrink your scripts by 60% to 85%. With images, compression can make a difference on the order of megabytes.

Choose the Right Format


Image formats use different methods for encoding and compressing images. The most popular format, JPEG, accounts for 46% of the images on the web.

​

Much of JPEG’s popularity stems from its ability to create high quality files that are small in size. JPEG uses lossy compression, which discards data to achieve smaller sizes at the cost of quality. Formats like PNG and GIF, on the other hand, perform lossless compression, which reduces file size without reducing image quality. In general …

• JPEG is best suited for complex images such as photos
• PNG is best suited for simple or transparent images such as logos
• GIF is best suited for animations and simple, low-resolution images

There are other features to consider, such as support for animations and transparency. New formats such as WebP, JPEG XR, and JPEG 2000, promise even further reductions in file sizes without limiting features.

Format Browser Support (as of June 2015) Compression Transparency Animations JPEG All Lossy No No PNG All Lossless Partial No GIF All Lossless Yes Yes WebP Android, Chrome, Opera Both Yes Yes JPEG XR Internet Explorer Both Yes Yes JPEG 2000 Safari Both Yes Yes

Most image editing tools allow you to adjust the quality level when exporting an image. This is mostly done for convenience, since there’s no single factor that controls the overall quality of an image. Tools such as WebPageTest and PageSpeed Insights can provide more insight into managing the quality of your images.

Image Loading


After optimizing images for delivery, your next focus should be on the browser. Images require memory and processing power, and too many unoptimized images could strain your users’ devices.

Size Matters


Following the trend of responsive web design, your images should be able to adapt to your users. Many websites go the route of using a single large image that’s resized or scaled using CSS. This results in users downloading and rendering content that they can’t even see, placing extra load on their devices.

​

One solution is to store copies of the image in different sizes, then deliver the most suitable copy based on the browser. The tag contains a srcset attribute that specifies multiple images that the browser can select from. The benefit is that all of the decision making is performed client-side.

---

If you don’t want to let the browser call all the shots, you can use the picture element to explicitly tell the browser when to use one image over another. For older browser support, or to add additional features, there are several JavaScript-based solutions including Imager.js and Picturefill.

Prioritize Critical Images


High-priority images should go in the area of the web page that your users see before scrolling (known as “above the fold”). This leaves the rest of your images below the fold, or outside of the immediately visible area. The problem is that these images will download and render even if the user never sees them.

Load it Later


Lazy loading is a technique for loading images when they’re needed, rather than all at once. Image tags are set with a small placeholder image, which the browser replaces as the image appears on-screen. Lazy loading is an effective solution, but it can negatively impact your website’s ranking in search engines.

​

An alternative solution is deferred loading, which uses tags to load critical images and JavaScript to load non-critical images. The JavaScript is placed at the bottom of the HTML document, causing the non-critical images to load after the main page has already finished loading.

To prevent a hit to your search engine rankings, you might also consider using low-quality image placeholders, which uses JavaScript to swap out low-quality images with higher-quality images.

Image Operations


The techniques mentioned above are good in theory, but applying them requires a bit more work. Fortunately, there are plenty of tools that help with encoding, managing, and delivering images to users.

Choose Your Tools Wisely


Unlike image decoding, image encoding isn’t a standard. The quality and size of your images depends on the tool you use, giving you flexibility in how you prepare your images. You can use utilities such as:

for JPEGs jpegtran or MozJPEG for PNGs pngcrush or optipng or pngquant for GIFs gifsicle for ALL ImageOptim

Also, some reputable web-based optimization services include: Kraken, smush.it and Optimizilla.

Use an Image Proxy


An alternative to encoding images in advance is to use an image proxy. Image proxies provide real-time transcoding based on the user’s device, available bandwidth, and other parameters.

Hosted Solutions CloudFlare Mirage or Embedly Display or RSZ.IO or Cloudinary Self-Hosted Solutions OpenRoss or Photon for WordPress
Conclusion


When there are so many other ways of speeding up your website, it’s easy to overlook images as a source of slowdown. However, implementing just a few of these suggestions can noticeably improve the performance of your website.

The post How to Deliver High Performance Images appeared first on MaxCDN Blog.

Continue reading...