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.
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