Image Optimization
Last updated
Was this helpful?
Last updated
Was this helpful?
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 you can add these parameters to the end of the URL and make adjustments to the image. Using the parameter for output quality "q" can make a big difference regarding the file size. Here are example image taken with an iPhone 16 Pro. Without Parameters - 6.7 MB With ?q=30 - 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/ 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!
You can use an online tool such as https://www.omnicalculator.com/other/download-time to estimate file download times based on different file sizes and connection speeds.
https://compressor.io/ 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.