This is the first post in our new series: Speed up Your Store. Did you know that on average, customers will only wait 5s for a page to load before moving on? If your site is loading slowly you are definitely losing business. In this series, we focus on ways to make your web page load faster and keep customers breezing through the checkout process. Our first post will focus on image optimisation.
Why does image optimization matter?
The most obvious benefit to optimizing your images is that it improves the quality of your website. When images load quickly users stick around on your website and are likely to browse more products, which usually means more purchases. However, did you know that your site speed is also one of the key variables used to determine your search rank? That means that image optimisation also helps your page rank in search results.
There’s also the fact that it’s good for your users. Image optimization, aside from generally being more user-friendly, also helps make your website more accessible for people with visual impairments (who might be using screen-readers that draw off of the alt-tags to describe the image to the user).
Which means more visitors for your websites and potentially more sales.
So what can you do to optimise your images?
File names and code
The first and easiest thing you can do is change your image filename to something descriptive, rather than 10934.jpg.
Describe either what’s depicted in the image (“RedCorvette.jpg”) or what’s in the post, if this is for a blog post (“MaintainingYourCorvette.jpg”).
After that, you can add an “alt” tag.
This is a tag that goes within the image code that gives a brief description of what the image is — you want to describe the image in a few words while using relevant keywords.
Going with the above example, you might have an alt tag of “2010 Red Corvette Maintenance.”
But don’t keyword stuff the alt tag — you wouldn’t add “car red corvette maintenance 2010 automobile shop buy” as an alt-tag because that can set off spam filters in search engine algorithms, and it’s also not user-friendly to visually impaired viewers.
Most sites have an easy way to edit the alt tags, but if not, you can click “view source” or “view HTML” in the text editor to access and edit it yourself.
Aside from filename and alt tag, many site builders (like WordPress) will give you a space for image title, caption, and description (and will easily let you edit the alt tag) when you upload an image, as shown below.
Filling out all available fields is the best rule of thumb for optimization. The caption will be shown to your average viewers, but everything else will be mostly be used by search engines and screen readers (for visually impaired viewers who rely on image descriptions).
Size and format
Reduce your image file sizes. Obviously, you want the images to be big enough to see, but you don’t need to be uploading images that are thousands of pixels wide and tall.
Make sure not to upload the full-size image and then just change the dimensions that it appears as via the image code. If you do that, the visitor’s computer will have to load the full-size image and it’ll slow your load time down.
There isn’t a hard-and-fast rule for file size or dimensions, but the general gist is “the smallest file size possible without making the image too small or unreadable.”
For in-line blog images, many sites are going with a width of 500-800 and a height of 300-600. You can always include a link to the full-size image so that people can get a bigger image when they click.
As far as file size goes, your images should never be larger than 1MB, and ideally, most of them will be around 100-200kb.
You can also reduce the resolution to make the file size smaller, but with the rise of retina displays, you don’t want to reduce the resolution too much or the images will look blurry on those displays.
To change file size, you can usually choose to export an image at a slightly lower quality, change the dimensions of the image, or change the file type (see below).
Use the right file format for the job. For most uses, .jpg will be your best bet. It supports the most colors with the least amount of size possible.
Gifs tend to be larger file-size wise for static images, but they’re great for animated images (Giphy, anyone?).
This is a great way to show your product from all angles or in motion without making users load a full video — DLA lets you use animated gifs for that.
For images with text, .png is a good choice — those images tend to be larger in file size, but have crisper text (and also support transparency).
Best practices for images
On your site:
- Make sure to include all of the additional description possible, to make your product pages and blog posts search-engine friendly.
- Include multiple angles of your products.
- If you have the option to set an image as featured, make sure you do so, as that’s usually the image that’s pulled for social media previews.
- DLA supports retina-ready thumbnails created from your product images, so don’t worry about your shop looking good on retina displays!
All you have to do is log in to your Control Panel, then go to Settings and then “What’s New” to enable the feature.