If you’re like most site owners, you love doing the fun stuff. That could mean anything from crafting an epic piece of content for your website to publishing daily blog posts. Optimizing images is often an afterthought, if it’s done at all.
Image optimization might not seem like a big deal – especially if you’re on a high-speed connection – but many of your visitors are on slower (often mobile) connections. Also, if you’ve ever performed a Google PageSpeed Insights test on your website, you may have been advised to Optimize Images.
Luckily, there are excellent tools available to assist in this process. In this article, you’ll learn the importance of optimizing images and see how effortless it can be with our simple four-step guide.
Why image optimization is important
Studies show that 40 percent of visitors will abandon a website that takes longer than three seconds to load. Also, according to HTTP Archive, images tend to make up the largest portion of an individual web page’s size:
With more than half of your site’s visitors browsing on slower mobile devices and connections, it’s important to make web pages as compact as possible.
If you’re curious as to how your current website measures up, run a free test at GTmetrix and take note of any image optimization recommendations.
Now let’s get onto our four-step image optimization process!
Step 1: Crop and resize your image
Unless you’re going for an artistic effect, you can usually crop a picture and focus in on the important area to reduce overall size.
Unless your site requires high-resolution images, you’ll want to scale the image down. 1,280px is a typical maximum width for a full-sized image – less for a cropped image.
As a handy feature, WordPress automatically creates multiple versions of uploaded image files, with different dimensions to be used as thumbnails or inserted into posts:
On Retina (high resolution) displays, normal-sized images can appear pixelated. Retina image support isn’t currently built into WordPress, but the excellent WP Retina 2x plugin makes up for that fact. You can also manually save an additional double-sized copy for Retina displays – e.g. 1,280px and 2,560px – if your source image is large enough to allow for this.
Step 2: Save your resized image as PNG or JPEG
The two most widely used image file formats online are PNG and JPEG. Only PNG supports image transparency – useful for logos for example – but if you’re in doubt which format to choose, here’s a good rule of thumb:
- PNG is best for transparency, graphics, line drawings and text-heavy images.
- JPEG is best for photographs and photograph-heavy compositions.
You’ll be doing the real image compression in the next step, so don’t be overly concerned with compression when saving files. Use a high-quality setting for JPEGs and PNG-24 format for PNGs.
With your image cropped, resized and saved, you’re ready to compress.
Step 3: Reduce file size with modern image compression
The goal of image compression is to reduce the size of the image file without substantially altering its appearance.
Image compression comes in two forms: lossy and lossless. Lossy compression (used by the JPEG format) can introduce visual artifacts but reduces file size more. Lossless compression (used by the PNG format) retains perfect visual quality.
Modern compression tools analyze an image to dramatically reduce the file size without noticeably altering its quality. They can also remove image metadata to shrink file size down to the absolute maximum.
JPEGmini also works on Windows, as does the free RIOT application, which also handles PNGs.
While this extra step can be time consuming, the file size savings are definitely worth it.
Step 4: WordPress plugins for image optimization
By using WordPress plugins, you can eliminate step three. You’ll have the ability to upload un-optimized JPEG and PNG files and have the plugin replace them with optimized versions. You do lose the ability to tweak each image and a paid service might be required to substantially reduce file size.
If you don’t upload lots of images each month (100 or less, depending on your WordPress setup) – or are willing to pay a fraction of a cent for each optimized image beyond that – the Compress JPEG & PNG images plugin by TinyPNG is one option.
Kraken Image Optimizer is a similar plugin with a minimum cost of $9 for 2GB of images optimized per month.
These types of plugins are truly hands-off as once installed, uploaded images are automatically optimized behind the scenes.
Finally, if you (or your contributors) fail to resize images before uploading, installing the Imsanity plugin is a safeguard that takes care of scaling down the image to predetermined dimensions and replacing the original file.
Summing it up
Although many consumers have high-speed connections at home, optimizing images is more important now than ever as mobile usage increases.
To recap, here’s a handy checklist for optimizing your images:
- Crop and resize.
- Save as PNG or JPEG.
- Compress with modern tools.
- Use WordPress plugins to automate compression.
How do you optimize your website images? If you’ve neglected to do it, do you plan to start? We’d love to hear about your thoughts and experiences!