Skip to main content
Back to Blog

Images and Design Performance and Perception: Site Performance, Part 3 of 3

Jason Crichton

By Jason Crichton

Vice President, Interactive

Categories

Technology Design

January 30, 2018

This final post in our web performance series will focus on design performance. If you haven’t had a chance to read the other two in the series, you can check them out below:

Design Performance

A great site design should not only look good, but also perform well. The balance of resizing a design for various browsers and devices is as much an art as the technology behind it. There is a lot of pressure to keep up with the latest technology and techniques as a developer or designer.

Automating performance and design techniques can result in a happy user.

Your typical user is not visiting a site looking for great design and performance. A user’s expectation is often low for an optimized experience. However, optimizing a site can result in higher revenues.

Larger sites often suffer from not having an optimized experience because it requires manual effort. We’ll cover some clever automation tools later on.

Images

Image History

Since the dawn of the web, images have blessed and haunted a user’s experience. I can still recall in college going from the all-text world of gopher over to http and Netscape Navigator 1.0. Moving from an environment with no images to having images with http was a pretty big step.

GIF interlace
GIF Interlace in all its glory

Image performance has not changed much since the first slow-loading interlaced GIF. We still face challenges with bandwidth, load performance, and image format wars. The challenges of the image optimizations haven’t changed much since the beginning.

Image Load Performance

One aspect of images most people don’t understand is how much CPU power it takes to decode an image. Those CPU cycles translate over to a period of time, which in turn affects page load and performance. A page with many unoptimized images that resize, animate, or fade can result in a bad experience.

A common mispractice is to use the same, large desktop image on smaller mobile screens. Although this will work, it requires your phone/tablet/device to use more CPU power. The browser may have to redraw that image more than necessary because it was never resized.

You Are Not Small cartoon
Adapted from You Are (Not) Small, by Anna Kang, illustrated by Christopher Weyant; New York: Two Lions, 2014.

A few new cloud services help automate how images get resized and served in the proper image format:

Rendering performance doesn’t end with images. Performance influences how we should utilize CSS and animation on objects. Paul Lewis at Google does a great write up on rendering performance.

Image Format War

There was a long spread where we only had the GIF/JPEG duo. It seems only in the past few years we have access to some new image formats that we can actually use. The image war continues because big companies that think they have the best solution. Here is a great walkthrough of the history of the some of the competing file formats.

As of this writing, Google’s Webp seems to hold the most promise by providing the best of PNG, GIF, and JPEG. Mozilla is still contemplating if they will support Webp. There is little hope support will exist for Safari- and Microsoft-flavored browsers.

Companies like Cloudinary and Imgix serve the most efficient format to the browser. These services shine with a large site, like an ecommerce store.

If you are working on a smaller site, you don’t have to use a third party. If you are working on a one-off theme for a client, you can fallback by using a format like Webp. CSS-Tricks covers Webp fallback techniques in depth.

The State of Vector Formats

SVG (scalable vector graphics) offer great options for performance compared to bitmap images. The resolution independence of SVGs is the shining feature of this vector format. Even on high-resolution devices, the SVG format will look crisp and clean with no extra file weight.

SVG currently also has some shortcomings. A full page of SVG animations can completely choke. Many gradients or complex paths can be also be CPU intensive. There are, however, animation libraries that are getting better for SVG animations.

Here are a few popular SVG animation libraries to look at:

Here are some good resources that cover best practices and performance of SVGs:

Conclusion

The challenges of image performance haven’t changed since the beginning. It will be interesting to see what the next ten years will bring. For now, we should continue to optimize our images and understand the impact images have on our users. SVG holds the most promise of changing the users experience over the next few years.

Related Posts

From Comp to Code: The Journey of a Button

There are many steps in between the creation of a design and seeing its online launch. Follow the journey of a button as it goes from comp to code.

READ

Why You Should Care About Web Accessibility Standards

Peter, our Director of Account Management, explains why your website should be compliant with WCAG 2.0 standards and where to begin your accessibility compliance efforts.

READ