Category Archives: SharePoint

Web Site Performance and JPEG Compression

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
apticonlogo

JPEG Image – Quality: 100% (PhotoShop compression quality: Maximum), Size = 24KB
apticonlogo99

JPEG Image – Quality: 80% (PhotoShop compression quality: Very High), Image Size: 14KB
apticonlogo80

JPEG Image – Quality 60% (PhotoShop compression quality: High), Image size: 12KB
apticonlogo60

JPEG Image – Quality 30% (PhotoShop compression quality: Medium), Image size: 6KB
apticonlogo30

JPEG Image – Quality 10% (PhotoShop compression quality: Low), Image size: 4KB
apticonlogo10

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:

apticonlogophotoshop

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

Visual Studio 2008 Extensions for SharePoint (VSeWSS 1.3)

This one is the biggest pet peeve about SharePoint development for me right now.

Microsoft SharePoint product team is blowing all bells and whistles, announcing SharePoint 2010, and how important it is to switch to 64-bit environment, while poor SharePoint 2007 left in the dust and crippled with the only development extension working on 64-bit, which is still in CTP phase Visual Studio Extensions 1.3 (March 2009 CTP).

VSeWSS 1.3 was promised almost half a year ago to become a final release in the spring of 2009, and later on in one of the dev blogs mentioned July 2009 release date, but up to this date there hasn’t been any final version announcement or releases yet.

Also, if you are looking for more information and code snippets, you may still find useful referring to the samples that come with Visual Studio Extensions 1.1 for Visual Studio 2005 User Guide, which have been removed from 1.3 release.

I’m keeping my fingers crossed for the new release to come soon, while blaming it all for the recession…