He describes a new approach to handle images on websites that are viewed with retina and non-retina displays. His approach is to double the image resolution for retina displays – like the classic way – but also to increase the compression settings for very low file sizes.

See the examples in his article how good this works out.

For example the iphone automatically adjusts text elements to a “more readable” size. This results in different font sizes on your website in mobile view. To avoid this problem you can simply add a single line in your css.

html {
-webkit-text-size-adjust: none;
}

This disables the automatic size adjustment on the iphone. Another common problem are flexible images on your responsive website. Often the images are displayed with a wrong width-to-height ratio when the browser only refers to a percentage width. An easy workaround, without complex javascript image managing, can solve the problem with css.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Note that this solution is not saving any data transfer because the full resolution of the image is always downloaded.

More tips for coding with media queries can be found in that article on webdesignerwall.