how to maintain the image quality in browser

Question

I have designed an arrow shape image(100px*25px) in Photoshop. I am using that image in HTML label background. I have written CSS to change image width dynamically.but its sharpness changing when label width reduces.so how I can maintain the original quality as per width changes.

Answer 1

If the image is raster (JPG, PNG or GIF) then there is nothing you can do. If you specify dimensions in the CSS different from the actual dimensions of the image source, then the browser will need to do some re-sampling be able to render the image at the requested dimensions. The reason for this is that the browsers need to make up missing pixels if you specify larger dimensions or condense the pixels if you specify smaller dimensions. Different browsers and devices are bound to have different re-sampling algorithms, so you are bound to have a myriad of different user experiences.

If the image is vector (SVG), though, then you will always have a sharp-ish result. The reason for the "ish" is that, depending on the dimensions and the art, the browser might need to do some anti-aliasing in order to render fractional pixel shapes.

Answer 2

Rescaling a rasterized image is usually not the best way to go in this situation. I would consider taking your shape into illustrator and saving it as an SVG, which you can then use .

Alternatively, if you are hell-bent on keeping your rasterized arrow, you could experiment with the image rendering css property.

Try this in your css

.your-image-class {
  image-rendering: crisp-edges;
}

From: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering