Responsive Images With CSS
Quick Summary There’s a lot of discussion in the web design community about responsive images. Every blog, including this one, as well as every conference from here to the Mississippi are talking about the problem and possible solutions. (I spelled Mississippi right the first time…No I didn’t) Personally, I would love to see a new image type […]
There’s a lot of discussion in the web design community about responsive images. Every blog, including this one, as well as every conference from here to the Mississippi are talking about the problem and possible solutions. (I spelled Mississippi right the first time…No I didn’t)
Personally, I would love to see a new image type that scales in file size depending on the user’s internet connection. Using the device type or screen size to ASSUME the user should receive a certain file size or resolution, is not an ideal solution. Just because the user is on a desktop, does not mean they have a high speed connection. And vice versa for a mobile device or tablet.
There are some easy ways to solve this problem of responsive mages with CSS. If your images are included via your style sheet, then responsive images with CSS is not a huge problem. I found this bit of CSS on CSS-tricks.com, which is super helpful and will help to display different image sizes using media queries.
Responsive Images with CSS
body { background: url(image-small.jpg); } @media (min-width: 500px) { body { background: url(image-medium.jpg); } } @media (min-width: 800px) { body { background: url(image-large.jpg); } }
If you’re looking to use responsive images with CSS to display retina images, you can use a similar technique. This will load those higher resolution images for retina devices only.
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {/* styles for Retina-type displays */}
Of course, it’s much easier to just use the same images for every device and screen size, but that is a little irresponsible. I’m guilty of doing this sometimes too. Just throwing a max-width or width 100% on images can work for some projects, but loading different sizes and resolutions for your responsive images with CSS should be standard practice. This is, until there is another, more ideal solution out there. Such as a new image file type, or some new markup solution.
The problem with responsive images is that very often we need to include images in our markup, a problem that responsive images with CSS cannot solve. There are some solutions that use JavaScript and some that let the server do the work. Either solution is not 100% ideal. If you want to read more information on the reponsive images topic, check out these links:
Bruse Lawson’s end of year report
CSS Tricks On Responsive Images
A solve that would make everybody happy, would be a way to load responsive images without the use of JavaScript, depending on the users device and/or internet connection. In other words, “magic.” (Not saying this won’t happen soon, but I’d love to meet the magician who pulls the responsive rabbit out of his hat)
Here are some interesting responsive image solutions using various different approaches.
http://blog.keithclark.co.uk/responsive-images-using-cookies/
