Here you can find examples of how to perform a range of web page techniques.

7.87MB | 5500x3667px | 300dpi

The Original image

5.37MB | 5500x3667px | 72dpi

Reducing the dpi but still sharp

977KB | 5500x3667px | 96dpi

Reducing the dpi but still sharp

83.9KB | 1320x800px | 96dpi

83.9KB | 1320x800px | 68.1dpi

SO WHICH IS BEST?

Images should disaply as soon as you arrive at a page. Refresh {shift+F5} this page a few times and you'll see they come down at different speeds. Why is that?

Files sizes are best at less than 100KB and 72dpi. How do we achieve this?

The middle image on the top row comes down slightly faster as it has a lower dpi and does not take as long to render. But - the thing is 5MB in size. Imagine if you had a website full of 5MB size the whole website would be bloated.

The last image downloads the fastest and is therefore the best. Lowest filesize. Lowest resolution (dpi). BUT, click on it and look at the expanded size quality compared with the others. So now which is the best?

Finally, look at the background image. It is the fourth image in the series. It looks good and displays fast when shown at 150x120px. But when expanded you can see it pixelates - look closely at the ridge between mountain top and sky.