In today’s modern web full of high-speed connections, company brands and their respective product images are the online ‘window display,’ serving to entice prospective customers into their site(s) to purchase holidays, cars, luxury goods, gold iWatches, etc.
Images on sites can count towards a significant amount of the total bytes downloaded, and without an image optimization strategy, can seriously hamper your web performance. For example, if we take the homepage of www.newlook.com, we can see that 1.75Mb of the 2.28Mb downloaded is images. That is a massive 77% of the total page size!
Digging into the waterfall on the page, I found a banner image (984px x 50px) which weighed in at a whopping 416Kb. That is 18.2% of the total page size!!! It’s time for this image to go on a diet.
If you are not an expert with image editing tools, there are a number of online tools that can help you reduce image file sizes while still retaining high/good quality.
Compressor is one such tool. This online tool managed to reduce the image size from 416Kb down to 10.9Kb (a massive 97% saving). After discovering this, I took the other three largest images on the page and optimized them as well using the same Compressor tool.
| Total Bytes before optimization | 978Kb |
| Total Bytes after optimization | 124Kb |
| Total Saving (Kb) | 854Kb |
| Total Saving (% of page) | 87.3% |
Please note that images that contain only a few colors can see degradation in quality when using this online tool. This is noticeable in the huge banner image we originally optimized. Putting this through a professional image-editing tool, I managed to get the file size down to 25.9Kb (up 15Kb from Compressor) while retaining a high quality. However, exporting the image to PNG format from JPEG resulted in maintaining the exact quality with a file size of 25.8Kb (another minor saving).
Clearly, with careful attention on the size and image type that you use on your page, images can have a drastic impact on the overall page size.
Any reduction(s) will see improvements in performance and a better overall user experience for your customers. Also, if you are using a CDN you will see cost reductions, as you will be transferring less. It’s a win/win for all!!
Is it an Elf? Is it a Fairy? No, it’s a Sprite!
Pages can (and will) also contain many other images. These could be a collection of payment types accepted, social media icons, buttons, navigation icons etc.
Each time one of these images is placed on the page, the browser has to open a connection and get the image.
Pages can (and will) also contain many other smaller images. These could be a collection of accepted payment types, logos, social media icons, navigation icons, etc.
Each time one of these images is embedded in the page, the browser has to open a connection and get the image. This is very inefficient and will increase page load time and size. Sprites allow you to combine all of your small images into a larger image whilst using CSS to position them within the page.
With the explosion of social media, more and more sites are using images/icons to link to their social media outlets. Rather than boring old text based links, they like to use the branded icons. For example, if your company is on Facebook, Twitter, Pinterest, LinkedIn, YouTube, Google+, Skype, Vimeo, Dribbble, Flickr, and has a RSS feed, that amounts to eleven different icons/images.
Rather than make the browser make eleven individual calls to get each icon, bundle them into a single image as a sprite sheet. You can even bundle in multiple styles such as grey on white, full color, grey on black, etc. This then brings the icon/image count to thirty-three, but still only using a single image!
In order to demonstrate the performance improvement that CSS Sprites can have, I took the popular FamFamFam blog (Silk Icons) and created two separate pages to monitor. The total number of icons to include using both methods is 144.
One page loaded each icon individually and the other loaded the sprite version. The blue (top) line is the non-sprite version and the green (bottom) is the sprite version.
The page loading the CSS Sprite is 44% smaller in size and, on average, 68% quicker loading!
Put your site on an Image Diet Program!
These two simple little tips will have a massive impact on the overall performance of your site. Images will load quicker, the site will feel snappier and your users will be happier.
Image may be everything, but not when it impacts you, your customers, and your CDN costs!
But wait…
One other issue is what impact the advent of HTTP/2 could have on using CSS Sprites. This new standard removes a lot of the legacy HTTP/1 overhead and the use of CSS Sprites may no longer be needed.
Why? Because HTTP2 uses compression and also multiplexes, so it can send and receive multiple objects at the same time over one connection. In fact, many of the de facto web performance techniques of today may well become obsolete.
The post A Picture is Worth a Thousand Bytes appeared first on Catchpoint's Blog.