Optimize Web Images For Speed Using Photoshop
Optimizing web images using Photoshop is one of the easiest methods by which to reduce your site load time, your monthly bandwidth & also has some SEO benefit, since Google’s introduction of site speed as a ranking factor. Many people are running around like headless chickens, trying all manner of little tricks to help shave a few milliseconds of their site load times, when really they need just focus on what is the commonest cause of a slow site “IMAGES”.
The biggest problem is the fact that unless you actually work as a graphics designer, then the majority of people do not know, or at the very least are unsure about how to best optimize their images. So we are going to look at the different image formats & what particular task each file format is best suited to.
First of all there are 3 main image formats that we are likely to deal with, GIF, JPG & PNG. Now using photoshop, we have access to what we could call “sub formats” within each of those main formats, these are as follows;
GIF = GIF128, GIF64, GIF32: Great for text, transparancies, moving images.
JPG = JPG high, JPG medium, JPG low: Great for photos, especially people & landscapes.
PNG = PNG24, PNG8: Great for smaller images like icons, but also transparancies.
Now nobody can tell you that you should use one format over another, it depends solely on the type of images you are using & each format or type of image has it’s advantages. So lets look at a few examples that many people use in their blogs.
Example Images & File Sizes
 |
 |
 |
| PNG – 25.8kb | JPG – 6.53kb | GIF – 7.57kb |
 |
 |
 |
| PNG – 31.8kb | JPG – 5.97kb | GIF – 3.88kb |
 |
 |
 |
| PNG – 56.kb | JPG – 11.8kb | GIF – 12.6kb |
 |
 |
 |
| PNG – 27.8kb | JPG – 4.0kb | GIF – 4.47kb |
 |
 |
 |
| PNG – 11.9kb | JPG – 5.02kb | GIF – 4.59kb |
 |
 |
 |
| PNG – 61.5kb | JPG – 13.7kb | GIF – 9.75 |
| Total = 214.8kb | Total = 47.02kb | Total = 42.86kb |
I think everyone would agree that the PNG Image, is without doubt the best for clarity & colour depth, but just look at those sizes! By optimizing our images & selecting the correct image format for the job, we could reduce the total size by approximately 456%, which would have a huge impact on our site load times.
If you have ever downloaded any file from the Internet, you will already be aware that the larger the file, the longer the download will take & this is true of your own websites also. Therefore optimizing our images is a crucial factor in reducing our site load times & to help with this there are a couple of simple tips to remember;
1. Use PNG for icons especially with reflections & transparency. Icons are usually pretty small in physical size anyway(typically 64px x 64px), so the actual size of the file will very often only be around 3 to 5kb.
2. Use JPG for photos (especially those with skin tones or many different colours), screenshots & any other large images that are not made up mostly of text or just a few colours. Very often you can get a JPG to around 1/5th the size of a PNG file with minimal loss in quality.
3. Use a GIF for artwork, text, line art, transparency or moving images. A GIF format can on occasion produce a suitable image even smaller than JPG, but it is purely dependant on the colour depth & subject matter of the image. As an example, look at the images above, the cartoon image is smaller than the equivalent JPG yet there is virtually no visible difference in the images. The same would be true of a text or line art image, yet when comparing the other images, it is clear that pixelation is occuring simply because a GIF is not designed to deal with the amount of different colours & shades used in the other images.
Choosing how to save your images in Photoshop is fairly straight forward & once you have followed the method once it will soon become an automatic process. Follow these simple steps;
1. click “file” top left
2. select “save for web”
3. select your file format from the right hand panel (see image below)
Choose image format based on content of the image.
4. Select “save” to save your file using the image format selected.
Note: By initially selecting “Save For Web”, this actually optimizes your image for the internet, your further choice of image format & quality settings can be seen as further fine tuning of the image.
Get into this habit when saving your images & you will be amazed at how much you can shave off your site load times & although I refer to optimizing your images with Photoshop in this article, you should find the same facility available in any quality image editing software.
No related posts.
Posted by Steve (Admin)
on Jul 21 2010. Filed under Custom Graphics.
You can follow any responses to this entry through the RSS 2.0.
You can leave a response or trackback to this entry
Hi Narek,
Optimizing images for size is really no different to optimizing your images for speed, ultimately the size of an image file will govern how long it takes to load, when displayed on a web page. Therefore the goal is always the same, to obtain as small a file size as possible, without having a detrimental effect on the image quality & it has been the pursuit of this goal that has brought about the different compression methods over the years. One thing I neglected to mention in this article, is the use of scanners in obtaining a digital copy of an image. Many people will mistakenly scan in an image at huge resolutions, thinking that they will get a much better quality, when in actual fact, the human eye is more often than not, incapable of seeing any noticeable improvement in any resolution higher than about 150dpi & with a 24bit colour depth.
Hope that helps
Is there anything you can tell us about Optimizing images for file size?