Are you at risk of losing customers because of slow-loading images?
Nearly 50% of people expect sites to load in two seconds or less.
Even sites with lots of images.
Images are critical to online stores. Yet, they can also be the very reason your site is slow and frustrating for potential customers.
To help you keep your site running as fast as possible, here are some tips and tricks for managing your image files and maximizing image speed.
Image Dimensions and File Size
The two critical aspects of image dimension are the ratio of its size when viewed on its own and its size when displayed on the web page. The goal is a 1:1 ratio.
Let’s use an image that’s 1200 x 1200 pixels when viewed on its own, as an example. If the coding on the web page dictates that it be displayed as 300 x 300, it will take extra time to reduce the image before the viewer sees it.
That lag time can be even longer if the image has to be, in effect, cropped to fit a space with different dimensions. Using the example above, it would take even longer for a 1200 x 1200 image to be “squeezed” into a 400 x 200 space.
Of course, most of these delays are fractions of seconds, but when it comes to your site’s speed, seconds matter.
Whether you’re a big retailer with hundreds of products or selling this cool dice tray on Kickstarter, managing your file dimensions and size can turn a turtle-slow site into a speedy hare.
Resolution for Image Speed
Image resolution also affects image speed. Digital cameras, especially professional-grade ones, create high-resolution images by default.
In simple terms, resolution reflects how close together the pixels are in a digital image. If there are many tightly-packed pixels, the image is sharp and high-resolution.
By contrast, images with fewer pixels and more space around each make images “fuzzy” or low-res.
“Web quality” image resolution is ideal for maximizing site speed without sacrificing user experience. It produces a clear on-screen image and reduces the file size.
If you have your products photographed by a professional, ask them to compress the files. The images will still be high-resolution but the files will be smaller than the raw images.
You then have the flexibility of further manipulating the files and improving image speed on the page.
Metadata
Every image file has fields for data that help “identify” the content. Some fields are automatically filled in, especially images taken with phone cameras.
Other fields require input.
Too much metadata can slow image speed.
The fields that are easiest to manage and when lean provide the best return on speed are alt text, caption, and description.
Alt Text
There are two good reasons for using the alt text field. One, it’s good for SEO (search engine optimization). Two, it’s critical to making your site accessible to customers with visual impairment.
Alt text is the words that appear when you hover your mouse over an image. Assistive devices use it to “understand” an image.
The key to using alt text well is to use concise and specific language to describe the image. You want users who need that information to get a clear “picture”.
But you don’t want to use too many words because they can slow the image speed.
Pro tip: Use the keyword that relates to the product page to get good SEO value from the alt text.
Caption and Description
These metadata fields have similarities but are not the same. Knowing which one(s) to use depends on the purpose of the image.
Captions appear with the image. Think of them as the image headline. From the perspective of metadata, this is the largest field.
Use captions to draw attention to a certain image instead of captioning every image.
The description metadata field isn’t visible to site visitors. But it matters to search engines. Google and others use the contents of this field for SEO.
For that reason, you might not want to skip using the description field. But keep the content concise relevant to the page related to the image to not reduce image speed or SEO value.
If you have the skills or interest to dig deeper into what might be bloating your image files, Google offers some guidance.
Mobile-Friendly
It’s now a basic expectation that every site has a mobile version that adapts its display according to the device used.
Creating this functionality is standard among professional web developers. It also comes with all recent WordPress templates and similar products.
But you also need to ensure the images you upload are suitable for mobile use. Those that can’t be automatically resized will decrease image speed.
Content Delivery Network
By default, your site is served up from a single location. We may not realize it, but the physical location of the host server affects speed.
The further a visitor’s internet service provider (ISP) is from the hosting service server, the longer page and file requests take to reach them.
Content Delivery Networks (CDN) eliminate that problem.
When you subscribe to a CDN, your site’s static files, including images and CSS, are stored on servers around the world. That reduces the time needed for files to “travel” to users.
Staying Current
If your site uses a Content Management System (CMS) such as WordPress, make sure you’re always using the most recent version of the core template and all plugins.
Pay extra close attention to any image-related plugins.
If you continue using outdated software and systems, you’re not gaining the benefit of improvements to image speed, which is everyone’s concern.
You could also be missing out on features that address new security issues or offer greater functionality.
Next Steps
Proactively managing your image files to optimize speed, SEO, and user experience can yield strong results.
Your business relies on people being able to get the information they want and be visually compelled to buy from your online store.
Don’t frustrate them with slow-loading images. Or worse, your site being offline.
Make sure you have reliable monitoring of your site server to protect your business against server failures.
Contact us today to learn more!
