Then we’ll see how CSS media queries can help identify important characteristics of our users’ devices. The full size image takes 3.0 seconds to load over a 3G network, compared to 1.3 seconds for a responsive image. With those two additions, screen readers can announce to their users that the element is an image, and they will read the alternate text description that you’ve provided for that image. Also, the contfont.net website that this article uses as an example is available for reference on github. We suggest that you review different approaches before choosing a particular responsive image solution, including these two: How To Avoid Duplicate Downloads In Responsive Images and Choosing A Responsive Image Solution. Unfortunately, identifying a Retina display isn’t quite as straightforward. As long as you’re working in your graphics program, be sure to optimize even the high-resolution images as much as possible, for example, by using the lowest quality setting feasible for the image. The smartphone user may be accessing the website over a typical 3G connection at 2 Mb/s. One approach that might seem logical would be to set display: none for those images we don’t wish to download. Eventually browsers will all support the standard dots per pixel notation (dppx) and we can drop the vendor prefixes from our style sheets. Next create a simple test page for that image. — but those devices aren’t likely to visit the website.) This also works for height: This restricts the height of the image to a maximum of 20% of the viewport. As the width grows, the browser will automatically interpolate and resize the image. It also preserves the image’s aspect ratio, scaling the image height from 300 to 200 pixels at the same time. With an understanding of how to use responsive images, the next step is actually creating the image variations. This option lets the browser display a low-fidelity version of the image quickly while it continues to download the full image. The media query has two parts. And in the case of screen devices, the features can include many characteristics of the display, including its width, orientation, resolution and pixel ratio. Style sheets should not define the content itself. Have your graphics program resize the source image to that size. In fact, there’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: A CSS background image. Easily accessible CSS code examples: CSS styles, borders, tables, buttons & more.
By specifying primary content with CSS rather than HTML, we make our websites harder to troubleshoot, we make them more difficult to maintain and we create barriers for systems that might try to parse our websites automatically. The CSS specification defines a large number of them including, for example braille (for braille tactile feedback devices), speech (for speech synthesizers), tty (for devices with only monospaced fonts, such as teletypes) and tv (for television-type devices with low resolution and no scrolling). Thanks to an approach first described by Grady Kuhnline, we can achieve the same effect with a CSS background image for modern browsers.