Why images are blurry on some screens?
For website, using pixel perfect images are as important as having good content and good SEO.
But after introduction of retina screens, it has been difficult to maintain the image quality on the website.
Same image on standard looks pixel perfect and on a retina screen it looks blurry.
The reason behind that is:
Apple’s retina screens have decoupled the actual pixels of the screen from the pixel dimensions of the image.
Prior to retina screens, an image loaded in a web browser that was 100px x 100px would take up exactly 100×100 screen pixels.
Retina screens (which is just Apple’s term for super-high-resolution screens) had a problem where if they rendered images and text at ‘actual pixel size’ everything would be way too small to be legible.
As such, retina screens attempt to render content at the same size as non-retina screens, but use more pixels to do so.
So for easy math, let’s say a retina screen is twice the resolution of a standard screen.
If you create a 100×100 image and view it on a normal screen, it will look sharp as each image pixel uses one screen pixel.
On a retina screen, however, that 100×100 image will take up 200×200 screen pixels. The browser translates the 100 virtual pixels into 200 real pixels.
To do so, it has to make up all the missing pixels via interpolation which causes the blur you see.
No more blurry images
Use the following different methods to prevent images from getting blurry.
There are various methods that we can implement. Try these and see which one works for you.
The first fix is to make your images 200×200 actual pixels, then size them in your HTML or code to render at 100×100 pixels.
On a normal screen, it will look the same. The extra pixels are just thrown away.
But on a retina screen, it will now look sharp as each image pixel is now using one screen pixel.
- Add following CSS in your website to render sharp images
.sharp { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor;}
Add “sharp” class in yourtag and see the difference among your normal images.
Above solutions are tried and tested and have been implemented by thousands of web designers. It has been working well for them. Try it and let us know if it worked for you.
1 Comment
This helped me alot ….thanks for giving a solution