Why you can’t put those gorgeous 16-megabyte images in your Concours article.
Photos by Bob Reinkens
I hate being the bad guy. I really do. But sometimes, in my role as Editor and Chief for CHALLENGE, it’s my job to be just that. I’m the guy who has to tell a photographer with many thousands of dollars – sometimes 10’s of thousands of dollars – of equipment, why they can’t put the images that they shot and so lovingly worked on in post-production onto the club’s website.
I’m going to take a step backward for a minute because it’s important for this discussion to understand how a web page is constructed and displayed to understand why size matters.
Any web page is nothing more than a collection of individual assets: image files, text files, video files, sound files, etc. All those assets exist on web servers as individual files which are assembled and placed into their proper location in your web browser, using instructions provided by yet more files. By way of example, the single “home page” of CHALLENGE (https://cvrpca.com/challenge/) that you can see is made up of 143 assets, all sitting on the web server as separate files.
To display a page, the browser requests the assets from the webserver individually. That’s why it’s important to write efficient code and keep the number of requests as low as possible. One of the things that can slow down a webpage is the sheer number of requests from the browser.
Another of the things that can slow down a website is the location of the assets being requested. Modern websites are built using “open source” code which is code that is available to (and kept up to date) by developers all over the world. That’s the good news. The bad news is that open-source code doesn’t get stored on your server. It’s stored elsewhere, which means the speed at which your request for it is filled is subject to internet “traffic jams”.
What does this have to do with images?
The third thing that can slow down a website is the sheer size of the files being requested. All assets (files) have a weight associated with them, and next to video, no type of file weighs more than an image file. Using the example of the CHALLENGE home page, the breakdown of weight by the type of file shows that images account for almost 1 megabyte of the page total of 2.2-megabyte size.
Looked at another way, the 18 images on the page which represent 12.6% of the requests for assets account for 44% of the total size of the page. That means the average image used is about 53 KB (kilobytes) in size.
Now, let’s go back to the beginning. Why can’t you use your 16-megabyte image in your articles?
The simplest reason is that if the CHALLENGE home page had 18 16-megabyte images on it, the page would take forever to load. Seriously, you could open your browser, click on CHALLENGE in the menu, and then go out for a nice lunch. OK, maybe that’s an exaggeration, but have a look at this chart from Verizon:
I’ll interpret. Verizon says its 5G phones can download files at the rate of 67.1 megabits per second. T-Mobile, Sprint, and AT&T are a little higher, but those are best-case theoretical numbers. If the CHALLENGE home page had 18, 16-megabyte files on it instead of 16, 56-kilobyte files, the time it takes for the page to load would go from 4.4 seconds to well over a minute. That’s too long. People get bored waiting more than about 10 seconds for a web page to load. And keep in mind that the speeds in that chart are for the newest phones with the fastest processors running at 5G speeds. Your experiences may vary.
But I still want my pictures in my article.
Just because you can’t use that gorgeous 16-megabyte file doesn’t mean you can’t use your photos. It just means taking a few additional steps after snapping the shot.
There are guidelines published in CHALLENGE that apply to how to create and format the images used all over the website, and you should read them before submitting anything. Keep in mind, guidelines are not instructions. Creating instructions would be a massive undertaking. That’s because every camera phone and DSLR is different, and there are 100’s of software programs available for post-production work. (Adobe Photoshop is probably the most widely used, but it’s not the only option.) The point is, you can’t create step-by-step instructions for that many devices and programs. But you can create guidelines, and that’s what we’ve done.
Suffice to say that when you follow the guidelines – with whatever editing program you decide to use – the practical difference in what the photo looks like on a web page is negligible. In the screenshot below are 3 different versions of the exact same image. The one on the left is the original image, in this case, it was 5.5 megabytes. The one in the middle is the same image at .4 megabytes and the one on the left is the same image at 120 kilobytes (.12 megabytes).
Do you see a difference? Me either. But your phone or desktop would. The image in the middle would take nearly 4x as long to download as the one on the right. And the one on the left would take 10x as long as the one in the middle.
All of which means that while size matters, bigger isn’t necessarily better.
