Great quality pictures are a no-brainer for a successful eCommerce site. To make a sale, customers are obviously going to have a clear view of what they are buying. However, not all high-quality photos are equal. And some might even be harming your prospects of making money online. How? By slowing down loading speed.
Wonderful – just not too wonderful
According to (2017) data from Gomez.com and Akami.com, you could lose up to half of your visitors if your site takes more than three seconds to load. And better-optimised photos will help push your page up the search engine page rankings (SERP) because Google’s algorithm prioritizes fast-loading sites. The way to balance out the need for photos with fast loading speeds is via accurate image optimisation.
Below, we tell you the main things you need to know about how to achieve this – along with other protocols you’d be wise to follow if you want to stand the best chance of delighting your customers and moving up the search page rankings. Ready? Go!
Right size ‚em!
It may seem like common sense to put the highest quality photos on your web site – nothing’s too good for your customers, right? But, in fact, you can easily overdo it. When we are talking about size here, we are referencing both file size and size on the screen. You need to find the right combination of both so pages load like the wind. To find out the optimum dimension of your image, search the image template information of your eCommerce site. The skinny from Shopify is that images 2048 x 2048 px look best. Now to find the best resolution (pixels per sq inch)…
If you use Photoshop, that’s fairly easy. The „save for web“ command allows you to adjust the image file size down while making sure the quality is sufficient. Click the „optimization“ button or adjust color, quality, downsize and sharpening. If you aren’t a Photoshop user, you can use free services such as PicMonkey, PIXLR and Canva. You want to aim to keep image size below 70KB in order to make sure they load in good time. It can be a challenge – and ensuring you have saved the file in the correct format will make your job easier.
Getting the format right
As you might know there are two main file types you can save static images on the web: JPEG and PNGs. There are several technical differences between the two, but the main thing you need to know for eCommerce purposes is that JPEGs can be compressed. They are smaller and load faster so use them for your product shots – and pretty much anything else. PNGs should only be used for images that are partially transparent and things like screenshots.
Automate!
As you might expect, diligent software developers have worked out a way to further optimize images through software and without impacting quality. Webresizer claims it can reduce file sizes by 68% as it resizes your images online for you. TinyPNG allows you to do the same with up to 20 images at once and uses clever technology to strip away the colors that the human eye can’t see. If you use WordPress, WPSmush will automatically compress and resize all site images for you.
Alt.ranking
The best chance you have to improve search engine rankings is making sure you fill out the alt attribute text found in the HTML code. What’s it for? Well, if a browser can’t load an image, it will defer to this. Google crawls alt attributes looking for relevant keywords. This gives you the opportunity to think about what your customers search for when they are after the product in question. The answer is to be found in your data analytics. If your site visitors are looking for „red leather pumps buckle“, then your alt attribute wants to look something like <img src=“red-leather-pumps-buckle.jpg“ alt=“red leather pumps buckle“>. Or you can just use the file name to describe what you see. Again, you will move your site up the rankings. Every little helps, as they say.
You only need to fill out alt text for product images not decorative ones. As well as boosting SERP positioning, you will be helping people who rely on web accessibility.
What’s in a name?
You will see from the above that you can also name the image file. It’s far better than simply uploading photos to their site with the file name that came out of the camera, such as 1634.jpg, That’s because „RED-LEATHER-PUMPS-BUCKLE.jpg“ contains useful information to web crawlers.
Rule of Thumbnail
Look at your thumbnail. It’s small. So are thumbnail images. But there are likely to be lots of them on your pages, so you need to make the file size as small as possible to help quick page load. Tininess is better than quality. It’s also probably best to avoid alt attribute text otherwise you might end up with Google indexing your thumbnails.
Include images on your site maps
Site maps are a must-have for any eCommerce site because they allow search engine web crawlers such as Googlebot to find its way around your site. Or, as Google says: “A sitemap is a file where you can list the web pages of your site to tell Google and other search engines about the organization of your site content.” The file is an xml list of what you have on your site, and that should include your images to make them easier for search engines to find. You can find a couple of samples here.
Information about images to put in your site maps can include the title, description, caption and licence. But it absolutely must include the URL where the image is located. The more information, the better. An automatic sitemap generator such as XML Sitemaps will do the job for you but you might have to pay to get images included.
How did I do?
Once you have carried out all the optimisations to your ecommerce images we have recommended, head over to Google tool, PageSpeed. Pop your URL in the box and the software will give your website a quickness ranking. If you have work to do, PageSpeed will tell you in the „Possible optimizations“ sections that you need to further „Optimize images“.
We hope that this article helps you improve your webshop's performance. If you are still looking for a useful tool to remove product photos’ backgrounds you can check out our E-Commerce page. If you think we’ve missed out on something that we could include in this article or want to give feedback, feel free to reach out! Send us a message on social media or via contact form here.
Commenti
Per ora nessun commento.