Media optimization in e-commerce - 3 practical ways

Paweł Chyl-small-image
AutorPaweł ChylCEO
Topics covered
Share this post

Images, videos and other multimedia assets play a huge role in conversion, but if they are not optimised properly, they can put a significant strain on a website, increasing its loading time. How can this be remedied? Here are three proven ways to optimise e-commerce media to help improve page speed, user experience and sales results.

Image optimisation - format, conversion and dimensions

Optimising images is a multi-step process that can not only significantly speed up page loading, but also save resources and time.

The first technique you can use is to dynamically resize images by adding parameters in the image URL. This ensures that only one copy of a given image is stored. The appropriate size selected by the frontend application depending on the user's needs eliminates the need to generate multiple dedicated thumbnails.

The next step is to optimise the images using Monogo AI Image Optimization. Our tool automatically scales and compresses images, allowing them to be significantly reduced in size while maintaining high quality. For one of our clients, we achieved a compression ratio close to 90% for the entire media library. This brought tangible benefits - saving disk space and backups. In addition, the content team's working time was reduced by approximately one month per year. These results demonstrate the impact of image optimisation automation on team efficiency.

The use of content delivery networks ( CDN )

To further speed up the loading of multimedia resources, it is worth implementing a content delivery network, or CDN (Content Delivery Network). A CDN reduces page loading times by delivering resources from servers geographically closest to the user. As a result, images load much faster, which directly translates into a better user experience and a lower rejection rate.

When choosing the right CDN, it is worth paying attention to support for optimal image formats, such as WebP, and support for features such as automatic scaling and compression. This not only improves loading speeds, but also minimises the load on our servers.

You need to know that the WebP format is not yet fully supported by all available browsers. The CloudFlare service we use has on-the-fly conversions to the WebP format based on the headers sent by the browser. This avoids the client being left with a blank space instead of an image, even on older devices.

Lazy loading for better UX and faster page loading

Media optimisation affects page speed. Lazy loading is a technique that optimises the loading of page resources - images, videos, scripts or even entire sections. Multimedia is only downloaded when the user actually needs it. In this way, resources are only loaded when they become visible in the user's view area. This significantly speeds up the initial loading of the page and relieves the servers.

The effect of lazy loading can be easily understood by means of an example. If there are a large number of product images on a page, traditionally all images would be loaded at the same time when the page is accessed. With lazy loading, instead of loading them immediately, the images will only be downloaded when the user scrolls down the page and actually sees the product. This reduces the initial resource of the page, allowing it to be displayed to the user faster and improving the user experience (UX).

Lazy loading is particularly useful in e-commerce, where there are usually long lists of products with images. The use of this technique reduces the time it takes for the page to load for the first time and reduces data transfer. This is beneficial for users using mobile networks or with limited internet access. This solution is also appreciated by search engines, as faster page loading improves the page's position in search engine results (SEO).

Optimising a website is a process that requires ongoing work and monitoring. There are many areas that you can improve upon. It is a good idea to start optimising media by resizing images, implementing a content delivery network (CDN) or lazy loading techniques. It is always a good idea to draw on the expertise of experts. If you want to see how to effectively optimise images in your e-commerce site, write to us and test our proprietary Monogo Image Optimisation solution for free. See how you can easily and securely optimise media on your platform maximising conversions and minimising costs.