Website Performance Optimization - Part 3: Images
In the first part of this series we discussed a few reasons why speeding up your website is important. In part two we covered developer tools and resources that can help identify improvement opportunities. Now we are going to discuss image compression and how this impacts overall website performance.
If you have ever worked with talented graphic designers you will know that designers LOVE big graphics with large file sizes. Designers have a tendency to want to keep all that amazing detail they have worked so hard to achieve in Photoshop or Illustrator. The good news is Adobe Photoshop has a fantastic tool that lets us experiment with different levels of compression and preview the resulting image. Using the “Save for Web & Devices” feature you are presented with many options. As you adjust these options you will see a preview of the original and optimized image and the resulting file size.
Choosing the right compression level is ultimately a matter of judgment to strike a balance between file size and image clarity. Sometimes it takes some experimentation. Images that will be very visible, key to your branding or otherwise important, you may want to use JPG High, Very High or Maximum. For images that have lower visibility or images that are part of the overall background of a website it might be acceptable to use Medium or Low compression.
A recent trend in web development is using the file type PNG over older file types such as JPG or GIF. PNGs have 24-bit transparencies that have many creative uses in web development. But one thing to keep in mind is these transparencies increase the file size of an image. If an image does not need a transparency you may be better served using GIF or JPG. Both GIF and JPG will have more compression options and 24-bit PNGs. Experiment with different file types to get optimal clarity and file size.
An image sprite is where multiple images are combined into one large image.
Like the other techniques discussed this also has advantages and disadvantages. The advantage to combining several images into one is this reduces the number of HTTP requests to your server. Each request has a small overhead in terms of speed and latency. Reducing the number of request will improve the overall page speed. The disadvantage is combining multiple images into one can make edits more time consuming and challenging.
Images are almost always the largest percentage of the total page size. By saving a few kilobytes per image the total speed and performance can be vastly improved. This performance can lead to large savings in hosting costs and improvements in SERPs.
Please contact us to learn more!