Menu
When the internet first started there wasn't any broadband; ordinary users had very slow dial-up services with limited bandwidth. If you were lucky the service was better at work. As connection speeds were so slow people who made websites (the job title Web Designer hadn't been invented) had to be clever and very efficient with the information they put on screen. They had to Optimise all of the image content to make it as small and as fast as possible.
Many of today's website designers have either forgotten this or never knew it. They have grown up with broadband, massive bandwidth and PCs with enormous processing power plus 4G mobile networks. What they don't consider is that not everyone has super fast broadband and not everyone has excellent mobile coverage so they don't bother with image optimisation and that will affect any site's download time and responsiveness.
We can start with the physical size of an image; particularly a modern digital photograph. A modern relatively cheap digital camera will be 20 mega-pixels or more. This means that a standard photograph's "natural size" is over 1 metre wide! The size is so big to enable both high-definition standard prints but also hanging picture enlargements. In image measurement, this is around 3,500 pixels wide but for an image on the internet we probably only want it to be 500 pixels wide. If we use the full-size image the file size is also massive (in excess of 17 megabytes) and if we put it on the page and tell the browser to make it only 500 pixels wide you download 17meg of data only to squash it down to 500 pixels - what a waste of time.
The first thing we do is to make sure the images on your page are the "correct" size so if it's meant to be 500 pixels we use image tools to reduce it's size to 500 pixels wide before we put it on the page. This alone will reduce the file size to half a megabyte and make it download 30 times faster.
If we want to print an image to get the excellent quality we need to be able to print 600 dpi (dots per inch), actually, for good quality we only need 300 dpi and for web pages, we only need 72 dpi. It doesn't matter that you have an Apple Retinal Display or a higher definition AMOLED display we all have these brilliant pieces of organic equipment our eyes and a brain. We can tell what something is from tiny amounts of information so particularly on a mobile screen we don't need super high-definition images.
Also, modern images have millions of colours and our eyes can distinguish millions of shades (opinions vary on how many) but we will see far fewer colours as a good quality image well below the number marketers have convinced us we need to pay for on our phones. Additionally, images will contain hidden "meta" data that can be used by professional image manipulation tools to understand shutter speeds and exposures - things we don't need on the internet.
We use tools to strip out unnecessary metadata and reduce the number of colours so that we again can reduce the image file size without the image looking poor. There are exceptions, for example, a photographer's website may need some higher definition images because that's the business they are in but this can usually be achieved by small images for review that are linked to higher definition images for close inspection.
Google provides a test tool (Page Speed Insights) to test the speed of a website and if you have a website already why not give it a try? The test runs on a site before any optimisation (it's best to build the site before optimisation because it becomes almost unreadable for humans afterwards) typically yields the following results:
