Using Adobe Photoshop To Optimize Graphics Can Boost Site Load Times

There are actually two great programs for image editing, Corel Photo Paint & Adobe Photoshop.

Either one of these tools is an outstanding image editor & something that no serious webmaster should ever be without.

Although to be perfectly honest with you, if you do not yet use one of these tools to create your own web graphics, then be warned, they do take a bit of getting used to & you can look forward to a fairly steep learning curve for a few weeks at least.

Now what I intend to show you in this article , is not how to use photoshop, but more of what to do with it. More importantly what to do with your images in order to help speed up your website.

Pay Attention To Your Image Formats

One of the major factors regarding web page load times, is the size and resolution of images. Many people are under the misapprehension that .png graphics are actually smaller than .jpg & therefore will load faster.

 Test images from left to right = Gif, Jpg, Png

If you study the images above, you can actually see a difference in quality especially in the text, however reading from left to right these are the image sizes;

1.Left – Gif Image = 9.50kb | 2.Centre – Jpg Image = 17.01kb | 3.Right – Png Image = 24.5kb

1. Gif images are commonly used for text, line art & of course moving graphics, also useful for transparent backgrounds. Gif images are limited to 256 colours and therefore often produce pixelation when used to display photos.

2. Jpg / Jpeg are the recommended image format for general web use of photos, this format of image file will display skin tones & photos far better than Gif files hence the increase in file size. When saving Jpg images with Photoshop, you are asked to select a resolution & if optimized for web or just standard. The image above was saved as optimized for web on a resolution setting of 5 (medium).

3. Png files really give the best of both worlds as they are ideally suited to work with transparent backgrounds, whilst still maintaining excellent colour depth & image quality of photos.

Use The Correct Image Format

These examples clearly show that .png are indeed the largest of the image types & not the smallest as is often reported. However .png images do produce the crispest & clearest of colours & are also useful for transparent backgrounds. Any image compression will ultimately give some loss of quality & this is reflected in the difference in the image sizes. It should be clear from the above images that great savings in page load times can be made by using the correct format for any given situation.

One other thing you can do very easily using Photoshop, is to crop your images to the exact size you need e.g. if you need a particular image as a 150 x 150 thumbnail, then take a copy from the original and resize it. If this is done throughout your blog or website, instead of allowing software to do the job for you, then the savings in page load times can be considerable.

Steve Nickson | Create Your Badge