Go to source
Image optimization is one of the simplest and most effective steps you can take to transform your site from good to great.
Fail to factor it in, though, and you risk antagonizing your users, damaging your revenue and tanking your SEO rankings.
The good news is that thanks to a series of modern tools it’s never been easier to get this crucial part of overall site optimization right.
In this article we’ll go deep on the subject, covering every aspect of what you need to know to ensure your site is punching above its weight when it comes to serving up graphic content.
Let’s start by defining our terms and covering the types of images that are relevant in this context.
An Overview of Online Image File Types
As anyone who’s ever spent time in the Save-as dialog box in Photoshop can confirm, there is a bewildering array of image file formats loose in the world.
When it comes to placing those images online, however, we’re dealing with a relatively fixed subset of options.
Our universe of potential images can be divided into two broad categories:
Vector graphics: Images generated mathematically from basic geometrical shapes such as points, lines and curves.
Raster graphics: Images composed of a rectangular grid of pixels.
The images we’ll be most concerned with from the optimization perspective are raster-based, but it’s worth briefly reviewing the subject of vector graphics before we get down to business.
Vector Images
Due to their computationally generated nature, vector image files come with a number of advantages straight out of the box:
Image quality and resolution independence: Vector images can be scaled up and down to any size without distortion or loss of detail and will display perfectly at every resolution.
Easily editable: Vector images lend themselves extremely well to non-destructive editing and adjustment.
Small file size: Vector images are composed of a series of programmatic instructions which means they have consequently tiny file sizes.
All the points above have traditionally made vector graphics a great choice for designing graphic elements such as illustrations, backgrounds and logos.
From an optimization point of view, they arrive pretty much perfect straight out of the gate. The problem to date has been in securing cross-browser support for their use.
This has led to the slightly awkward practice of designers creating assets for a website in vector-friendly packages such as Adobe Illustrator or Sketch, but then being forced to export a range of different sizes and non-vector formats for use online.
SVGs (Scalable Vector Graphics) are the native web format whose universal adoption would make everyone’s lives considerably simpler in this regard. Unfortunately we are not quite there yet in terms of its support.
That said, after years of incremental progress, true cross-browser support for the format is finally within reach, and the next couple of years should finally see the widespread deployment of true vector graphics online becoming a reality.
Until that day arrives, though, it’s likely that you’ll still have to export vector-based files to raster formats for display on the web. It’s to those formats that we’ll turn our attention next.
Raster Images
The situation with raster images is the opposite of the vector scenario – universal browser acceptance but heavy optimization requirements.
There are three main file types you’ll be spending most of your time with here, and one exciting newcomer on the horizon to take note of. Let’s examine them in turn.
GIFs
Invented in 1987, GIFs (Graphics Interchange Format) are the grand old man of the online image world. Their small file size, limited color palette of 256 colors and support for transparency made them the workhorse of the early web, and a go-to solution for images primarily containing text and/or areas of flat color.
Though GIFs have made something of a comeback with the recent craze for animated GIFs, they are increasingly losing ground to PNGs.
JPEGs
JPEGs have been the universal standard for displaying photos online since the first days of the web and continue to be used on over 70% of websites worldwide.
Their lossy compression basis makes them excellent candidates for heavy optimization and they are perfect for images with a large range of colors and gradients. The one downside is their lack of support for transparency.
PNGs
Originally invented as a response to possible licensing issues with GIFs, PNGs (Portable Network Graphics) provide lossless compression, transparency support and superb image quality.
The 8-bit format makes a natural replacement for GIFs and results in smaller file sizes, while the 24-bit and 32-bit variants offer an excellent alternative to JPEGs. The potential downside is the larger file sizes that can result.
WebP
While the three raster file formats discussed so far are universally deployable across all major browsers, it’s been a while since there has been any real innovation in the space.
That’s potentially set to change with Google’s WebP project, a proposed new image standard that promises reductions of up to 25% in filesize. Though supported natively in Chrome, universal adoption of that format remains some way off.
You can take a deeper dive into the individual raster formats over at Sitepoint’s excellent overview.
To sum things up, vector images are ideal for many use cases, but in terms of day-to-day content creation you will be using a mixture of GIFs, PNGs, and JPEGs for the foreseeable future.
Let’s explore the reasons why optimizing these file types is so critically important.
The Case for Optimization
The speed with which the broadband revolution has hit most countries has led to a certain laissez-faire approach to image optimization in some circles.
After all, what’s another few kilobytes between friends when most users have the ability to stream live sporting events on their mobile devices? Aren’t we past the point of having to worry about such trivialities?
The answer unfortunately is a very firm “no”. Speed matters; nowhere more so than on mobile.
The New Mobile Reality
The tipping point has been well and truly crossed at this stage – mobile is the direction that the entire web is inexorably heading in.
This has two immediate knock-on considerations when it comes to image optimization:
Images can no longer be considered as mere eye-candy to fill in blank space on large devices. They are there to do a job within the context of extremely limited screen real estate.
Though steadily increasing, mobile download rates still lag behind those available on desktop and their usage is metered at potentially prohibitive rates. Every pixel potentially counts.
Given that wider context, let’s look at three reasons why image optimization is a requirement rather than a nice-to-have:
1. Users Demand Fast Pages
Research from the HTTP Archive shows that, next to Javascript abuse, images are the main cause of average web page sizes weighing in at the 1.25MB mark. It’s a far cry from the days of the 5K Challenge.
This creeping obesity in terms of page size comes at a cost: 73% of mobile internet users report that they’ve experienced problems with page load times on their devices.
Meanwhile, fully half of web users say they expect a website to load within two seconds. Unfortunately, the average page load time on a mobile device lingers somewhere around seven seconds. Expectations are simply not being met.
To make a long story short, clogging up your site with unnecessarily huge images means you risk antagonizing your visitors before they’ve even had a chance to engage with your content.
2. Image Bloat Can Tank Search Engine Rankings
Google confirmed what many had suspected as far back as 2010: site speed is an official ranking factor.
Your page should load in one second or less. That extra 200K hiding in your header image isn’t simply a discourtesy to mobile users; it could actively stop them ever finding your site to begin with.
3. Slow Pages Directly Damage the Bottom Line
Combine the previous two points and you have a recipe for choppy financial waters.
Research from Strangeloop shows that as little as a one second delay in page load time can lead to drops in conversion of 7% or more.
Are you really in a position to turn away that kind of money simply by not optimizing your output?
The need for optimization is hopefully apparent by now. Before we explore the range of options at our disposal with web-ready images, let’s talk about some simple high-impact preparatory steps that can make all the difference in terms of later optimization.
Resize Early
Modern digital cameras have advanced to an incredible degree, but in some respects they have gone almost too far. The default images produced by even an iPhone are far larger than anything you need for WordPress.
Depending on your camera’s settings they could arrive as large 7,360 x 4,912 pixels and weigh in at well over 30mb. Resizing for web use is an essential first step in getting matters under control.
You’ll need a tool to do this of course, and the options here are many and various.
If you’re on a tight budget, nothing beats free. Paint for Windows and Preview for Mac can both function as perfectly adequate image resizing tools in a pinch.
If you’re looking for a little more sophistication – while still keeping your wallet safely in your pocket – Gimp provides a free, cross-platform, open-source desktop solution. Online-only options such as Pixlr and Fotoflexer are also available.
Moving into the arena of commercial solutions, Pixelmator on the Mac or IrfanView on Windows both offer excellent overall functionality at affordable prices.
The gold standard remains, naturally, Photoshop. The good news here is that Adobe’s relatively recent announcement of Creative Cloud packages across its software suite has finally put this best of breed photo manipulation tool within most mortal’s financial reach.
Regardless of the solution you end up going for, bear the following points in mind at all times when resizing your images:
Working on a copy of the image (rather than the original high-quality source file) gives you room to experiment and change your mind.
Always be sure to maintain the original image’s aspect ratio without introducing optical distortion when resizing.
Cropping Cuts Both Ways
Next to resizing the overall dimensions of your image, the other crucial preparatory step you should take is cropping.
Trimming the visual fat achieves two purposes:
filesize will naturally come down, and
your images will pack more of a visual punch.
The good folks over at The Next Web have a great tutorial to get you going with focusing in on your image’s key elements.
Getting Ready For Retina
Before we move on to compressing our images, let’s briefly cover the subject of optimizing for retina-ready devices.
Unclear about what retina means in this context? Consult this useful primer before we go any further.
Retina Display is increasingly going to be the new norm for devices of all sizes, and their percentage of site traffic is only going to go up over the next few years.
Unless you want your carefully cropped and resized images to appear choppy and pixelated on modern devices, you’ll need to take this into account.
The Jetpack blog provides a great visual example of the differences at stake here:
What this means in practice is that you need to output two versions of your images: one at your base pixel size requirement and a 2x version for retina. For example, a 350px x 350px JPEG would also be output at 700px x 700px.
Managing the display of these versions on your WordPress site can be accomplished by rolling your own solution using Retina.js, or using one of the two leading WordPress plugins to do the hard work: WP Retina 2x or Simple WP Retina. The choice is yours.
Compressing Your Images
By this stage we’ve covered prepping our images via resizing and creative cropping and allowed for the fact that they may be displayed across a range of devices.
It’s time now to turn to the heart of the matter when it comes to optimization: image compression.
Compression is simply the process of algorithmically removing image information that the human eye can’t perceive. It’s an essential step in optimization and can decrease image sizes dramatically.
From the three raster file formats that we mentioned earlier, JPEGs are typically the best candidates for compression. In contrast to PNGs and GIFs, they use lossy compression which means there larger gains in file size reduction potentially on offer.
The downside of this is that you’ll have to check the post-compression results carefully for unwanted visual artefacts, as shown in the image below.
You’re aiming for a balance of the lowest file size with the highest possible image quality. For a full discussion of the trade-offs involved in this process, consult HTML5Rocks’ illuminating image compression overview.
We should stress here that PNGs and GIFs also stand to benefit from compression; it’s simply that the reductions in file size will be less. The following image from TinyPNG shows that the gains to be made are still considerable:
Image Compression Tools
When it comes to actually performing compression, there are a number of options at your disposal.
If you’re using one of the offline image editors we mentioned earlier, you can simply tweak the built-in Save-as options. A detailed guide for how to do this in Photoshop is available in this piece.
There are also a number of offline apps for both major platforms dedicated entirely to image compression. The leading options here are ImageOptim on the Mac or Trimage on both Mac and Windows.
Finally, there are a number of solutions available online with leading contenders including TinyPNG and Kraken.
We have, of course, also made our own significant contribution to this field here at WPMU in the form of WP Smush.
At the risk of blowing our own trumpet, let’s look at that last option in a little more detail.
WP Smush
Since adopting the WP Smush project in 2013, we’ve invested considerable time and energy into making it the most fully-featured, WordPress-based image optimization tool around.
Yahoo’s recent dropping of the API that has traditionally powered its services forced us to step up to the plate and take the entire project in-house.
We’ve redesigned the plugin from the ground up, making improvements across the board in performance in functionality with both the free and Pro versions.
We recently put WP Smush Pro to the test, comparing its results with other premium image optimization tools, Kraken and EWWW and WP Smush came out on top.
If you’re looking for a fully-featured plugin to take care of most of the heavy optimization lifting from within WordPress itself, we strongly recommend giving it a try.
Optimizing Your Images for SEO
So far we’ve concentrated on the display properties of images, but SEO optimization is of equal importance to your site’s overall success. Let’s quickly review the basics:
Filenames: Use descriptive filenames that showcase your keywords rather than meaningless generic names. For example, use “green-child-bicycle.jpg” rather than “BX8A132E.JPEG”.
Alt tags: Provide a succinct, non-spammy alt tag for each image for reasons of SEO and wider accessibility. For example, “alt=’Side view of a child’s green bicycle’”.
You can find more detailed information on the subject here on the site or over at Yoast’s excellent guide to optimizing images for SEO.
Optimizing Beyond WordPress
All the image optimization work in the world will of course make little difference if your site is hampered by performance issues elsewhere in the stack. It’s a huge subject to tackle but begin with the following:
Speed test tools: Benchmark your current performance with standard site speed test tools.
Server/hosting setup: Benchmark your hosting provider and ensure your server is optimized for WordPress.
You may also wish to take advantage of the power of content delivery networks such as Cloudflare or WordPress’ own Photon to ensure your optimized images are delivered as speedily as possible.
Put Image Optimization on a Schedule
After you’ve mastered the essentials outlined above, lock in the benefits by taking advantage of the power of checklists to turn image optimization into a repeatable, documented process that can be carried out by you or any member of your team.
Use the following six-step sequence – adjusting according to the needs of your own particular site as you go – and you’ll be in good shape:
Make sure you’re selecting the right image format for the job to be done. Always select the right image format for the job.
Crop and resize images for maximum visual impact and minimum file size.
Future-proof your articles by producing image variants for both standard and retina display.
Take advantage of image compression and visually proof the results. Our WP Smush tool should be your first port of call here.
Take the extra time to optimize all images for SEO to pick up some low-hanging fruit in terms of traffic.
Consider leveraging the power of a CDN for image delivery for further gains.
Conclusion
We hope this article has given you a solid overview of the subject of image optimization in WordPress and beyond. It’s an essential step to include in your content creation workflow, and one of the most actionable methods out there for adding instant improvements to your site across search rankings, user engagement and increased mobile traffic.
We’ve stuck to the tried and true in terms of techniques above but the options available are changing every day. Let us know in the comments below if you have any tips or tricks of your own to share that could be helpful for other WordPress users.
Image Credits: Yug, Nikolaev_ec06ffa5.
Related posts:
Boost Load Time With Image Optimization A WordPress site with poorly optimized images can act as…
Adaptive Image Optimization For Responsive WordPress Themes When you are designing any website today you are designing…
10 Best Image Optimization Plugins to Speed Up Your WordPress Site Optimizing your images not only helps make your WordPress site…