Today’s savvy website visitors will not wait around for web pages to load. If it takes more than a few seconds for a page to appear before their eyes, people will leave your site and your business.
Don't let a slow website kill business. 57% of online shoppers wait 3 seconds before leaving. Click To Tweet
Intuit launched a new platform which tripled load time, sending it from 3s to 9. The conversion rate suffered which proved that users weren’t delighted. The team brought the time back down to 5-6s and that investment was rewarded with a 14% lift in conversions!
There’s another reason to pay attention to website load speed; it’s a factor in Google’s search ranking algorithm.
Slow Loading Websites 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 prospects who lost trust in your ability to provide top service.
What follows is a simple way to improve load speed through image optimization. Along with the science behind optimization, you’ll get tools and tutorials that walk you through the process.
How Images Bloat 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.
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!
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.
Managing image file sizes is the low hanging fruit that rewards you with better conversion rates because visitors will stick around.
Tools That Slim Down Image
Avoid FREE image optimization plugins because they do a crappy job 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.
- 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 – is 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. Images taken with my iPhone are over 3,200 px wide, whereas the average content area for blog posts is 700 px wide.
You can easily resize them with a photo editor.
3. Remove Metadata From Photos
Metadata (EXIF) contains technical information about your photos, such as camera type, f-stop and shutter speed. This data makes the file size larger but isn’t necessary for web images. You can use photo editors, mobile apps and software to remove that extra file bloat.
4. 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, text overlays, 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.
5. Use a Second Compression Tool for Large Files
After experimenting, I found using an editor followed by another compression tool works best for images with original file sizes bigger than 100 KB.
My top choices for 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.
See the tutorial below for instructions on how to use these tools.
Optimizing Images for Devices Got a Whole Lot Easier Thanks to WordPress
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.
Here’s a Complete Guide to managing retina images. The post includes retina-ready themes and plugins.
Tutorial – Optimizing JPEG Images with Photoshop
Make a copy of your photo to get rid of metadata. Put the copy in a new document and work with that.
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.