Image optimization is a necessary component of any website.  In order to have a successful website in today’s world, it must be fast and look good.  Image compression can help accomplish this goal, as it allows the web designer to use visually stunning, high quality images that can be compressed into smaller file sizes.  The end result being a website that is striking and unique, with a minimal load time.

There are two main components of image optimization, image compression and image spriting.

Image Compression

There are two types of image compression, lossless and lossy.

  • Lossless Compression – keeps all information from the original image.
  • Lossy Compression – “loses” some information in the compression process.

Since most images on the web are saved in either GIF or JPEG format, lossy image compression is acceptable.  GIF images (256 colors) are reserved for logos, so compression in most cases will not even be noticed.  JPEG image compression eliminates minute details in the image that the human eye wouldn’t notice anyway.

In general, image compression includes:

  • Cropping and Resizing
  • Color
  • Brightness
  • Contrast
  • Exposure
  • Hue
  • Saturation

Before: 250 KB

Before

After: 55 KB

After

We found using Compressor.io extremely useful for helping us create optimized images.

Image Spriting

So, all of your images are compressed and look great, but the page still does not load as fast as you would like, now what?  The next step is to sprite your images.  Spriting is a CSS technique that takes all images of a similar width on your page and combines them into one larger image.  Say, for instance, you have 5 images that are similar, you can sprite those images into 1, eliminating four server requests in the process.  When it comes to web page load times, minimizing server requests is crucial.

We found using SpriteMe extremely useful for helping us create image sprites.

What are the core components to optimizing images?

In the end, your goal when it comes to image optimization in relation to website load time should include the following:

  • Individual Image Compression
  • Image Sprites