Best Practices for using images in Horizon

For most leaflets, our users want to add extra non-product visual elements, such as headers, footers, dividers etc.

When you want to add extra non-product images, there are some considerations to ensure your images are crisp and clear in your leaflet without sacrificing load speed.

Horizon is designed to be fully dynamic and automatically adapts content, such as images, to the screen size of the viewport size of the device (phone, tablet or desktop) it’s being viewed on.

So, Horizon doesn’t simply serve the original image. Instead, it automatically generates an optimized version of the image.

That means:

To get the best results when adding images, you should:

1200 pixels width ensures the images look sharp on larger displays (e.g., desktop screens), and can be downscaled on smaller devices without loss of quality.

If an image is uploaded with a width below 1200 pixels, Horizon may need to upscale it to fit larger screens. Upscaling can lead to pixelation of the image.

Even with optimization, smaller source files help improve load speed and performance of your leaflet.

There is no in-built maximum size for most file types, but we recommend using images with a maximum file size of 10 MB or lower.

If you want to add a GIF to your leaflet, it may be worth considering if the animation could be obtained and added as an MP4 instead, as this can improve load speed. You can read more about our best practices for GIFs here.