Retina Display Support, Do You Know The Trick?
Take a look at these following pics, do you see a difference?
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.
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.
This pic is originally 320px and is naturally unrestrained here.
This image is originally 650px and is being restrained to 320px.
This image is originally 1400px being restrained down to 320px.
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.