Digital Decadence
A few weeks ago, at the Web Directions conference in Sydney, there was a talk that addressed quite an important issue — how “overweight” websites have been become in recent years
One fact I found particularly intriguing was the bit mentioned at minute 35: The astronaut image in the footer of medium.com
Before I dive into the article’s main point, a few metrics from that image
- The image’s file size is 1.14 megabytes. For nostalgic reasons, a high density 5¼" floppy disk would be barely enough.
- The image’s dimensions are 1600 x 711 pixels.
- The picture is positioned in a way so that only the top 395 pixels are actually within the browser’s viewport. The remaining part is shifted out of it — or in other words, invisible, hidden, not there.
Based on this it becomes obvious that almost half of the picture (to be precise, 44 percent) will never be displayed in this particular location. Using basic math we would usually say that by simply cropping the invisible part we could reduce the file size down to 656 kilobytes. But, it actually gets better.
Let the magic begin!
As the image becomes richer and more elaborate - hence more data intensive - towards its bottom half (which is interestingly the hidden part), it actually shrinks down to 225 kilobytes. After running it through OptiPNG we manage to shave off 13 more kilobytes, eventually hitting 212 kilobytes.
Voilà!
This is a whooping 82% reduction in size and traffic. Mind you, we did not lose a single visible pixel.
Now, we could take this a step further and accept a certain degree of loss in quality.
If we decide to save the image not as 32 bit PNG but choose a dithered 8 bit output we get the following
30.5 kilobytes - or if you prefer, 31,202 bytes. We saved 1.1 megabytes or 97.4% in comparison to the original image, at a tolerable loss of quality.
My conclusion: Why?
This is just an example. There are thousands of such images and similar resources out there on the Web wasting precious bandwidth and traffic. There were a few other equally heavy examples mentioned during that talk (right, Apple and your five space shuttles?).
The reason why I picked medium.com out of these examples is that the offending bit has a noticable impact on every single article while not adding anything to the user experience at all.
In case anybody from medium.com comes across this article, please reconsider attaching a semi-invisible image larger than Crime and Punishment and either remove it from a location where people do not - or in this case, even cannot - pay attention anyhow, the very very bottom of a page, or please use at least an optimised graphic.
Incidentally, this page with three images and 505 words is ~3.4 megabytes large (almost three 5¼" floppy disks)
