Blur images when getting smaller

[nikostzounakos]

Hello!

I have some png images that I want to look good on small size, so from 900px I make them down to 40px but they look really blur.

I have found this code that fixes somehow this problem

image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

But again it is not as the original image. It looks a bit pixeled.

Maybe you know another way to make it possible?
Is it a good practice to change the .png type and make it something else?

[PaulOB]

@nikostzounakos

I have some png images that I want to look good on small size, so from 900px I make them down to 40px but they look really blur.

Are you scaling the images in your paint package or in css?
Also are you only displaying the images at 40px all the time?

If so then you should create images in your paint package at 40px from a good quality original image and then use those instead. Unless this is a responsive scenario there’s no point in scaling the image down in CSS as you are still loading the full size image with all its overheads.

If this is a responsive situation then it seems weird that you would let the image go from 900px down to 40px? Scaling an image in CSS will always lead to a slight loss in quality but you need to start from a good quality image to start with at a larger size than you need and then it will scale down better. However scaling from 900px down to 40px is never going to be perfect. You could scale from say 200px down to 40px without being too blurred but of you go from very large to very small then expect a loss of quality.

You could use the picture element or srcset and swap images as the size gets smaller or larger so the best image is supplied for the width required

Or switch to svg created images (for logos and the like) if possible and there will be no scaling problems.

[nikostzounakos]

Great thank you very much for your answer!

There is a responsive scenario but definitely I can use the srcset and make load a smaller image.

Thanks again!!