Improve question about "retina graphics" (#112)

* Improve question about "retina graphics"

* Update css-questions.md

Author: jdvivar

questions/css-questions.md

@@ -450,15 +450,37 @@ Adaptive design is more like the modern definition of progressive enhancement. I
 
 ### Have you ever worked with retina graphics? If so, when and what techniques did you use?
 
-I tend to use higher resolution graphics (twice the display size) to handle retina display. The better way would be to use a media query like `@media only screen and (min-device-pixel-ratio: 2) { ... }` and change the `background-image`.
+_Retina_ is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices _retina_ defacto displays.
+
+Browsers by default render DOM elements according to the device resolution, except for images.
+
+In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.
+
+To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance:
+
+```html
+<div responsive-background-image>  
+  <img src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg 400w,
+      /images/test-800.jpg 800w,
+      /images/test-1200.jpg 1200w">
+</div>
+```
 
-For icons, I would also opt to use SVGs and icon fonts where possible, as they render very crisply regardless of resolution.
+It is important to note that browsers which don't support HTML5's `srcset` (i.e. IE11) will ignore it and use `src` instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. Picturefill (link in the references).
 
-Another method would be to use JavaScript to replace the `<img>` `src` attribute with higher resolution versions after checking the `window.devicePixelRatio` value.
+For icons, I would also opt to use SVGs and icon fonts where possible, as they render very crisply regardless of resolution.
 
 ###### References
 
-* https://www.sitepoint.com/css-techniques-for-retina-displays/
+* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+* http://scottjehl.github.io/picturefill/
+* https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
 
 [[↑] Back to top](#css-questions)