JPG files posted on social media

This may be just a Facebook quirk, but it makes no sense to me.

Photos posted on FB vary in how large they appear, how much actual screen real estate they take up. No surprise there, I suppose.

But, the “visual” size of the photo on my screen seems to have an inverse correlation to what the actual size is in terms of dimensions and file size.

Example:

I just did a test post on my FB page:

Photo 1: Dimensions: 560 x 437; Size: 48.7 kb
Photo 2: Dimensions: 1200 x 675; Size: 132 kb

Photo 1 appears, on my screen, significantly larger than photo 2.

Can someone explain this?

Thanks!

mmm

I am not on Facebook but my guess is it is the ratio.

Photo 1 is nearly square in shape (like an old TV screen).

Photo 2 is rectangular (like a wide screen TV).

Facebook needs to fit the photo into a certain space on the page. A rectangular photo (Photo 2) needs to be shrunk a LOT more to fit the width of the space than Photo 1 does.

So, it looks smaller.

For example, let’s say the width of any photo on Facebook needs to be 500 pixels or less horizontally (I am making up numbers as an example).

Photo 1 would need to be reduced in size by about 11%.

Photo 2 would need to be reduced in size by about 58%.

Webpages care more about horizontal size than vertical size so that is usually what they work on. A webpage has limited horizontal space but near limitless vertical space because you can scroll down forever. (yes, you can move horizontally forever too but scroll wheels move us up and down through a page so that is what is “natural”…it is a rare web site that makes someone scroll horizontally to view content).

Thanks, Whack-a-Mole.

However, both photos are rectangular (although photo 1 has a slightly wider aspect ratio).

Also, note the dimensions:

Photo 1 (appears larger) width: 560
Photo 2 (appears smaller) width: 1200

I’m not arguing, just still baffled.

mmm

I think what will help is understanding that Facebook has a defined space you have to fit your photo into.

No matter how big your photo is, it must be shrunk down to fit in the frame Facebook has defined.

So, see my post above. If the frame is (say) 500x400 (making numbers up for example) then everything must fit in that space and will be resized to do so.

Your 560 file barely needs to be shrunk (11%) to fit in that 500px space. Your 1200 file needs to be shrunk a LOT more (58%) to fit in that same 500px space. And both axis shrink to keep it looking good so when the X-axis shrinks so does the Y-axis.

So, now the bigger picture looks smaller. Especially since it is so much wider the Y-axis has to shrink with it.

For what (little) value it is worth, FB requires a business to use 1024 x 1024px logos, even though they never, ever use them at that size.

They scale down, so the 50 x 50px* logo next to the post is the same 1024 x 1024px image, scaled down.

The aim is

A) to keep quality of the pictures consistent
B) ensuring the picture will fit in the space allocated

For both reasons, scaling down loses information in the image, but as the size gets smaller that is not obvious, whereas scaling up can’t be done in a way that doesn’t degrade the image quality.

  • not having used FB for years, I can’t recall the real size of the “small” image.

This is the explanation, thank you. Upon close inspection I see that only the Y axis shrunk - careful measurements prove that. But the two photos look so different in size that they optical-illusioned me into thinking that the whole image - X and Y axis - were smaller in Photo 2 than in Photo 1.

mmm

I haven’t looked at facebook specifically, but I know that there are two specs imbedded in JPG files that can be used for display space allocation; the number of pixels in two directions and the height/width in inches (or other units). They are not always interdependent. (Something can be spec’d as 2 inches wide at 200 pixels, another as 2 inches, 400 pixels.)

So much graphics nowadays is automatic and seems to work that I have ignored these specs for years, but I recall that many display (video or print) algorithms used one or the other or both, with varying results.