February 24, 2023
•
7 min read
Many factors affect a site’s load time. One of which is image size - your e-commerce store might have stunning photography, but your slow-loading pages mean you could be losing potential customers. Enter image optimization. Optimization is about reducing file size without reducing the visual quality or clarity, resulting in beautifully clear visuals that don’t slow down your website.
More often than not, bulky image file sizes impact your site speed. And so, optimizing these images will improve your site performance. For example, smaller file sizes require less storage space, so sites load faster. Websites can also handle more content more comfortably when each image or video takes up less space. Optimizing images, when done successfully, will reduce their file size but maintain their quality. In fact, optimizing your images might actually improve their clarity.
In some cases, big files are automatically compressed by your type: embedded-entry-inline id: c1Udzb8wUc5s0faOjB32Uun, like Shopify and WordPress. If you’ve ever uploaded a beautifully crisp (but large) image to your CMS and it comes out looking blurry, it could be that their automatic compression of the image reduced its quality. You can do a much better job optimizing it yourself before uploading the image.
Optimizing images can result in a faster website, providing a better user experience - who wants to wait for images to load when trying to scroll through smoothly? But, rather than a simply poor user experience, the impact of a slow website is more significant than you expect.
As a page’s site speed goes from 1 to 3 seconds, the probability of type: embedded-entry-inline id: c7yCdR8MBrNwOJSXX8Dzanp increases by 32%. When this changes from 1 to 10 seconds, the chance of a customer bouncing increases by 123%. So, every second counts when it comes to user experience - and keeping users on your site.
Google has used site speed as a ranking factor since 2018, meaning that faster sites are likely to be ranked higher up in the search results. Therefore, this makes site speed and image optimization a matter of type: embedded-entry-inline id: c1SrKsXWOadgXg7UdMPl4wq
When it comes to images and videos, there are many different file types, but it’s not always immediately clear what the correct type to use is or the difference between them. Each file type was created with various intended applications and therefore works best for different kinds of images or videos. But before you hit the panic button, we’ve broken each type down with its purpose and recommended sizing:
Tip: In Photoshop, you can open one file type, e.g., a PNG, and save/export it as another, e.g., a JPG.
Note: You won’t be able to improve the resolution of an image. For example, increasing the size of a JPG will only stretch it out, causing it to become pixelated or blurred.
For most landscape JPGs, we recommend a width of 1920px minimum if you want it to be full-width on your site. 1920px is the size of a wide-screen monitor - any smaller, and an image would have to stretch further than its dimensions to fill it, which causes them to become pixelated or blurred. Go for larger dimensions for better clarity on bigger and higher resolution screens. Moreover, consider exporting images at double the full-screen size if you’d like to be able to zoom into the image and maintain clarity, e.g., for a product image in a product gallery.
The best way to optimize a JPEG is in Photoshop.
You can achieve most of the above without Photoshop simply by changing the image size.
Alternatively, you can upload your image to tinyjpg.com and download the resulting file.
The best and easiest way to reduce the size of PNGs is with an online tool like tinypng.com.
If your image is above 5MB (the maximum size that tinypng.com will accept) or you want more control over how it is optimized, you can do this in Photoshop.
One of our favorite tools for optimizing videos is HandBrake. It is straightforward and effective at reducing the file size of videos and even converting the file type.
Most successful sites will likely include a lot of imagery. This is true even more for e-commerce sites with at least one image for each product. However, optimizing all of these images does not need to be the big job that it might initially appear to be.
With Photoshop, you can easily apply the above optimization steps to a whole folder of images at once. This is known as batch optimization.
We hope we have provided you with clarity when choosing a file type and showed you that optimizing images doesn’t have to be difficult, even when you have hundreds of product photos to optimize.
Why not bookmark this article for the next time you need to optimize images before uploading them to your site? The simple steps above protect your site against site speeds slowing and users bouncing, improving your conversion rate.
If you’re ready to improve your site’s conversion rate and are looking for an experienced and skilled UX team, get in touch.
