Don’t Click ‘Publish’! 6 Best Practices for Optimizing Images
“Image optimization is both an art and science: an art because there is no one definitive answer for how best to compress an individual image, and a science because there are many well developed techniques and algorithms that can significantly reduce the size of an image.” – Google tips for image optimization
I recently had the “opportunity” to optimize a non-profit’s WordPress site. The site looked fantastic but its load time was north of 10 seconds, which ranks it pretty competitively with Geocities sites back in the 1990s. I was able to decrease the load time to about 1 second, primarily by decreasing the size of the site images. I brought a lot of hubris to this piece, until I researched a little bit to find that a lot of what I assumed is wrong.
Fortunately, Google’s knowledge of image optimization is much better than mine. What I want to do in this post is distill what Google recommends for image optimization into six useful tips that anyone can use to make their images more web-friendly.
Google says that there are two ways that you can optimize your images:
- Optimize the bytes that encode pixels
- Optimize the total number of pixels
This just means that sizing and compression are the tools that you’ll use to optimize your images. Site speed is largely dependent upon image load time and iOS won’t cache any component that is over 25kB. Additionally, high resolution devices demand better image quality, so optimization is increasingly important for user experience on multiple devices.
Essentially we just want to serve the smallest file that we can to render the image that we want. It seems pretty simple, right? Well, it isn’t….
1. Pick the right type of file
There are two types of images that you’d post to a website:
- Vector graphics (SVG, EPS, PDF)
- Raster graphics (JPEG, GIF, PNG)
Let’s consider each type of file and how Google suggests that you use each:
Vector graphic: a combination of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics. (source: Wikipedia)
Google suggests that you use vector graphics whenever possible. This is because vector graphics scale larger with no increase in file size and little change in resolution. You can understand why files with these characteristics would be helpful: it is a small file with a proper visual. There are some caveats to using vector graphics in your content:
- WordPress doesn’t support vector graphics. You’ll need an external plugin such as Scalable Vector Graphics or Custom Post Type to upload these to a self-hosted WordPress site.
- Translation tools will render big files if you’re not careful. Tools like Autotracer will translate raster images (JPEG, PNG) into vector images, but you have to be careful how you use these. You’ll want a smaller input file in order to create a smaller vector image that will scale larger. I use Canva for my post images, and they have an export to PDF feature to create a vector image. However, you’d want to create a smaller image using custom dimensions in order to maximize the effectiveness of a vector graphic.
- Vector graphics limit what you can express in an image. Vector graphics aren’t going to properly express photo images and have other shortcomings due to their nature.
Here’s how Google recommends using vector graphics:
“Vector formats are ideally suited for images that consist of simple geometric shapes (e.g. logos, text, icons, and so on)”
Raster graphic: a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats (source: Wikipedia)
Raster images are the images that we are most familiar with: JPEG, GIF, PNG. There are other file formats for raster images but these are the three that Google focuses on (and I will, too). Let’s examine these by their utility:
- JPEG – This is a common raster filetype characterized by its capability for lossy compression (you can decrease the resolution of a JPEG file).
- GIF – This is a common raster filetype characterized by animation.
- PNG – This is a common raster filetype characterized by the capability to have transparent elements.
For a static file, you’re generally choosing between a JPEG (typically smaller except at high resolutions) file and a PNG file (typically larger).
There are also a couple of other raster filetypes that are notable:
- JPEG XR – A raster file developed by Microsoft that decreases files size with increased quality relative to JPEG. It is only supported in Internet Explorer (presumably it will be supported by Spartan, too).
- WebP – A raster file developed by Google that purports to decrease files size by up to 34 percent. It is only supported on the Chrome, Opera and Android browsers.
These two filetypes decrease file size even further than the three universally user raster filetypes, but can (should) only be implemented with conditions that recognizes browsers or with CDNs that support browser-conditional rendering.
Below is Google’s matrix of how different raster images can be used and which browsers support each file type:
2. Understand the two types of compression
We said that compression is one of the primary tools that we can use to optimize our photos. There are two types of compression:
- Lossy compression – eliminates the pixel density. An example of this would be to choose percent quality of a JPEG image in Photoshop.
- Lossless compression – compresses the pixel density. An example of this would be Yahoo’s smush.it tool, which is actually a amalgam of compression tools to create a smaller file of the same quality as the original.
Compression illustrates how JPEGs can be smaller than PNG files: You can only use lossless compression with PNG files, but can use both lossy and lossless compression on JPEGs.
For vector files, Google recommends configuring your serve to apply GZIP compression for SVG files. This is a form of lossless compression that can be applied to vector graphics as well.
3. Remove unnecessary metadata
If you’re using photo images, odds are that there is extraneous metadata associated to your photos. Removing this EXIF (Exchangeable image file format) data may decrease the size of your images further, but it’s not an easy process.
You can strip metadata using Windows, or a host of third-party applications such as ImageOptim, VerExif, and Batch Purifier Lite. I can’t find a WordPress plugin which does this, and it appears this may be because of copyright liability or speed.
In any event, stripping metadata is something that takes a little time to accomplish.
4. Rescale Images
I have a responsive website. My images scale down if you’re using a mobile device so that the image renders relative to the screen size. The problem with this is that image file size doesn’t change, which adds a lot of time to mobile downloads.
Google ran a hypothetical exercise estimating the excess pixels resulting from small discrepancies in screen size versus pixel size. The excess is quite remarkable:
If there is a way to use screen-size or device-specific conditions to dictate the (actual, not displayed) image size – this could save you excess load time especially for mobile users.
One of Google’s recommendations is to automate the optimization process. For some tasks (like metadata removal) it’s not as easy, but for WordPress users there are a lot of different options. I’ve used WP Smush.it (which ironically is no longer using Yahoo’s smush.it to compress images), and EWWW Image Optimizer. These both cost a nominal amount but do a great job. I currently use ShortPixel. There are a ton of options, probably mostly good.
For non-Wordpress users, you can use an external site such as Yahoo’s Smush.it to manually compress your pictures (in bulk) as well. I guess we’ll generously call that option, “semi-automated.”
One last thing that I wanted to mention: many of these tools may ask you to load third-party apps on your server. This is because they use many different tools to accomplish image compression. Here’s a list from smush.it’s FAQs describing the purpose for each application:
- ImageMagick to identify the image type and to convert GIFs to PNG.
- pngcrush to strip unneeded chunks from PNGs. We’re currently experimenting with other PNG tools such as pngout, optipng, pngrewrite that will allow for even better png optimization.
- jpegtran to strip all meta data from JPEGs (currently disabled) and try progressive JPEGs.
- gifsicle to optimize GIF animations by striping repeating pixels in different frames.
Google also mentions pngquant as an app that can be used for compression purposes. In case some plugin wants you upload these, you’ll know what they do and why they’re important.
Once you’ve done all of these, you need to test to see how effective your optimization was. I mentioned the non-profit I worked with, we spent a ton of time using Pingdom Tools to troubleshoot load time issues (image load time is painfully obvious, by the way). Here’s a screenshot of the load time of four images on a recent Cision post:
You can see that they load very fast, and that Pingdom gives you a great visual idea of how long it is taking to serve an image (or anything for that matter). There are plenty of tools that do this, though. The important thing is that you’re not taking load time and user experience for granted.
What I wanted to do was share some image optimization tips from Google. As much as I took pride in driving my own load times down (as well as others), I admit that I was quite ignorant of many of these points. I hope it was helpful for you as well.
If you haven’t been optimizing your images, this may be a lot to take in. So I’ll end with some perspective from famed computer scientist Donald Knuth:
“If you optimize everything, you will always be unhappy.”
Communications Best Practices
Get the latest updates on PR, communications and marketing best practices.
Cision Product News
Keep up with everything Cision. Check here for the most current product news.
Thought leadership and communications strategy for the C-suite written by the C-suite.
A blog for and about the media featuring trends, tips, tools, media moves and more.