Dead Eye Creative
Select Page

Retina Display Support, Do You Know The Trick?

Take a look at these following pics, do you see a difference?

231 Graphics Logo

This image is originally 650px and is being restrained just slightly with CSS to 510px.

The above pic was saved right at 510px – just the way it is displayed here. It does look grainy and cheapens the overall feel here.

If you have a Retina Display I guarantee one looks sharp and one looks like garbage.

231 Graphics Logo for Retina Display Test

This image is originally 1400px on file and is being restrained to 510px by CSS.

The above pic was the original 1920px – As long as it is double the 510px which is the display size it looks very crisp. You really can see a difference.

It used to be if you used an image on the web at 100%, showing it the exact way you had it saved, you where looking perfect. That as shown here, is obviously not the case.

231 Graphics

This pic is originally 320px and is naturally unrestrained here.

Retina Display test - artsy rainy day pic
231 Graphics

This image is originally 650px and is being restrained to 320px.

Retina Display test - artsy rainy day pic
231 Graphics

This image is originally 1400px being restrained down to 320px.

Retina Display test - artsy rainy day pic

Now saving the picture at at least twice as big as you are going to display it on the web is in your best interests.

Remember too that Image size effects load time. You must pay attention and keep everything balanced.




Pin It on Pinterest

Share This