Describe Image Quality

Design & UX
1

Can someone please explain to me what the difference is in the image quality between these 2 images.

2

To my tired old eyes I detect no difference in quality between the two as posted.

What difference(s) are you referring to?

2 Likes
3

The image grain.

4

If I blow the images up in my paint package then I can see that the one on the left is more pixel sharp and blocky and the one on the right has been smoothed out or anti-aliased so that the change between pixels is smoother.

2 Likes
5

How is anyone going to be able to see any difference at that size?

Tried saving them to my PC but it seems they are just the one image; you need to supply a link to the original images.

6

Which quality looks better to you?

7

I zoomed in and looked long and hard, eventually seeing some difference. The one on the left has at least a few “artifacts”

1458×906 151 KB

I would never have noticed if I hadn’t gone to such effort to look for them.

8

What does that mean? artifacts?

9
10

Can that effect, the one on the left be reproduced in the code you provided?

<div style=" border: 3px solid #0059dd;width: 260px;height: 194px;cursor: pointer;background-color: black;">
  <svg width="260" height="194">
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg"></image>
  </svg>
</div>


<style>
  #container1 {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
    margin: -200px 270px;
  }
  
  #img1 {
    position: absolute;
    margin: 40px 45px;
  }

</style>


<div id="container1">
  <img id="img1" width="170" height="112" src="https://i.imgur.com/BO6KOvw.jpg">
</div>


<style>
  #container2 {
    background-color: black;
    width: 260px;
    height: 194px;
    border: 3px solid #0059dd;
    margin: -200px 540px;
  }
  
  .test {
    background: url(https://i.imgur.com/BO6KOvw.jpg) no-repeat 25px 25px;
    background-size: 130px 130px;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    margin: 7px 40px;
  }

</style>


<div id="container2">
  <img class="test" src="https://i.imgur.com/4HJbzEq.png" alt="">
</div>
11

So, what you’re saying, is that it looses it’s image quality when that occurs?

12

That’s exactly what it is.

13

Is that what using svg does to images?

<div style=" border: 3px solid #0059dd;width: 260px;height: 194px;cursor: pointer;background-color: black;">
  <svg width="260" height="194">
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg"></image>
  </svg>
</div>
14

Compression artefacts will be created when the image file is saved in a lossy format such as jpeg for example and they exist in that file.
It has nothing to do with how you load and display the image.

5 Likes
15

Looking at your code, both use the exact same source file URL, so are both loading the exact same file.
If that is the case the difference can’t be due to compression artefacts, as those will be identical in both. It must be how the images are scaled down and resampled by the different methods of display. That would account for Paul’s comments:-

2 Likes
16

Why are you using this image of 414k to display at a size that could be managed in about 4K!!!

The image is natively 1920 x 1200 but you are only showing it at about 180 x 112 and could be compressed down to just a few k.

If you are talking about my .test example then you need to make sure the background-size matches the intrinsic ratio of the images. I just used 130x130 for testing but it should not be square it should be the correct aspect.

e.g.

Something like:

.test{
	background:url(https://i.imgur.com/BO6KOvw.jpg) no-repeat 25px 32px;
	background-size:180px 114px;
	border-radius:50%;
	width:180px; 
	height:180px;
}

Although I’m not sure if that’s what you meant and I’ve finished for the day anyway :slight_smile:

5 Likes
17

Also bear in mind that if you are saving an image in a lossy format, such as jpg, each time you save the same file, the quality will be reduced further from what it was before. Even if you have the image editor set to its highest quality, it will still get compressed more than it was before. So an image saved twice will be of a poorer quality than one saved once, even if no other edit actions have been taken between saves.

2 Likes
18

That’s this:

How would you make the left side round?

19

The left picture is much more clear than the right one.

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.