However, when you zoom in on the picture the image projected would still be 300 pixels per inch, keeping the image crisp. If the CSS pixels and the pixels of the screen were both 300 pixels per inch, you would not notice anything. Observe that the Retina-resolution image looks worse on a non-Retina screen it is blurred due to downsampling to screen resolution for display. Essentially, Retina effects the CSS pixels of a screen not the actual pixels.
The images below can be manually togged to standard/Retina (normally this is automatic, it is done manually here to allow one to see the difference on any display). Traditional non-retina computer screens look slightly blurred with retina images (due to downscaling by the web browser).iPhone and similar phones benefit to a limited extent (depending on screen size and image size relatie to screen orientation).The browser squeezes or stretches the image based on its CSS height or width during the rendering process. Beside its raster resolution, an image on the Web has an abstract size, defined in CSS pixels. Retina images are approximately 3X larger than standard resolution. On a Retina display, four times as many device pixels are on the same physical surface. For for faster page-load times, force retina off.In other situations, force on or off, as per the situation: Users who zoom-up web pages on a non-retina display will find that retina images look sharper and clearer when enlarged in this way.Some HiDPI devices or 4K displays are not properly described by the browser or operating system, so forcing retina on can be useful.