There are many ways to optimize your website and emails; some are more complex than others. One of the easiest -- and most rewarding ways -- is to optimize your images. This can result in significant improvements in the time it takes to load your page without sacrificing your image quality.
The best place to start is by picking the correct image format for your graphics. There are numerous file formats out there: .jpg, .gif, .png, .svg; each with its own advantages and disadvantages. Deciding which format to use can be daunting. Below is a quick primer on all four:
IMAGE FILE FORMAT BASICS:
JPEG/JPG: short for “Joint Photographic Experts Group”, JPEG is a “lossy compression” format primarily used for digital photos. “Lossy compression” basically means that you can reduce the quality of the image as much as you like to reduce file size, but quality will suffer as well.
GIF: short for “Graphics Interchange Format”, GIF is a widely supported format but is restricted to 256 colors for its palette, which means it is not a great choice for digital photos. This format is primarily used for simple logos, images and of course animated (and hilarious) .gifs.
PNG: short for “Portable Network Graphics”, PNG was actually created as a replacement for GIF and has lossless image compression. It can also handle transparencies, which makes it very popular for logos and simple graphics.
SVG: short for “Scalable Vector Graphics”, SVG is becoming a very popular format for its ability to easily scale and animate. This format can also be edited in developer tools and creative software and provides a lot of flexibility. However, if supporters visiting your site use IE8, SVG is not supported on that, or any earlier versions of Internet Explorer. Like GIFs and PNGs, SVG is best for simple color graphics and logos, but unlike those formats, you can create a graphic at one size and resize it with CSS (Cascading Style Sheets) and still maintain the quality.
CHOOSING THE RIGHT IMAGE FORMAT
So, now that we understand a little more about the types of files, how do you choose the best format to use? When it comes to posting photographs on your pages, the obvious and simple choice is JPG/JPEG. This format has the best compression/quality you can achieve for photographs. But what about logos and other graphics that aren’t photographs? It really depends on the intent. When posting infographics or other graphics that are more illustrative (and don’t include photos), save them as PNGs.
For logos, SVG probably best. It allows you to have just one image stored on the site and scales accordingly, based on its placement with CSS. Using this method can be more complex and appearance depends on your audience’s web browsers. If most of your website traffic is from older Internet Explorer browsers, it’s probably best to continue using PNG. The best of both worlds, and a more progressive enhancement approach is to have SVG support for modern browsers and fallbacks to PNG for older browsers.
HOW TO COMPRESS IMAGES
Now that you’ve decided on a format to use, the next step is to compress your images. Compressing an image decreases your visitors’ page load (a huge benefit for mobile visitors!). And in most cases, compressing images properly results in the same quality of image with significant filesize reduction. For example, the two images below look the same, but one has been compressed to save file size. Can you guess which is which?
The left image is the original 78 kb file, while the right has been run through compression and resulted in reducing the file size to 29kb (that’s a 62% reduction!). Now imagine optimizing all of your images on your website this same way, thus reducing the load time of your site significantly by adding this simple step to your workflow.
Now you’re asking - how do I compress images? There are many ways to achieve this, but one of the most common is using the Save for Web functionality in Photoshop. If you don’t have Photoshop, there are numerous services online both free and paid. For the examples in this post I used TinyJPG, a free online service that you can simply drag and drop images to compress them for your site. They also have a service for compressing PNG’s, which is also very helpful.
Here’s our logo as a transparent PNG, again the left side is the original file while the right is compressed.
The savings? The original file was 26 kb and after putting it through TinyPNG, it reduced the file to just 4kb! That’s an 85% reduction in file size.
So what about GIF and SVG? There are methods to compressing these file formats down, but you won’t see as significant in file size savings as you will in compressing PNG and JPGs. The optimization methods for SVG’s can be more complex, so we’ll save that for another day.
I hope these best practices help, I know your visitors will love them!