Images can really tie together a well-designed site. When we say ‘optimizing an image’, it can be three things:
All three are quite important especially if you have multiple product images for all your offered products. It is imperative to make sure they load fast enough to not making your visitors impatient. Large, bulky images slow down your web pages which creates an inconvenient, less than perfect user experience. If your page doesn’t load, then you probably won’t get as many products sold and out the door. So to save you some time and inventory heartache, you must make sure your images are optimized. And even if you don’t have a full-fledged store, you’d still need images to visually represent your brand. So keeping your website images as search engine friendly as possible offers its perks.
If you’ve been dealing with slow pages, choosing the right format is what separates you from having buttery loading times.
Before tying together your website with appealing, on-brand imagery, make sure you’ve chosen the best file type to go with your needs. The different usable file types are as follows:
PRO TIP: Opt for the 24-bit PNGs instead of the “8 bit” since the former offers better quality and a much more versatile array of colors. But be wary of using too many decorative images since too many of them can affect your load times.
You must save your visitors from a less than perfect user experience. To do so, one must optimize images to ensure faster load times. Using a plug-in or script, optimizing images is the process of decreasing image file size. The goal here is to speed up the load time of the page. As you’ve read through the last section, Lossy and lossless compression are two methods that were referred to a lot.
Lossy optimization restores the large file to its original form with minor loss of some unnoticeable data, while lossless compression restores the large file to its original form without any loss of data.
While Google can identify text extremely well, it is still a bit iffy in terms of images. So you must make sure your nomenclature is intact and easy to understand. Alternative text, commonly known as alt tags gives search engines a basic idea of what each image is about. However, they are not visible to your average visitor. Alternative text is a big win for website accessibility since it also helps visually impaired visitors navigate your site with audio-based software. And improving your website’s accessibility is a great way to improve your search rankings. Be sure not to stuff it with keywords. Use plain, understandable language with one targeted keyword. So it is imperative to fill in the Alternative Text field when you’ve added an image to your site.
Now, let’s say we are an exciting new gym, coming soon to your neighborhood. We are trying to find images for our website. We downloaded a stock image off Unsplash and it was named “photo-1534438327276-14e5300c3a48.jpg”. Now obviously, this needs to be renamed. We’d rename it to something simple like “choquer_gym_weight_training_1”. Once we upload it to our hypothetical gym’s website, we have to make sure to fill out the alt text, which would be: ‘Choquer Fitness Weight Training’. Given the example, this should help you understand how to rename and alt tag your images efficiently.
Another good method would involve the use of SVGs, or ‘scalable vector formats’, with the other images you have on your site. SVG works great for logos, icons, text, and simple images. Here’s why:
Every good eCommerce site will use well-optimized thumbnail images, especially on home and category pages. The goal is to quickly showcase products without taking up too much space and cluttering your webpage. Thumbnails are great, but can sometimes backfire if not optimized well. In turn, your page load speeds end up taking a hit. If they prevent your home and category pages from loading quickly, you could lose a potential lead. So make your thumbnail file sizes as small as possible. Remember that the collective impact of your thumbnails will have a noticeable impact on your page’s load time.
PRO TIP: Chance your alt attribute text and ensure not to duplicate text that you would use for the larger variants of the same image. In fact, make sure your alt texts are very different for each size of the same image.
Stay up to date with the latest web development, industry leaders, along with service tips and news.