Images for WWW and social media

Pictures for the Web

Let's be honest, most of the pictures you take will be consumed digitally, like on these www pages.

If you leave the technical details aside, most WWW pages and social media posts will require a resolution of around 1 Megapixels. All pictures on this wiki are scaled to 1280 pixels wide and depending on the aspect ratio are around 700 to 900 pixels high.

If you have a 24 Megapixel image, the following will happen

It will take 25x times longer to download the image
Your browser or app that uses this picture will spend some time to resize the image to a more manageable dimension, in most cases even less than 1 Megapixels. This will cost additional time
The resizing algorithm that your browser will use may not be as good as the one you can use for the preparation. Do not believe me, check the pictures below. The one on the left is scaled dynamically by the application you use for viewing this page. The one on the right are different scaled versions and your browser is instructed not to resize them in any way.
The additional detail of your higher resolution image will not be visible. Check the column on the left. These pictures will probably all be smaller than any picture you see on the right (depends on your screen) meaning that they all had to be scaled down by some amount. Although the original image has more Megapixels and can display more detail, because of resizing you will not see it.

For all practical purposes media for www and social channels should not exceed 2 Megapixels

Common resolutions like 800 pixels, 1024 pixels, 1280 pixels wide are more than enough for all practical purposes. Using scaled images helps save network bandwidth, storage and computing power for everyone.

A little experiment

Take a look at the examples. On the left I have them scaled to the width of the column, on the right I have them with the original sizes as uploaded.

You can play with the width of the window, to see how the column on the left adjusts.
As long as the picture on the left side is smaller than the corresponding one on the right hand side, your computer/phone had to do extra work to scale the image.
Notice that the quality of the scaled images on the left does not improve when they are scaled from a much larger image. If you are really in an argumentative mood, you can point that this image does not have sharp features all over the frame (only the flower is in sharp focus). It is true that for certain images, there might be more visible difference, however even with carefully engineered images, this difference will be very limited.

Dynamically adjusted

Most modern WWW pages would scale images dynamically (or pre-compute some common sizes in advance) like on this column. Regardless of the resolution the images are all scaled to the same column width here.

800 pixels wide, 0.4 Megapixels

1'280 pixels wide, 1.1 Megapixels

2'560 pixels wide, 4.3 Megapixels

3'872 pixels wide, 10 Megapixels

5'478 pixels wide, 20 Megapixels

8'256 pixels wide, 45 Megapixels, original

Not scaled

In this column, the images will appear in their original sizes without any scaling. Modern www pages and social media feeds rarely do this, as the users will have devices with different capabilities and preferences so the images will mostly be scaled like on the left column. This side gives you an idea how large they originally are.