Image Optimization

Probably the easiest-to-understand example of this line of thinking pertains to images such as logos or photos. According to various online resources the average LTE connection speed today is 20-30 Mbps. Let's go with that lower number just to be safe. This means that an uncompressed 1 MB image will require 0.4 seconds to download. That may not sound like much, but what if your app included an image gallery consisting of 10 images, all of which were 1 MB in size? That's right your user will wait a whopping four seconds for those images to download.

Adalo uses a service called Imgix to display images uploaded from collections. This allows for the use of parameters when displaying the image using the URL option as shown below:

Using the Imgix API Documentation arrow-up-rightyou can add these parameters to the end of the URL and make adjustments to the image. Using the parameter for output qualityarrow-up-right "q" can make a big difference regarding the file size. Here are example image taken with an iPhone 16 Pro. Without Parametersarrow-up-right - 6.7 MB With ?q=30arrow-up-right - 2.1 MB

Here is how it would look in the Builder:

You can also use image compression software or service like https://compressor.io/arrow-up-right to compress these images before adding them to your app, reducing their size from 1MB to 40 kB? That's right, those same ten images would now require just 0.16 seconds to download!

circle-info

You can use an online tool such as https://www.omnicalculator.com/other/download-timearrow-up-right to estimate file download times based on different file sizes and connection speeds.

https://compressor.io/arrow-up-right is but one of many free online services capable of efficiently compressing images on your behalf. And if you are reluctant to upload your images to such a service, keep in mind that even simplistic graphic editing software such as MacOS Preview offers compression capabilities.

Last updated

Was this helpful?