Skip to Content

Image optimization for web performance

Capgemini
2018-01-18

When it comes to your website, it’s likely that images make up the majority of the size and space on the page. This is why image optimization can yield some of the largest performance increases – the fewer bytes browsers have to download, the faster they can render your pages.

Image optimization is more than just enhancing site speed and performance. Components such as alt tags and CSS effects can go a long way to boosting the value of your site. Better SEO rankings and more engaging content will increase conversion, and these are all key considerations when approaching image optimization.

Image Optimization – Compression

It’s a relatively simple concept: the smaller the image file, the faster it (and the page it is on) loads. On the flip side, high-quality images will have larger file sizes than their smaller, more-pixelated counterparts. Finding the optimal settings for your images requires careful analysis of a number of variables: format capabilities, encoded data, quality, pixel dimensions, etc.

Page load and file size is just a piece of the user experience puzzle, but can have significant impacts on how users interact with your site.

  • 79% of customers that report dissatisfaction with website performance are less likely to buy from that same site again.
  • 47% of customers expect a page to load in less than two seconds
  • 64% of mobile users expect load times to come in under 4 seconds
  • For every one-second delay in page load times, conversion drops 7%.

What these numbers tell us is that page performance is a large portion of the overall digital shopping experience. The most image-rich and gorgeously designed site in the world will not be successful if it takes too long to load. Customers want quick, and easy access to the products and services they demand, making page load times – and image optimization – a critical metric.

Minimizing file sizes and maximizing image quality has gradually improved since the beginning of web design. New tools and processes have been developed to give designers greater ability to optimize images and increase webpage performance.

Here are some of my personal favorite image optimization tools:

  • TinyPNG
  • PunyPNG
  • JPEG Reducer
  • JPEG Optimizer
  • Online Image Optimizer
  • Shrink Pictures
  • Compress Now
  • Image Optimizer
  • Compress JPEG
Web Page Image Formats

Your images’ file format can make a big difference in the performance of your site. Here are some common image file formats and how to best utilize them for optimizing your site.

JPG – Most commonly used for lossy compression of digital images where the degree of compression can be adjusted. This format is best suited for digital photography. The Joint Photographic Experts Group founded by Jim Judkins created the JPEG, JPEG 2000, and JPEG XR standards. Consider JPGs when displaying photography that must be compressed.

GIF – Developed in 1987 by Steve Wilhite while working at the bulletin board service provider CompuServe. The Graphics Interchange Format became popular due to its support and portability. GIF is an 8-bit graphic format that supports animation making it the standard for lightweight animation shortly after it’s introduction to the web. GIFs are typically used when designers want animation

PNG – A raster graphics file format that supports lossless compression. The Portable Network Graphics format was created in 1996 as a replacement for GIF with an improved alpha channel for transparency. Although typically having a slightly higher file size than GIF, PNG has a higher variety of transparency options. Use PNGs when transparency is needed in the image.

SVG – An XML-based vector format that supports animation and interactivity, Scalable Vector Graphics is an open standard that’s been developed since 1999. SVGs can be created with a text editor and have the ability to be searched, indexed, scripted, and compressed. SVGs can consist of paths and outlines which scale without bitmapping. Consider SVGs when the image can be vector and needs to scale to maintain clarity.

Search Engine Optimization

It’s always in your best interest to consider image search when creating web images. Properly formatted and titled images with relevant phrasing are critical to increasing image visibility in search engines. Here are some best practices for SEO image optimization.

File Name – File names should be descriptive and informative, with relevant keywords based on searcher intent.

Title – This is the text that displays on mouseover. Search engines don’t crawl this tag, but it is good practice to optimize this to deliver a solid user experience.

Alt Tag – The alt tag describes the image textually so screen readers and search bots can understand what the image is. This tag also displays when images can’t load.

For products with serial numbers, make sure to include these in your alt tags. Also, if there are multiple images of one product, make sure to give them all unique alt tags. Avoid alt tags for decorative or design-intended imagery. Search engines often consider this “over-optimization” and will actually punish you for it.

With all of these guidelines around alt tagging, here is a simple example of well-formed source code for an SEO-optimized image.

<img src=”woman-dress-red-size-6.jpg” alt=”woman dress red size 6” title=”woman dress red size 6”>

Conclusion

Images make up a massive chunk of today’s digital shopping experiences. From backgrounds to bytes, images play a massive role in the success of your website. Optimizing these images is a holistic endeavor, encompassing much more than tweaking size and shape. File formats, coding, tagging, and more all come together to create an environment where retailers have to get the total digital experience just right to see success. Hopefully, this post helps you understand how to do just that.