57% of online shoppers will wait three seconds or less before abandoning a site.
Through A/B testing, Kyle Rush from the 2011 Obama for America found a three-second page load speed improvement increased on-site donations by 14% and increased election donations by more than $34 million.
There’s another reason to pay attention to website load speed; it’s a factor in Google’s search ranking algorithm.
A Slow Loading Website Will Quickly Kill Business
Load speed controls how soon visitors see your warm welcome message and stunning sales pitch. It contributes to the first impression people have of your brand.
How do you want to influence that impression? With a fast appearing page, that shows visitors your high level of professionalism? Or, by making them wait to see your website?
Load speed influences how fast transactions occur on your website. It’s part of your brand’s customer service.
Unfortunately, the repercussions of a slow website remain a mystery. It’s difficult to measure how many people left your site while it was loading…
Or how many folks got frustrated at your brand because you made them wait…
Or the prospects who lost trust in your ability to provide top service.
How Image Optimization Affects Website Load Speed
Website load speed is the length of time it takes for a visitor’s web browser to request a page from a web server, and for all page elements to appear in a browser.
Elements include images, software code, page styling, fonts and third-party software.
For site owners, designers and non-technical folks who manage sites, image optimization is one of the easiest ways to improve load speed. You don’t need software development skills. You don’t have to touch your website hosting environment.
This test shows how much return you can get from squeezing down image file sizes. Optimizing one large image reduced the time it took for the page to load by 26%.
That effort, which took just an extra minute to do, kicked up my customer service rating by two stars!
Managing image file sizes is the low hanging fruit that rewards you with better conversion rates because visitors will stick around.
Image Optimization Tools
Avoid FREE image optimization plugins because they aren’t good at compressing images. I tested several free plugins, including WP Smush, and share my results on this blab. The topic is covered at 19:45.
If you’re going to use a plugin, pay for a premium version. Be aware that most paid versions worth using come with a monthly fee.
Or follow this tutorial which is loaded with free tools. Use that extra cash for a couple of lattes, or project management software. Or better yet, get a photo editing tool that will optimize, color correct and style your images.
One less plugin means one less piece of software that has to load into a browser. And one less hole a hacker can use to get into your website.
Here is my favorite image compression routine.
1. Use a Photo Editor
An editor is the best tool for managing images because it’s all you need for most optimization tasks.
Photoshop is my editor of choice because I can monitor image quality while optimizing.
Other photo editors that compress image files include:
- GIMP, available here, – is a free photo editing program on par with Photoshop and has compression features. You can use it with IOS, Windows and other operating systems.
- PicMonkey – a browser-based editor that works with any operating system. There are free and paid plans.
I aim for reducing file sizes to somewhere between 50 and 80 KB (kilobytes).
2. Size Images Correctly
Figure out the largest photo you need and resize your image to those dimensions. This step alone will shrink file sizes.
Photos taken with digital cameras and phones are too big for most web pages. You can easily resize them with a photo editor.
3. Choose the Right Type of Image File
- JPEGs – use a lossy form of file compression, and some original photo information will be lost. But that loss doesn’t reduce the quality of web images very much. It DOES decrease the file image size quite a bit.
Use JPEGs whenever possible.
- PNGs – tend to be larger than JPEGs because they contain more information. The file format uses lossless data compression which means images won’t lose quality when compressed.
Use PNGs for images with a transparent background, screenshots and circular visuals.
- GIF is a bitmap image format for animations which uses a lossless data compression to reduce file sizes. Optimizing GIFs isn’t included in this tutorial.
4. Use a Second Compression Tool for Large Files
After experimenting, I found using an editor followed by another compression tool works best for image file sizes bigger than 100 KB.
My top choices for the second round compression tools are:
- ImageOptim – a free image compression tool for JPEG files. Only available for Apple computers.
- ImageAlpha – ImageOptim’s counterpart which compresses PNG files.
- Compressor.io – a free browser-based tool that works with any operating system. It compresses both JPEG and PNG files.
- FileOptimizer – a free tool for Windows users that optimizes JPEG images.
Optimizing Images for Devices
Managing images for smartphones and tablets (responsive image handling) boils down to delivering an image with the right dimensions to the device. You don’t want to send a 1500 px wide image to a mobile device which can’t display an image any wider than 400 px.
Since version 4.4, WordPress core has taken over responsive image handling. In a nutshell, once you update to WordPress 4.4, the core software code manages responsive images. The right size image gets delivered to every device.
There’s a catch! Core software doesn’t always optimize images well for retina displays.
Retina requires images with a large number of dots per inch (DPI). To achieve this, you’ll need to size your photos two or three times bigger. Unless you’ve already uploaded these larger images into WordPress, your retina-converted photos will be fuzzy.
The WP Retina 2x plugin does a better job managing high DPI images. The plugin creates retina images and displays them to your visitors accordingly.
The work this plugin does warrants adding it to your website if high DPI images are important to your audience.
The plugin supports 3x images too.
Tutorial – Optimizing JPEG Images with Photoshop
Using the Save for Web & Devices option in Photoshop, resize the image to the dimensions you need (1). The file size appears at the bottom (2).
Select JPEG as your image type (1).
Adjust the Quality scale to reduce the image file size (2).
The image will change as you adjust the scale so use it as a guide to prevent you from reducing image quality too far. The new file size appears at the bottom.
Use ImageOptim (IO) to compress the file further. After dragging a file into the application’s window, the program does its magic.
- Copy the file.
- Drag the copy into IO.
When you upload the file to WordPress with default compression set at 90%, the file gets squeezed a little smaller.
JPEG File Sizes at Each Optimization Step
There are plenty of image optimization methods and tools available that will help your web pages load faster. Having a fast website will start you off on the right foot with visitors. It may even give your site a bump in Google search results.
Experiment with these tools to find the ones that work best for your design and website standards.
Make sure you inspect images after each optimization step to ensure the quality is acceptable. Don’t sacrifice quality for smaller image sizes. Plenty of times I didn’t use a compressed file because the image didn’t live up to my standards.
Subscribe to the Digital News for optimization tactics that will make your website sell better. Say goodbye to cold calls forever!
Copywriting, conversion and design tips… all free.
Sign up now and get my guide – How to Get More Home Page Visitors into Your Sales Funnel.