Using images on your website is a great way to engage visitors, but no matter how on brand and beautiful your images might be, if they are not optimized properly, they will hurt your website. So I wanted to share a few secrets to image optimization.
So, what do I actually mean when I say image optimization? Image optimization is about reducing the file size of your images as much as possible without sacrificing quality.
Basically, large images slow down your web pages which in turn creates a bad user experience and can also hurt your SEO (search engine optimization). Optimizing images is the process of decreasing their file size, making sure they are the correct file format and naming them properly.
Image optimization is important because nearly 50% of consumers won’t even wait three seconds for a web page to load. And, Google uses page load time as a ranking factor in their algorithm.
It’s incredibly important to optimize your images BEFORE uploading them to your website! If you only take away one thing from this post, please let it be this!
So, let’s discuss each part of image optimization separately:
File Size
You’ll want to save the image appropriately to reduce the file size. This is the size of the file and how much space it takes up on your computer’s hard drive and your web server. All images should be under 200 KB, but ideally under 100KB.
Image Size
You’ll want to reduce the image size, or the dimensions of the image. Now you’re probably wondering what size your images should be for the web.
Here is a general guide:
For full width images, like a hero image, that cover your whole screen from left to right, the best size is 2400 x 1600 px.
For inside content images, like sections of text, images and buttons on your website, horizontal images should have a max width of 1500px and vertical images should have a max width of 1000px. Based on your ratio, the height will adjust accordingly when you save your images.
Some other considerations, if you are preparing images for a slideshow gallery, make sure they are all the same height, regardless of if they are horizontal or vertical. The recommended height is 1500px.
Images for blog posts should all be the same width regardless of if they are horizontal or vertical. The recommended width is 1500px.
Remove Unnecessary Image Metadata
Sometimes your images can contain additional hidden data taking up space. This can be private EXIF metadata from digital cameras, embedded thumbnails or comments. Removing them is not only a good security practice, but it will also improve the size of your files.
File Format
The two main file types you’ll be using on your website are:
PNG – they are high quality and can handle transparency. They are usually used for logos. They are not a good option for complex images or photographs because the color palette is limited.
JPEG – the most popular file type for images on the web. They are perfect for photographs or complex images containing lots of colors, shadows, gradients or complex patterns. They are used for product images, photographs and homepage hero banners.
A general rule of thumb is you should use JPEG unless your image needs to have a transparent background, and then you should use a PNG.
Naming
Naming images for SEO will improve your search engine rankings and website traffic! Please don’t use the default name given to your image which is usually a strange combination of letters and numbers that mean nothing. Instead, name it using keywords your clients would use to find you online, your business name or the title of your blog post. Also, don’t forget to use the alt attribute and describe your images in plain language. It’s good for both SEO and accessibility.
The main goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. By finding the right combination, you can reduce your image size by as much as five times.
There is more than one way to do this and there is a wide variety of compression tools that will help optimize your images. Here are a few of the tools available:
Adobe Photoshop
Adobe Lightroom
Tiny.JPG (my favorite)
Tiny.PNG
ImageOptim
Gimp
Imagify.io
While optimizing your images before uploading them to your website is the best way to go, sometimes that may not be an option. For example, you may already have a website with lots of images and didn’t know about image optimization before your uploaded them. Rather than removing all the images from your media library and re-uploading them after optimizing, there is another way.
Thankfully there are many different plugins available that can do some of this work for you. Some plugins will automatically optimize your image files as you upload them and will also optimize images you’ve already uploaded. Here are a few of the plugins available:
reSmush.it
FWWW Image Optimizer
Compress JPEG & PNG Images
ShortPixel Image Optimizer
WP Smush
However, it’s important to remember that best practice is that you don’t rely solely on these plugins. For example, you really should never be uploading an image that is 2MB to your WordPress media library. The best method is to resize the image in a photo resizing tool before and then upload it to your website. Then you can use a plugin to optimize it even further.
If you found this information helpful, I hope you’ll share it with others who may benefit from it using the links below.
If you’d like to start the conversation about working together, please fill out the client application form and I will be in touch to schedule a complimentary introductory call.
