Making Images Retina Display Friendly

Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regular display. If you want to show a higher quality image you have to double the pixels and then specify half, so then when a high res display picks up the image it will use the full size of the image rather than stretching it out and causing pixelation.

So to make your images look nice on a retina display, you need to double the image size and half the display size. That's if your not using a Scalable SVG image anyway (which always looks smooth). So this should only apply to PNG, GIF, or JPG and probably other types of pixel based images.

the original res of this image is 900 x 585 so we will set this to half, and when it displays it will look non pixelated

Using the max width and max height also allows this image to be responsive.

HTML

<img class='retina-friendly-image' src='https://kruxor.com/images/inspiron-13-7370-2.jpg'>

CSS

.retina-friendly-image {
max-width:450px;
max-height:292px;
}

Demo

Other Items in css
Page Views

This page has been viewed 61 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹