For every photographer, amateur and professional the only thing more important than your camera is your pictures. The same goes for designers, artists and generally every person who spend a significant amount of time and energy in creating beautiful and meaningful images and obviously you’d want to show off your creations to the world. Then comes uploading those on a website or social media to be shared generously amongst your clients, peers and friends. For a business website an image should be clear and descriptive to show off the products and services, the image should entice the visitor to take an action.
The saying “A picture is worth a thousand words” is true when said in an ecommerce perspective, which is one of the reasons why images are given so much importance. The customer who visits your website cannot pick up, touch or inspect any of your products on the website; so they will rely heavily on the images to comprehend the colour, product quality and other specifications related to the product.
But the problem is more often than not, the pictures will not appear quite the same as they appear in real life. It would seem that a lot of poor, innocent pixels were sacrificed somewhere down the road. And if by chance your pixels managed to survive, your files will be heavy creating the problem of a site that is slow to load which in turn will make visitors run in the opposite direction. It’s all about finding the right balance that’ll preserve the best quality possible, without hampering the speed or performance of your website. This in a nutshell, is the quandary of image optimization in the Internet era!
In ecommerce, it’s critical to find a good balance between image quality and image file size when you save an image for your site.
So the mantra you should follow is that all images need to be high resolution and crisp. But, high resolution and crisp images come at a steep price because they tend to have huge file sizes and even a few of these on your site will put an end to that snappy experience of navigating through your online store and will make users feel more like they’re swimming through molasses.
And it’s not just the worry of repelling customers here because eventually Google will notice and this can affect your SEO adversely.
If you feel you don’t need this tutorial, or are unsure just answer these four questions to see if you need it.
- Are you just getting started on building your online store?
- Do you just take a product photo and upload it directly to your website?
- Do you ignore anything to do with file sizes and just save images randomly without any formal knowledge or process for saving?
- Does our site feel sluggish and have you uploaded tons of onto the site?
If you answered yes for most of the questions, then this tutorial is meant for you. So are you all set to optimize your images?
Why do we make such an issue out of image optimization?
When you’re surfing the Internet what happens is the browser of your desktop or mobile downloads every single file from that particular website so as to display it on your screen. This means that when bigger files are uploaded your website’s overall speed gets lower. And this will prove to be disastrous for a business as both the SEO (a fast-loading page will have better SEO according to Google) and the user experience (UX) of your visitors. Today’s Internet user doesn’t have the patience to wait for a page that takes too long to appear. Mobiles which make up for more than 50% of web traffic today will add to the challenge. It is harder for your pictures to load on mobiles because mobile bandwidth is usually lower than wired home networks. So you need to keep an eye out and fix the problems that come with high resolution images while maintaining the performance of your website.
Exactly how low can you go?
These days you can use these two major techniques for optimizing images for websites.
The first technique is labelled compression. Although it might seem complex in a mathematical way, the principle though is quite simple: any redundant information on your images will be spotted by your software’s algorithms and eliminate them from the files. A lot of compression formats work in this way – the most famous format is JPEG. The size of your pictures will be reduced radically because of this pixel diet ensuring that the load speed of your site will be much faster, especially if every single image on your website gets this compression treatment along with the application of a strong coefficient of compression (“JPEG Quality”).
But as with most things there’s a problem – and it’s a major one – valuable data will be lost with compression. Usually the loss is visible in small details like the apparition of artefacts or a less sophisticated image that the average Internet user generally tolerates just fine, but just because they do, you shouldn’t.
Is the size really that important?
The second common optimization method is resizing which basically means reducing the size of your photos almost without altering the quality of the image. Visitors will see the exact same thing on their screen – only problem, they’ll probably need a microscope to see it. If it’s that bad why do we need resizing? Today’s cameras are so advanced that even a low-end camera can take pictures with a very high resolution like 4290*2800px without much effort. But a high resolution photo means bigger files to upload, which is where resizing comes in handy many times.
But, though it’s a smart technique it’s not entirely convincing since no one can tell you the optimal resolution for the Internet. On every Desktop or mobile device each browser displays the same images in a different size. But certain images are naturally meant to be shown in a bigger format just because of the subject (a breathtaking landscape), the technique (macro-photography) or its artistic composition. And finally, an image with the perfect resolution for your website might not necessarily meet the criteria on Facebook or Instagram or vice versa.
So to summarise, you can only choose to resize your images if they’re needed for a very specific purpose and they won’t be displayed on big screens because this technique doesn’t address the main issue of combining quality with performance.
So what best practice can you employ?
The best practice that works for everything in life applies to your website too; that is to find the right balance. On one hand, as a business owner our aim should be to show the best of the products on offer in every single photo. But your pictures need to be optimized in order to display on your online portfolio without overloading it. And we’ve seen above that the most popular options (compression and reduction) also can’t strike the right balance and will end up harming the visual rendering significantly for the sake of performance.
Below here is the complete procedure to optimize images for your website; let’s have a look, shall we?
- Get your image perfect: Use editing and enhancing tools like Photoshop, Lightroom or any graphic editor of your choice to make any necessary corrections and get your image perfect.
- 2. Export the image as a JPEG file:
- Ensure a high quality image, with a score of 11 or more on Photoshop scale (or equivalent).
- The shortest side of your picture (the width for a portrait, the height for a landscape) should have a resolution of at least 3,000px.
- The size of the image shouldn’t exceed 15MB
- Let a tool like Wix work its magic for you to get an optimized photo that meets the requirements.
Advanced users can opt to naturally countermand the settings with specific values for each image on the Wix Pro Gallery control panel. Associates to the advanced algorithms of this App will provide the best quality and performance for both mobile and desktop because of this exclusive control on the settings. Here’s how you can do it:
- Quality of the image: Do not increase this setting above 90 for your images unless it’s an exceptionally rich picture; anything above 90 is considered bad practice for your website, as the file size will increase and will show only a marginal effect on the rendering of the photo.
- Sharpening: Your photo can be sharpened by by analyzing and maximizing the crispness of its edges. As you will control how much the image is sharpened, try to keep the radius (number of pixels from the edge that the sharpening effects), and the threshold (which pixels to be considered as edge pixels) as low as possible to get a more intense effect of sharpening.
Options for Image File Type
After your images are optimized for the web, you’ll need to save them; you should you can use these three main file types to save the images: GIF, JPG and PNG. Each of them have their own pros and cons and you should know them and keep it in mind when you’re saving an image.
Working with JPG Images
The most popular image file type to upload images on the web are JPGs or JPEGs. If you have photographs, or complex images which have a lot of colours, shadows, gradients, or complex patterns then JPGs are your best bet because of the huge colour palette that JPG’s have to work with it can handle these kinds of images perfectly. And you can adjust and save the image as precisely as you want, by balancing quality and file size because you can toggle between high quality, low quality and anywhere in between to save JPGs.
JPEGs are the most popular file format online For Ecommerce Entrepreneurs and they use it often for product images, photographs, and homepage hero banners/images.
Working with PNG Images
Another popular file format that you can use to save our images online are PNGs. Adobe Photoshop also gives you the option to save PNG’s as PNG-8 or PNG-24.
- PNG-8: With just 256 colours PNG-8 has a very limited colour palette and even though the images are smaller in size, this won’t be work well for complex images and photographs.
- PNG-24: On the other hand, PNG-24 gives an image of a much higher quality image but it’ll be a larger file size.
One of the biggest differences between PNGs and JPGs is that PNGs can handle transparency.
PNGs are often used by Ecommerce Entrepreneurs for logos because of their higher quality and ability to handle transparency. And because logos are a very small part of overall site and will always require transparency, higher quality and a smaller file size PNGs will work best here.
Working with GIF Images
Several years ago GIFs were quite popular, but even now when you need smaller image sizes and just a few colours are necessary GIFs are a preferred option. GIF files like PNG-8 are restricted to merely 256 colours and this is why you should never use GIFs for product photos.
Ecommerce Entrepreneurs can use GIFs for logos but it isn’t a very popular option because of it’s limited colour palette.
Saving Images Properly
As we’ve mentioned before an image with a larger file size will take longer to load. And when we say image file size we mean the value in KB, MB, GB etc. It’s extremely important that your images are small enough to ensure a speedy site because otherwise you’re going to lose visitors if your page doesn’t load quickly enough.
There are three things you can do to properly optimize your images for your online store:
1. Save images with the right dimensions
Open the image in Photoshop and view it at a 100%. Now you can see the image at the exact size in which it will show on a computer monitor when you save the image for the web.
2. Save images for web
You don’t have to fear reducing the quality of your images if the file size is reduced. One of the best ways to reduce the file size without considerable loss in quality of the image is to use Photoshop’s ‘Save for Web’ function.
- Open the picture in Photoshop and go to “File”, click on “Export” and then go to “Save for Web” (Legacy).
- You can choose your export quality in the window which opens when you click on “Save for Web”. Usually a quality of 60 works best because the file size is reduced to below a megabyte without any noticeable difference in the quality of the image.
3. Compress images for web
One of the best ways to reduce file size of images size without losing any image quality is to use Image compression apps. These tools reduce the file size by removing any hidden data in the image file; for example, unnecessary stuff like additional colour profiles and metadata (like geo-tagging (the location where the photograph was taken).
If you use Adobe Photoshop, your image size will likely be already reduced, but you can still trim off another 5-10% by using a compression app like ImageOptim which provides an easy way to quickly reduce image file size. Even if your images are already optimized on Photoshop dropping a further 5% of file size will be great because every KB counts.
Some of the best Image Compression Apps/Services you can use are:
- TinyJPG | TinyPNG
|Here’s a pro tip for when you’re saving images for the web: As a general rule of thumb, try to keep the file size of your product photos at a maximum 80-150 KB, and for larger homepage hero images at a maximum of 250-350 KB.|
So our photo which was insanely huge when we started has reduced in size with just a few simple steps. Now it’s a perfect fit for our homepage while being a reasonable file size as compared to its earlier mammoth computer-crashing size.
As an Ecommerce Entrepreneur the earlier you learn to save images appropriately for the web and implement it religiously, the better it will be for your business. Maybe you can only save 10-20% on each image initially, but with time as your store and website grow every little KB saved will count and make for much more pleasant overall experience for your visitors, customers, Google and for your business too.
All you need to learn from this is, saving for the web is a balancing act, pretty much like our lives—just remember that the quality of the graphic and the file size of the media must be balanced to suit your personal needs. Now get optimizing the images for our website and make a great job out of it.