Software Development:
Individual Programming

Symptom

A picture (photo) of your website is built up slowly. It does not suddenly appear as a whole picture, but is slowly rolled up from top to bottom.

Cause

The image file is much larger than the image size you want to display. It was not scaled down to the appropriate size before it was incorporated into the website. Instead, you just put in a statement in which size the image should be rendered. But the browser still must load the whole, much too big image file.

Example: Your photo was taken with a 5 megapixel digital camera (in the typical aspect ratio of 4:3, this corresponds to an image that is approximately 2600 x 1950 pixels in size). To ensure the best possible quality, digital cameras store the image with little data compression. Digital photos are therefore usually several megabytes in size, e.g. 3 MB. The image should be shown in the website but only with 400 x 300 pixels, so with about 1.2 megapixels. So your picture file contains more than four times as much data as is necessary to be displayed on the website. Finally, its data compression in the camera is low. In a website, the file can be compressed much more. A typical file size for the example would be about 80 to 120 KB in JPEG format. An image formatted correctly for the website would only take up about 1/30 of the space of the original image file. Accordingly, it loads quickly, namely 30x faster than the original file.

Solution

Use an image editor to reduce your image file to exactly the number of pixels really needed for rendering. Store the image in a format with data compression, e.g. JPEG. Only then do you import the image into your website.

Overview of frequently asked questions