Size matters

Hardangervida hoogvlakte Hardangervida hoogvlakte ArFU / Frans van Bragt

You want your images to be viewed at its best. Therefore you add them to your website at 100% jpeg quality, and in high resolution. All for the best result, so everybody with a high-resolution screen can view hem at its best.
For those with a smaller device the browser handles scaling. Seems like the right approach.

Unfortunately this is not the case.
First of all, a screen is no match for a quality print as far a detail quality is concerned (not even an expensive Apple screen). Loading an image in a website at 100% jpeg quality is usually a waste of bandwidth and has a negative impact on the website performance.

The file-size of an uncompressed image in KB is (pixels-hor x pixels-vert x bit depth/channel) divided by (8 x 1024). Bitdepth usually is 24 (=3x8) for RGB images with 16,7 million colors. 
An image of 600x400 px has a file size of (600 x 400 x 24)/(8 x 1024) = 703KB. If you send the image to the browser at twice that size the file size will be (1200 x 800 x 24)/(8 x 1024) = 2.813 KB, 4 times the size of the smaller image. Resolution x2 = file size x4, and for an image that is 10 times the size it means 100x the file size.

exampleexample of jpeg artifactsCompression
Images for a website should always be compressed, especially when it is a high quality image. Compression means less quality, so the amount of compression depends on the quality of the initial file. Compress the image to much and you will see jpeg 'artifacts' appearing in the image. Artifacts show up as small squares and other distortions in the image (see image).
Images on this website are usually compressed to 60%.

Compression tools are e.g. Photoshop, Lightroom or for online compression.


Images on a website should always be placed in a resolution which matches as much as possible the size at which they are places on the website. Compress images as much as possible without resulting artifacts.