Responsive Images
Responsive Images for Every Browser on the Planet
my contribution to the conversation
its basically the <picture> tag for older browsers
Resize your browser, rotate your phone to see the various images load as the environment changes.
The new HTML5 picture tag requires us to abandon older browsers to get responsive images. But all of the pieces are in place already for those browsers. Here is how to do it.
This approach uses the existing tag with the src attribute specially designed for the browser to ignore.
<img src="/0#/path/to/image.jpg">
This approach requires a 1 pixel gif on the server at the root level named 0.
Here is what we get with our responsive images
Similar syntax to the existing <img> tag Serves the correct image to Mobile, Desktop, and Retina for landscape or portrait. Uses a wrapper that allows for Mobile/Desktop styling similar to the way bootstrap does it. For the most part this does not rely on any type of browser sniffing*. * This demo sniffs for firefox broswers and uses the /0# syntax and also sniffs for IE9 and comments out the proprietary filters that are only for IE678.
All of the images on this page are generated (server side) from the same image. The correct image is served up based on the Screen size, Retina capabilities, and device orientation.
The markup for each images is as follows M100 would indicate 100% on mobile, D70 indicates 70% on Desktop.
Notice the strange src in the <img> tag. The strange syntax is designed so that the client never makes a request for the source. Then the src is chosen with a css selector to determine the actual src depending on the device.
...
<div class="image center M100 D70">
<img src="/0#/apps/test/test.jpg">
</div>
...
<div class="image right M50 D30">
<img src="/0#/apps/test/test.jpg">
</div>
...
<div class="image left M70 D30">
<img src="/0#/apps/test/test.jpg">
</div>
...
The path to the image can be a real path or a meta path to the image on the server. The src path is used in the CSS declaration to actually decide what images will be delivered based on screen size, orientation and retina capabilities.
The syntax allows for delivery of the correct content and hinted display for mobile or desktop. It could easily be extended for additional breakpoints
Art Direction means it will send the correct image server for portrait and landscape devices. Consequently all the problems the picture element was created for are solved with this approach. If you look at the syntax for the picture element its syntax relies heavily on CSS. The system I am proposing actually just uses CSS with inline <style> tags for defining the context of the images.
The images are actually loaded as background images and using an IE filter for IE678.
Supported Browsers. (haven't found one where it doesn't work)
- Internet Explorer - All versions from 6 on up (versions 6,7,8 require respond.js and also for 6 it requires Dean Edwards IE7.js)
- Chrome - All versions
- Safari - All Versions
- Opera - All versions
- Firefox - All versions from 4 and up
- Mobile Safari - All versions
- Android - All Versions
The <style> tag looks like this for each image.
<style>
/* IE 6,7,8 Image */
img[src*="/apps/test/test.jpg"] {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/apps/test/test.jpg?for=ie678',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/apps/test/test.jpg?for=ie678',sizingMethod='scale')";
padding-bottom:56.25%;
}
/* Mobile Image Portrait */ @media screen and (orientation:portrait) and (max-width: 980px) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=mobile-portrait');
padding-bottom:100%;
}}
/* Mobile Image Landscape */ @media screen and (orientation:landscape) and (max-width: 980px) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=mobile-landscape');
padding-bottom:56.25%;
}}
/* Retina Mobile Image Portrait */ @media screen and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (orientation:portrait) and (min-resolution: 192dpi) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/XPATH/apps/test/test.jpg?for=mobile-retina-portrait');
padding-bottom:100%;
}}
/* Retina Mobile Image Landscape */ @media screen and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2), only screen and (orientation:landscape) and (min-resolution: 192dpi) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=mobile-retina-landscape');
padding-bottom:56.25%;
}}
/* Desktop Image Portrait */ @media screen and (orientation:portrait) and (min-width: 981px) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=desktop-portrait');
padding-bottom:100%;
}}
/* Desktop Image Landscape */ @media screen and (orientation:landscape) and (min-width: 981px) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=desktop-landscape');
padding-bottom:56.25%;
}}
/* Retina Desktop Image Portrait */
@media screen and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-width: 981px),screen and (orientation:portrait) and (min-resolution: 192dpi) and (min-width: 981px) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=desktop-retina-portrait');
padding-bottom:100%;
}}
/* Retina Desktop Image Landscape */ @media screen and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-width: 981px),screen and (orientation:landscape) and (min-resolution: 192dpi) and (min-width: 981px) {
img[src*="/apps/test/test.jpg"] {
background-image:url('/apps/test/test.jpg?for=desktop-retina-landscape');
padding-bottom:56.25%;
}}
</style>
Reference this Stackoverflow Question regarding the img src syntax.
