4-step guide to WordPress image optimization

Crop, resize, save, compress

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.

page-speed-insights

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

Bytes-per-pageStudies 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.

Properly optimizing images reduces page load time, conserves hosting storage space, and takes up less of a user’s sometimes costly mobile bandwidth allowance.

 

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

You’ll need an image editor for this step. Photoshop is the industry standard but use whatever software you’re comfortable with.

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.

Cropping an image
Cropping an image

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:

media-settings

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.

For Mac users, ImageAlpha and ImageOptim are free desktop applications that optimize PNGs, while JPEGmini handles JPEGs.

imagealphaJPEGmini also works on Windows, as does the free RIOT application, which also handles PNGs.

Platform agnostic web services like TinyPNG and Kraken.io optimize your uploaded image file and provide a download link to the optimized version. I love ‘em.

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.

ewww-pluginA popular free plugin is EWWW Image Optimizer. It performs lossless compression by default, but the plugin’s creators also offer a paid service upgrade that enables efficient lossy compression.

compress-pluginIf 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.

imsanity-pluginFinally, 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:

  1. Crop and resize.
  2. Save as PNG or JPEG.
  3. Compress with modern tools.
  4. 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!

Image by: DaveAustria.com via Compfight cc

Tom Ewer
Tom Ewer is a freelance writer, online entrepreneur, and the founder of Leaving Work Behind and WordCandy. He has been obsessed with WordPress since he first laid eyes on it, and has been writing educational and informative content for WordPress users since 2011. When he's not running his businesses, you're likely to find him outdoors somewhere – as far away from a screen as possible!