Skip to main content

Control image size

Often images included in a web or mobile application are produced by professional Image agencies whose primary goal is to get ultra high definition pictures with a crisp grasp of details. Other typical situation is the use of existing images from a database, originally collected for a different purpose than the mobile/web application.

These result in images that are too large to the target display size - developers tend to resolve this issue by simply controlling the width and height HTML properties of an Image, instead of preparing the images for optimizing load times.


The first load of a screen is directly impacted by large images that are still not cached on the browser. The browser cache is even irrelevant on Banner images that keep changing on each screen load. On mobile devices, this problem is augmented by the more limited device capabilities and network latency.

Best practices

  • Reduce the image size to the displaying size

  • Compress images to the maximum rate not perceivable by the human eye

  • Don’t use the same image for different form factors

  • Don’t use the same image for displaying both detail and a fingerprint

  • Was this article helpful?