1-888-760-0878

Image optimization for the web

If you need to make your website load faster, rank higher in the search engines, and retain more of your visitors, then you have come to the right place.

We have put together this post to show you how images can be optimized for the web and resources on how you can optimize your images to load faster so that your website can gain more favor with both visitors and search engines.

The problem with most images is the fact that they can add major load times to your HTML as well as take up space in your database on a dynamic CMS like Joomla. By reducing the size of each image you can drastically reduce the time that visitors and search engines can view your website. General rule of thumb is the faster you pages load, the less bounce rate you will have and the more favorable you will become to the major search engines.

The following article will show you more detailed information and resources for compressing your image and teach you a lot of the information that you may not be aware of that can reduce your image sizes.

 

 

Why Optimize?

The most common mistake that most web designers make is that they do not optimize the images used on the website. Most images are not "web ready" and will require some work before you can use them on a website. Simply resizing or rescaling an image does not automatically optimize it for the website. For instance you can have three identical image on a web page and they will all load on the website with three different speeds. We will discuss the different benefits and areas of image optimization that are needed so that you can have a fast loading website and offer your visitors a good user experience.

General Guidelines

Images should never be more than approximately 150 kb in size
Use thumbnail images to link to larger sized images if needed
Keep images on your website scaled to a consistent size across all pages of your site. For instance keeping all your images scaled to a width of 150 pixels wide will give your site a very consistent look and feel across all pages.
Keep the amount of colors used in the images to a minimum. The larger the color spectrum the longer it will take to load the image.
Use the proper image formats. GIF and JPG images are the most commonly used formats for web imagery.

Image Data

When we think of meta data you mind usually leans towards a web page's meta data tags. But in this article we are going to talk about image meta data. Image data can be perceived as many different things. Simply uploading an image to a web directory and using some HTML insert tags to rescale an image does nothing to actually re-size the image. You need to actually compress the image data itself. As you read on you will find that image data can have less to do with the size of the image than you think.

Image Meta Data

Did you know that images can contain meta data? That's right. There is actual data that is included with most images.
For instance, take the image below. Below the image you will see the meta data from the image and you can see that an image can have a lot of data associated with it.


01

Format: JPEG (Joint Photographic Experts Group JFIF format)
Class: DirectClass
Geometry: 2048x1536+0+0
Resolution: 72x72
Print size: 28.4444x21.3333
Units: PixelsPerInch
Type: TrueColor
Endianess: Undefined
Colorspace: RGB
Depth: 8-bit
Channel depth:
red: 8-bit
green: 8-bit
blue: 8-bit
Channel statistics:
red:
min: 0 (0)
max: 255 (1)
mean: 150.775 (0.591275)
standard deviation: 63.8859 (0.250533)
kurtosis: -1.36082
skewness: -0.0290662
green:
min: 0 (0)
max: 255 (1)
mean: 169.525 (0.664803)
standard deviation: 50.9347 (0.199744)
kurtosis: 0.393293
skewness: -0.908913
blue:
min: 0 (0)
max: 255 (1)
mean: 188.551 (0.739417)
standard deviation: 51.8458 (0.203317)
kurtosis: 2.19517
skewness: -1.25287
Image statistics:
OverAll:
min: 0 (0)
max: 255 (1)
mean: 127.213 (0.498874)
standard deviation: 88.9589 (0.348858)
kurtosis: -1.38125
skewness: -0.329876
Rendering intent: Undefined
Interlace: None
Background color: white
Border color: rgb(223,223,223)
Matte color: grey74
Transparent color: black
Page geometry: 2048x1536+0+0
Dispose: Undefined
Iterations: 0
Compression: JPEG
Orientation: TopLeft
Properties:
create-date: 2011-06-13T23:53:01-04:00
exif:ApertureValue: 6/1
exif:ColorSpace: 1
exif:ComponentsConfiguration: 1, 2, 3, 0
exif:CompressedBitsPerPixel: 7912224/3145728
exif:Compression: 6
exif:Copyright: Copyright 2002-2003
exif:DateTime: 2003:01:01 03:17:17
exif:DateTimeDigitized: 2003:01:01 03:17:17
exif:DateTimeOriginal: 2003:01:01 03:17:17
exif:DigitalZoomRatio: 100/100
exif:ExifImageLength: 1536
exif:ExifImageWidth: 2048
exif:ExifOffset: 2400
exif:ExifVersion: 48, 50, 50, 48
exif:ExposureBiasValue: 0/10
exif:ExposureTime: 1/231
exif:Flash: 24
exif:FlashPixVersion: 48, 49, 48, 48
exif:FNumber: 8/1
exif:FocalLength: 567/100
exif:ImageDescription: IM000318.JPG
exif:InteroperabilityOffset: 4918
exif:InteroperabilityVersion: 48, 49, 48, 48
exif:ISOSpeedRatings: 100
exif:JPEGInterchangeFormat: 5082
exif:JPEGInterchangeFormatLength: 4407
exif:LightSource: 0
exif:Make: Hewlett-Packard
exif:MakerNote: 2, 97, 50, 101, 114, 32, 78, 111, 116, 101, 115, 0, 0, 0, 0, 0
exif:MaxApertureValue: 4/1
exif:MeteringMode: 1
exif:Model: hp PhotoSmart 43x series
exif:Orientation: 1
exif:ResolutionUnit: 2
exif:ShutterSpeedValue: 796578428/100000000
exif:Software: 1.410
exif:SubjectDistance: 1/1
exif:SubjectLocation: 0
exif:WinXP-Keywords: 110, 0, 105, 0, 99, 0, 107, 0, 32, 0, 97, 0, 110, 0, 100, 0, 32, 0, 99, 0, 105, 0, 110, 0, 100, 0, 121, 0, 32, 0, 112, 0, 105, 0, 99, 0, 115, 0, 0, 0
exif:XResolution: 72/1
exif:YCbCrPositioning: 2
exif:YResolution: 72/1
jpeg:colorspace: 2
jpeg:sampling-factor: 2x1,1x1,1x1
MicrosoftPhoto:DateAcquired: 2010-09-09T13:11:38.301
modify-date: 2011-06-13T23:53:01-04:00
rdf:Bag:
signature: 155c12cfe10a94c223aaab92ac80043771f4d38d7935a50e996563a9c69d0ea2

As you can see from the above meta data there is a lot of information that an image can contain that will increase its file size. There are many software products available that can remove meta data from images. One such tool called JPEG & PNG Stripper claims that a test folder with 6000 images and a size of about 557 Megabytes could be reduced by 18 Megabytes just by removing the meta data of the images.

Also keep in mind that image meta data can also be used in cases where the image author has had his original works stolen or leached on other websites. So keep this in mind when using another person's photographic works in your own website because search engines like Google are also capable of scanning image meta data.

One nice tool for viewing an image's meta data can be found here.

Image Formats

The most popular types of images are JPG, GIF, and PNG. In order to get the best results you are looking for you need to understand the differences of each image type and select the image format that will best suite your needs.

JPG images are the most popular because they have the ability to be compressed the best for use in the web. However JPG files do not support transparencies.
PNG and GIF files will both allow transparent backgrounds (with limitations) but keep in mind that older browsers do not support them well. PNG files blend well when placed over a background image because they are the only format to also support graduated blending.

Many of the modern image editing programs will have a way for you to save the image to a "web format". This simply means that it will be saved at approximately 72dpi whereas most image editors will have a default save format of 300dpi which is used for print. So be aware of your image editing software and the default save resolutions that the factory settings may have.

Color Importance

One of the most frequently asked question regarding image optimizations is, can an image be over optimized for the web?
The answer is YES!

As an image is optimized the resolution can become slightly less than the original image. Depending on how much the image is compressed and how many times it is compressed will ultimately determine the clarity of the image in the end result.

Color of an image plays against many factors. The operating system, browser, and video card drivers will all play a part in how the image is rendered and how the end user will be able to view it. Have you ever seen an image on a website that is displayed on two separate computers? They can look quite differently from one viewer to another.

A general rule is that once an image has been optimized or "forced" below 16 colors then the end result can be very unpredictable for the viewer. There is a very minute file size difference between a 4 color image and a 16 color image. So keep in mind that in some cased it is not worth compressing an image past a certain point before you end up destroying the image itself.

Image Compression

Lets look at our example image again below. You will see the initial image sizes and the steps taken to produce a very small image size compared to the original image as we have viewed it earlier in this tutorial. You will see that both images below produced the same result however the file sizes of the image on the right has been substantially reduced with minimal color loss.

Original Image scaled down but not optimized Optimized image
01 02
Image Size: 2048x1536
File Size: 945kb
Image Size: 200x150
File Size: 7.08kb

Now first we need to point out that the image on the left was simply taken by an ordinary digital camera. Nothing special about it. The image was simply inserted into our article as it was saved directly out of the camera itself. You can visually see that the image on the left has some jagged edges where the sidewalk and glass on the building is. This was cause by the rescaling. The image on the right is much smoother where the glass and sidewalk is.

For the optimization steps we will take you through what was done to achieve such a small file size for the same image and actually get better results and clarity than scaling down a larger image.

STEP 1.Using the JPEG & PNG Stripper software I was able to strip out the meta data from the image and deleted 12kb worth of image metadata which brought the file size down to 933kb.

STEP 2. I simply opened up my favorite image editor and re-sized the original image to the size that it needed to be for this web page (RE: 200x150). This brought the file size down from a whopping 945kb to a mere 12.5kb. now you might think that it cannot get any smaller than this but you'll see in step 3 you can go further.

STEP 3. Using Yahoo Smush It I was able to further reduce the file size by yet another 5.43kb (43.37%) to a final file size result of 7.08kb.

So as you can see you can substantially reduce the sizes of an image quite substantially using the steps outlined above.

Image SEO

Not only will optimizing and compressing the file size of your images affect your site's search engine ranking by simply making your pages load faster, you can further optimize your images for the search engines themselves.

If you follow these simple suggestions from the following list you will greatly increase your search engine visibility.

 

  • Use proper keywords in your ALT tags
  • The preferred image format of search engines is JPG
  • Keep your image file sizes small
  • Use clear images. Nobody likes to look at a fuzzy image.
  • Keep your images relevant to the web page topic. Most people do not immediately associate an image with a website topic.
  • Make sure your image meta data contains references to the original work if you are using a copyrighted image that you do not own or have the rights to remove the meta data.
  • Use CSS Sprites where you can to save image load time. Read about CSS Sprites here.

In a world that has come to believe that an image says a thousand words, we need to rethink that opinion when we are Optimizing Images For The Web!

Additional Resources

Rate this blog entry:
0
QUESTION: What wireframing, mockup, and prototypin...
 

Don’t miss any updates and notifications of our new Joomla extensions and all the special discounts we have for you.

We never spam!

Back To Top

Sign up for free stuff and information that will help your business grow.