How to optimize your pictures for your e-commerce?

A picture is worth a thousand words and there's no better way to present your brand and your collection than through imagery. If the images you choose for your website aren't optimized, however, you'll waste bandwidth and slow your site down. In this article we'll cover some basic steps to get started optimizing your images so that they look great on any screen size or device.

1. Compress the picture

There are two types of compression: one that loses less detail (lossless) and one that loses more detail (lossy). Lossless compression is best for images with lots of fine details such as hair or fur because these areas tend to be completely lost during lossy compression. Lossy compression works better for areas with large objects like trees and buildings because it's helpful to preserve those large shapes when compressing your images.

Remember to always compress your pictures. You can use tools like Photoshop or the online tool TinyJPG to compress your images accordingly.

2. Resize the image

You can resize images using the built-in tools in your photo editor, like Photoshop or build-in website tools. Remember to test the images on all the displays like mobile or iPad version.

3. Use the right resolution (DPI)

The resolution of your image is the number of pixels per inch (DPI). The DPI is measured in dots, so it's an integer value. The higher the DPI, the better your image will look when printed or displayed on screen.

The ideal resolution for images on websites is 72 DPI but if you want to create high-quality print media, you should use 300 DPI instead.

4. Avoid using PNG, GIF and TIFF files if you don't need them

Use the JPEGs extension as the default setting for your images, they can be compressed and work better for the websites. Use PNG if you need a transparent background (for example for the logo) and the GIF extension only if you need animation.

5. Don't forget the alt text

Alt text is a description of the image that appears in place of the image if the image can't be displayed (for example, if you are viewing this page on a mobile device). The alt attribute was added to HTML tags to provide context for visually impaired users and also helps search engines interpret images as relevant content.

KEY TOPICS

1. COMPRESS THE PICTURE (LOSSY OR LOSSLESS COMPRESSION)

2. RESIZE THE IMAGE

3. USE THE RIGHT RESOLUTION (DPI)

4. AVOID USING PNG, GIF AND TIFF FILES IF YOU DON'T NEED THEM

5. DON'T FORGET THE ALT TEXT