Choose The Right Format
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:
- PNG – This format produces higher quality images, but is also very large file size. We wouldn’t recommend using PNG’s as product images. It was created as a lossless, but it can also be lossy. (We’ll get to explaining the difference between lossless and lossy as you scroll ahead). Complex designs, infographics, images with lots of text in them, and logos can ideally be PNGs. PNGs give you beautiful, crisp lines, allowing you to zoom in and not lose any quality. They also support transparent backgrounds, making it ideal for logos.
- JPEG – This popular format uses lossy and lossless optimization. Unlike with PNGs, there’s a good balance between quality and file size. In eCommerce, JPEGs will be your best bet for your product images, especially if there are several. You shouldn’t have to sacrifice image quality and JPEGs provide the best quality for the smallest file size.
- GIF – This format only uses 256 colors. They are of low quality and can only be used for simplistic images, such as icons and decorative images. It’s also the best choice for animated images. It only uses lossless compression. Never use GIFs for large product images. Use GIFs for thumbnails and decorative images only. Or you could get creative and make custom Instagram stickers for promoting your brand on your IG stories.
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.
Know The Difference Between Lossy & Lossless Optimisation
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.
Identify Your Images & Make Alt Texts Your Best Friend
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.
Using SVGs Can Make The Biggest Difference
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:
- SVGs are known to be super scalable on browsers as well as photo editing tools.
- You can actually see the difference in quality on a small SVG against a bulkier PNG and JPEG equivalent in terms of gradients. The SVG’s gradient is extremely smooth, while banding can be seen on JPEG & PNG’s. (BEWARE: SVG’s don’t work with Illustrator gradient meshes)
- Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.
- SVGs can be your trump card since they are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster load times.
Make Sure To Optimize Your Thumbnails
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.
Summary & Quick Pointers
- Rename images so that it makes more sense to you. No keyword stuffing. No fluff.
- Use GIFs if you need animated imagery.
- Shrink down decorative images as much as you can. For borders or simple shapes, make them PNG-8 or GIFs.
- If all fails and you can’t seem to compress a JPEG more than what you already have, try SVGs.
- Focus on image dimensions instead of its quality. So don’t worry about Dots Per Inch (DPi) or Pixels Per Inch (PPi) since they only affect an image's print quality, but not how it’s displayed on the web.
.jpg)
