Keep Your Site Running Fast
Get the most out of your site images for speed and search rank. Every image you upload to your website takes space on your server and has details available (or not available) for search engines to find – make sure you only take up as much space as you need while getting max exposure!
How Does Image Optimization Work?
I often take over client sites that run slowly due to poor image optimization. Let me explain the most practical DIY steps to take to get images onto your site without killing performance. I follow these same best practices when handling media for all my clients!
#1 - Pick The Right Image Type
There are 3 standard image types you care about for your site; each serves a different need.
JPEGs
If you want colorful photos – use JPEGs as they allow higher quality colour images with a smaller file size. This works for most image types but NOT for transparent backgrounds. You can use progressive JPEGs to improve site loading times (it loads the basic photo first, and then adds the details after).
PNGs
If you have a flat, low-colour image (eg. icon) or need a transparent background you will need to use a PNG image.
GIFs
Lastly, if you have an animated image you will need a GIF. It has limited colour support so use it wisely. Consider how long the GIF will be, whether it will loop/repeat, and how many of them you want to run on your site.
#2 - Name Your Images
Your camera or phone assigns your photos strings of numbers and letters for names. You want to rename your photos to have a descriptive title that includes keywords to help you rank in search.
This extends to your image alt attributes (this shows when the image fails to load, for accessibility, or if you hover over an image). Describe the image in plain language.
Generally, you don’t want to overoptimize decorative images.
CASE STUDY: A client of mine was offering tours in remote locations. Instead of leaving her photos of beautiful landscapes with generic names like IMG202201092039, we renamed them to have the locations and her business name included in the titles. (Eg. North-Edmonton-AB-Site-Network-Canada) Shortly after she had clients finding her through her photos, because they were showing up in results for searches of those locations! How cool is that?
#3 - Size Your Images
There are two sizes to worry about – the image dimensions (width x length), and the size of the image file itself (in KB or MB).
Image Dimensions
If the slot your photo fills on your website is square but the image itself is a wide rectangle, unless you crop the image to be only the square part you want to show, the entire image has to load (to show only part of the image to your visitor!). You can save server space by cropping/resizing your photos to fit the space they will fill before loading them to the site.
File Compression
After the file is the right dimensions, you can compress the image – you can ditch up to 80% of the file size with NO loss of image quality, in some cases! This makes a huge difference when your site is loading for visitors. A good tool to do this (and the one I use) is TinyPNG.