[eCommerce] What are the best images type and size to use

Forge Component
Published on 2016-01-14 by Gonçalo Borrêga
13 votes
Published on 2016-01-14 by Gonçalo Borrêga


initially I have looked at eCommerce to develop an Online shop, and because it didn't do quite what the customer wanted we have gone onto develop  our own application. However one of the things that seems to be a bit a bit of sticking point is the images to use on the screen. We have been using 1 image  per stock item, jpeg size 256 * 256 , displaying them with different sizes using dynamic resized image depending on whether it is a thumb nail or a bigger image, this does have a time rendering issue. What I want to know is ideally what is the best size and type of image to use in an online shop , both for thumb nails and for bigger images. We need the images to display responsively dependent on the device being used. I have been trying to keep the file size for the image as small as possible, but am told that this means that the quality of the image is not as good. Please can you tell me what the ideal filesize should be. Thanking you in anticipation. Jo

Hi Joanna,

Have you looked into the Cloudinary component in the Forge (https://www.outsystems.com/forge/component/457/cloudinary/). It wraps a service from Cloudinary that focuses specifically on serving images with different sizes, being able to resize them dynamically and serve them through CDNs for high performance. Its a simple way to manage those assets without having to do all the image manipulation on your own.

If this is not an option, I'd advise storing multiple resolutions of your image, resized in the background (e.g. when it is uploaded, run a timer to create the multiple formats) and used dependent on the device/form factor. Resizing them dynamically during each render creates a considerable overhead for all requests.


I've created an example application the shows how to use the cloudinary component.