Image is bolder than what is supposed to be?

[thin gazelle]

Hello guys,

I have a picture that I put on a theme (I'm using Shopify) and I don't why but the image on the website is "bolder" than the source image. Do you know why and how can I fix that? The css that I put for the image is this one:
".authentic-stamp-desktop {
display: block;
position: absolute;
z-index: 2;
right: 30px;
width: 115px;
top: 165px
}"

Thanks for your help 🙂

[fathom wasp]

Mhh thats interesting

The css shouldn't be able to make it bolder

Are you sure it's the same source file?

[thin gazelle]

Yes, it's taking the file from there, I saw somethere that maybe it can be an issue about resolution of the picture

[meager garnet]

what do you mean "bolder"?

[thin gazelle]

If you see, the letters and the stoke is not exactly the same on the "Stamp_Desktop_Homepage" that you have on the right of the screen shot compare to the image that you have at the top of the "Sale"

It's the same picture but in the actual website it doesn't feel the same because the stokes are a bit "bigger"

Especially if you look at the "AAA"

[deft girder]

is the image itself transparent

i mean other than the text and the logo

oh i think i know

the one on the left is smaller than the one on the right

therefore the computer squishes the pixels to fit

making it bolder

[thin gazelle]

Hi ethan! Yes it's a png and yes the source image is bigger than the size render on the website

I see I will try to have the same size then, thanks for your help 🙂

[green dagger]

can you provide the link of the website that has the source image

[green dagger]

there are several css image filter which you can sue to modify the image like grayscale if you want to view all of them you can got to https://coderpad.io/blog/development/everything-you-need-to-know-about-all-11-css-filters/

[green dagger]

if you are able to provide the image source link and the website link I may able to identify what filter they are using or something else which is making it bolder