As a consultant, throughout stabilizing and deployment phases, I get frequently asked to investigate performance of specific web pages or whole sites, in order to improve page rendering speed, lately more and more related to SharePoint environment.
And what I often see in breakdown of page rendering that it is not that server execution time, which lags behind and causes visual delays, but the size and amount of creative content, which was put on the web site – images and flash files. The easiest way to quickly look at the page load timing breakdown is probably by using FireBug’s Net tab, as it’s shown on this illustration.
There are many ways to optimize and enhance performance of specific web pages and web sites in general. One of the great examples of the process and approach to optimization, is documented in the blog of Microsoft SharePoint team, which has done amazing job speeding up SharePoint.Microsoft.com.
However, in this post, rather than talking about optimization in general, I want to draw your attention to one highly overlooked issue – the size of creative media content used on production web sites, specifically size of JPEG images and Flash pieces relying heavily on imagery.
Back in the days, when I was working in video encoding industry, I used to spend large chunk of my time working with different JPEG settings and libraries for motion JPEG video compression. JPEG has many different implementations, and all image editing software programs, such as PhotoShop, Picasa, Paint, etc. use their own libraries with proprietary JPEG-compression, which differs in compression speed, parallelism, and quality.
However, they all have one thing in common – a configurable characteristic of compression quality, often expressed in per centage, or 0-100. You can read more on JPEG compression quality on wikipedia, with lots of great examples and comparisons.
But I would like to compare samples, which are closer to real life situation, such a simple web site banner, and show what programs you can use to optimize image file compression.
Here’s a sample image saved with different image quality:
Original Image – PNG, Image size: 43KB
JPEG Image – Quality: 100% (PhotoShop compression quality: Maximum), Size = 24KB
JPEG Image – Quality: 80% (PhotoShop compression quality: Very High), Image Size: 14KB
JPEG Image – Quality 60% (PhotoShop compression quality: High), Image size: 12KB
JPEG Image – Quality 30% (PhotoShop compression quality: Medium), Image size: 6KB
JPEG Image – Quality 10% (PhotoShop compression quality: Low), Image size: 4KB
As you can see the size differs drastically on the compression quality, and in many situations, when the images do not contain a lot of text or are related to professional photography, the quality can be lowered to reduce the size of the images. How low you should go is absolutely up to you and your attention to details. It is just important to remember to review image sizes before putting them online, and make an intelligent decision about how large do you want your image to be, and how fast you want your page to render on the screen of internet users.
The best way to review image sizes and quality if you are using PhotoShop CS editions is to choose to “Save for Web“. PhotoShop shows you image preview and quality comparison right in the save dialog:
As far as free alternatives to PhotoShop go:
– if you are using Picasa, one of the ways to do that if you choose to ‘Export to Folder’, and specify ‘Image Quality’ in the dialog, opting for ‘Normal’, ‘Minimum’, or ‘Custom’ where you can specify the exact compression quality
– or you can use MS Paint, which by default already saves with relatively lossy compression settings, and which you can also override through the registry