• YouTube - Division 1
  • Google Plus - Division 1
  • Twitter - Division 1
  • Facebook - Division 1

Optimize Your Website's Images Like a Pro

Thursday, June 08, 2017 1:00 PM

With the ongoing popularity of large images on websites (whether it's a hero image on a home page or a series of high-resolution product photos in an online store) and an increasingly mobile web, image optimization has never been more important. Thankfully, there are several paths you can take to speed up your image load times while keeping your images aesthetically pleasing.

Choosing the Right File Type

Not all file types are created equal when it comes to different applications.

JPEG: Best used for photographic images with lots of detail, gradients, and soft edges that don't require transparency. JPEGs are 'direct colour' files so the image can contain many thousands of colours chosen by the image author.

GIF: Best used for brief animations, or small icon or logo images. Can be used with a solid background or with transparency. GIFs have a limited palette so they are not a good choice for large images with a lot of detail. GIFs are 'indexed colour' files, so the file has a set number of colours available for use (usually 256). This makes these images a poor choice for photographs, as they will appear pixelated.

PNG-8: An alternative to GIF files, PNG-8 files are indexed colour files with a limited palette. They are best used for the same kinds of applications as GIFs, with the added bonus of much better transparency support.

PNG-24: The nuclear option of image quality. PNG-24 are direct colour files with excellent transparency support. The upsides? They are compressed files with thousands of colours that will work for photos, graphics, icons, etc. The downside? Larger file sizes. PNG-24 is not ideal for photographs as an equivalent JPEG will be much smaller in file size.

Image Optimization Services

Bountiful image optimization services exist online, from somewhat limited free services to more in-depth paid services. As an example, Kraken.io offers both a free web interface with image size limits as well as a paid version that offers an unlimited web interface, API access, cloud storage for your images, and plugins for some CMSs.

Visit the Kraken Website

Using the free interface, you can bulk upload your images (individual images must be under 1MB in size), select how much you would like to compress your image, and download your compressed images all on one page.

Kraken will often strip away between 60%-80% of an images' size using lossy compression. Even their lossless compression algorithm (which retains 100% of the original's visual information) will often strip away around 25% of the original images' size.

Want a more in-depth look at image optimization? Watch the video here.

Chris Bull

Chris Bull

Chris Bull is a front-end web developer and has been working at Division 1 Media Corp. for 8 years. He would much rather write about web development than himself.

comments powered by Disqus