A picture is worth a thousand words
There is a saying that a picture says more than a thousand words and that is exactly why pictures are so important in e-commerce. When buying goods on the web, the customer must use the images to perceive the product's color, quality and get a feel for the product without having it in front of them.
It is important that the images are sharp and high resolution, but this type of image also often has large file sizes, which risks making your website slow to use. Customers who can't wait will leave the page and over time, Google will notice it, which can affect your search engine optimization (SEO).
When saving an image for your website, it is important to find a good balance between image file size and image quality. In this post, we show you how to do just that.
This guide is for you who have a slow website with lots of pictures, for you who have not yet started building your website, for you who have no official knowledge or method for saving pictures in terms of file size and for you who usually take a product photo and then upload it directly to the website.
Different options of image files
When it comes to saving images that are optimized for the web, we will focus on three file types. These file types are JPG, PNG and GIF. The different file types have different strengths and weaknesses and these will now be reviewed so that you can choose the file type that suits your website and needs.
Work with JPG files
The most popular file type used for web images is JPG, also known as JPEG. Because JPG has a very large color palette to use, this file type is perfect for photographs and for complex images that contain many colors, patterns or shadows.
It is also possible to save JPG images in different qualities, which is very flexible based on the need for the current file size and quality.
Use for web companies:
As the most popular file format on the web, JPEG is used for photographs, product images and website banners or images.
Work with PNG files
Another popular file format on the web is PNG. You can save PNG files as PNG-8 or PNG-24 in Adobe Photoshop.
- PNG-8 has a limited color palette consisting of 256 colors, which gives a smaller image size. It is therefore less suitable for photographs or complex images.
- PNG-24 provides a higher quality image, but it also means a larger file size.
One of the biggest differences between JPEG and PNG is that PNG can handle transparent backgrounds.
Use for web companies:
Because they are high quality and can handle transparency, PNG is usually used for logos, as these almost always require transparency. You probably want your logo to be of high quality and since the logo is often only a small part of the website, the file size is still small.
Work with GIF files
GIF files are not as popular as they were many years ago. But for small image sizes that only have a few colors, it is still a useful alternative. You should not use them for product photos as GIFs have the same 256-color color palette as PNG-8.
Use for web companies: GIF can be used for logos but is not particularly popular to use in e-commerce due to the limited color palette.
Save the image correctly
Of course, it takes longer to load a large image than a small image. By large image is meant that the file of the image is large, not that its dimensions are large. The file size is specified in values such as KB, MB, GB and so on. Among web users, 47% expect a website to load in less than 2 seconds and 40% leave the page if it takes more than 3 seconds to load. Therefore, it is important that your images have large enough file sizes for your website to be fast enough.
To optimize your images for your website, there are a few things you can do:
- Save the image in the correct dimension
To see the image in the size it will appear on the web when you upload it, open it in Photoshop and display it at 100%. This will help you find the right dimensions for the image.
- Save the image for the web
You can reduce the file size of the image without causing a major degradation of the quality. A good method to do this is to use Photoshop's "Save for Web" feature. To do this, open your image in Photoshop and then go to File> Export> Save For Web (Old). This opens a window where you can select your export quality. A quality of 60 is a good alternative as it does not significantly reduce the quality but still reduces the file size to less than one megabyte (MB).