There are 2 images: one with a resolution of 100 to 100, the other 300 to 300. Will they look the same or is the second option better?

<img id="aaa" src="1.png" />\\100 на 100 <img id="aaa2" src="2.png" />\\300 на 300 <style> #aaa { position: absolute; top: 0px; left: 0px; } #aaa2 { position: absolute; top: 0px; left: 120px; width: 100px; height: 100px; } </style>

There is such a fashion in the new technology: to make a large resolution (but with small sizes). That is, there are a lot of pixels per cm, or an inch squared (compared to earlier displays). According to the logic, there with a higher resolution it will be better than 300 by 300 than 100 by 100. Is this so or not? I just think that in such an example (100 by 100 with high resolutions) you will need to show 1 pixel of the image by several pixels. And if 300, then I think it will be the norm, or not? But if you look at the 300 to 300 image on the old display, will it look like without antialiasing? Does CSS compress images, or does it make changes to the image resolution before displaying on the screen? Or is it all nonsense?

  • one
    Equally. - Sergey Skripnichenko

3 answers 3

Big size:

  + высокое качество + не будет выглядеть плохо на старых экранах - больше трафика

Small size:

  + Меньше трафика - Не очень чётко на современных дисплеях - УЖАСНО и размыто выглядит на retina дисплеях
  • Large size: - Is this when the 300 by 300 image is stuck with a CSS of 100 by 100? Or is it just 1 to 1? - Sirius
  • @ Oleg24 300x300 ==> 100x100 - kandi
  • I see. Thanks. - Sirius

On such sizes will look exactly the same.

but 3000x3000 and 1000x1000 when scaling with CSS means that a larger size will still be preferable.

  • And why: "but 3000x3000 and 1000x1000 when scaling with CSS means that a larger size would still be preferable." ??? - Sirius

@ Oleg24 , read here , here , and here .

I hope everything will become clear.

  • I knew this, and the third link to the question itself). But my question is not in this. The question is whether it is worth taking an image 300 by 300 and compressing CSS with 100 to 100. And what will be with quality. - Sirius
  • @ Oleg24, if you compress the image 300x300 to 100x100, then nothing terrible will happen (do not lose in quality). And if 300x300 is increased to 1000x1000, then the loss of quality will be obvious. The reverse is also true. In the links that I have, this is written. - Astor
  • I know that if with more in less - without a loss of quality, and from less to more - more loss, And if I need to fill in a site with a div of 100 by 100, and I'm in a folder with images of the site I will throw a larger image (for example 500 by 500), but in CSS I’ll put a width of 100 and a vista of 100. Then my div will look better than when I also take the images and in the page I change to 100 by 100 and insert it instead of the first image (of what is 500 by 500)? Is it worth doing this? Or is there no difference? - Sirius
  • Without quality loss is a serious problem, yes. Demons need to drive. - nitrocaster