0

Let's say I have a JPG file 500x500px. I want to display it at 100x100px on my website.

Is there a point of reducing the file image resolution to 100x100px from a file size perspective, rather than just using CSS?

Is it just that it would not reduce if you kept the resolution the same, but you can get away with reducing the image resolution more if you make the pixel resolution smaller?

2 Answers 2

2

Yes.

Less pixels means less data to store.
Smaller image pixel dimension will result in a smaller file (kb).

(Note: There is no direct correlation between the amount of pixels within an image and file size of the image - actual pixel data for a single pixel will vary in size. Data size is not a constant factor. Some pixels will need to store more data than other pixels.)

Each pixel is a data point. The more pixels there are the more data points there are. It doesn't matter if there are 10k pixels displayed at 100x100px or displayed at 500x500px, it's still the same 10k data points.

CSS doesn't do anything in terms of image compression (kb). CSS just sets display options.


The difference is that using CSS to reduce the dimensions can allow for images to display better on Retina or 4K monitors. Higher resolution monitors display higher pixel count images better. But again, there's no compression with CSS.

If one has 2 images, for example: One image is a 10,000 pixel image (100x100px) and the other is a 250,000 pixel image (500x500px) - Both images are displayed at 100x100px on a web page. Even though both images are set to display at the same pixel dimensions, the 250K pixel image is going to look much better on a Retina/4K monitor compared to the 10k pixel image.

4
  • Is that only because you can get away with less file data to achieve the same visual effect? What if you kept all the same actual density but just compressed it (so the pixel density increased relatively)? Jun 26, 2023 at 16:28
  • @AdamThompson Each pixel is data. The more pixels there are the more data there is. It doesn't matter if it's 10k pixels at 100x100 or 10k pixels at 500x500, it's still 10k data points. Screens don't read any image pixel density. The PPI means nothing. See here Because screens don't read PPI, images are saved at 2x or 3x the pixel dimensions.. to allow for a higher effective PPI when displaying on a retina/4k screen.
    – Scott
    Jun 26, 2023 at 16:30
  • I see, so it's literally just you can't achieve the same quality with less pixels. The pixel is the unit of resolution. Thanks. Jun 27, 2023 at 1:59
  • @AdamThompson also since PPI is a sizing factor, you redefining the size in CSS just plain overrides everything PPI might have in any world meant.
    – joojaa
    Jun 27, 2023 at 8:09
1

Although Scott´s answer is right, I will complement it.

Does reducing image pixel resolution affect image file size?

Yes, but as it is not the only factor for determining a file size, the answer is: Yes but not directly proportional to the data stored in the file.

A 100x100 image has 25 times less pixels than a 500x500 one. But that does not mean the file is 25 times smaller necessarily.

You are mentioning a JPG, which is a compressed file format. When you decrease the pixel size, you could probably use less compression than the original file, or simply the image itself simply can not be compressed that much.


This is not being asked, but let me complement it a bit more.

  1. As per CSS best practices it is a good idea to have the images the size they are displayed because SEO engines will detect the discrepancy as maniacs, especially for mobile versions to save bandwidth and therefore loading speeds.

  2. A 100x100px image sounds like an icon to me. Consider using SVG or even PNG.

  3. For retina displays you need to add the complementary images using "srcset" attributes or "picture" tags. One image would be 100x100px and a 2x source would be 200x200px.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.