Retina @2x Images and more...
Creating retina @2x images is not as simple as it sounds. It’s not just a case of adding an alternative version of the image at twice the resolution - even if the original 1x is at the optimum size. If the original image has not been correctly optimized, adding a 2x version is going to badly compromise the page download speed in the browser.
Take the example of an image that is 800px wide by 600px high.
The image originates from a camera at 2400 x 1800
The image is reduced to 800 x 600 and imported into EverWeb.
When the image is inserted into a web page which is 1054px wide, it will be 800px wide and the image is shown at 1x.
If the same page is loaded onto an iPad in portrait mode, the 1054px page will be squashed down in size to fit a screen width of 768px so the resolution of the image will be increased by about 50% or 1.5x.
Although this resolution is too high for a non retina iPad, and not high enough for the retina version, it is a reasonable compromise between image quality and file size (download speed).
The situation becomes even more complicated on the iPhone.
The 800px wide image is far too large for the 320px wide non retina iPhone screen, is adequate for the retina screen of the iPhone 6 and too small for the iPhone 6 Plus.
Get and illustrated guide to all this iPhone stuff.