article:
Elements Design: Catch-All Patterns Pack (PSD)
article:
Elements Design: Winter and summer thermometers icon (PSD)

JS Plugin & Code: Responsive Images - Picturefill

Advertisement

``A Responsive Images approach that you can use today that mimics the proposed picture element using spans, for safety sake.
Currently, picturefill.js compresses to around 498bytes (~0.5kb), after minify and gzip.
Picturefill supports a broad range of browsers and devices (there are currently no known unsupported browsers), provided that you stick with the markup conventions provided.``

Plugin: Picturefill


Implements

HTML in header:
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
<script src="js/matchmedia.js"></script>
<script src="js/picturefill.js"></script>

HTML in body:
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="images/peles-castle-145x82.png"></span>
<span data-src="images/peles-castle-193x109.png" data-media="(min-width: 200px)"></span>
<span data-src="images/peles-castle-257x145.png" data-media="(min-width: 300px)"></span>
<span data-src="images/peles-castle-342x193.png" data-media="(min-width: 400px)"></span>
<span data-src="images/peles-castle-456x257.png" data-media="(min-width: 500px)"></span>
<span data-src="images/peles-castle-608x342.png" data-media="(min-width: 700px)"></span>
<span data-src="images/peles-castle-810x456.png" data-media="(min-width: 900px)"></span>
<span data-src="images/peles-castle-1080x608.png" data-media="(min-width: 1100px)"></span>
<span data-src="images/peles-castle-1440x810.png" data-media="(min-width: 1500px)"></span>
<span data-src="images/peles-castle-1920x1080.png" data-media="(min-width: 2000px)"></span>

<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="info"></noscript>
</span>

CSS
...
img {  max-width: 100% }
...
@media (max-width: 2000px) {
   #container {
      padding: 20px 0;
   }
}
...


Notes on the markup above...
  • The span[data-picture] element's alt attribute is used as alternate text for the img element that picturefill generates upon a successful source match.
  • The span[data-picture] element can contain any number of span[data-source] elements. The above example may contain more than the average situation may call for.
  • Each span[data-src] element must have a data-src attribute specifying the image path.
  • It's generally a good idea to include one source element with no media qualifier, so it'll apply everywhere - typically a mobile-optimized image is ideal here.
  • Each [data-src] element can have an optional [data-media] attribute to make it apply in specific media settings. Both media types and queries can be used, like a native media attribute, but support for media queries depends on the browser (unsupporting browsers fail silently).
  • The matchMedia polyfill (included in the /external folder) is necessary to support the data-media attribute across browsers (such as IE9), even in browsers that support media queries, although it is becoming more widely supported in new browsers.
  • The noscript element wraps the fallback image for non-JavaScript environments, and including this wrapper prevents browsers from fetching the fallback image during page load (causing unnecessary overhead). Generally, it's a good idea to reference a small mobile optimized image here, as it's likely to be loaded in older/underpowered mobile devices.

Supporting IE Desktop

Internet Explorer 8 and older have no support for CSS3 Media Queries, so in the examples above, IE will receive the first data-src image reference (or the last one it finds that has no data-media attribute. If you'd like to serve a larger image to IE desktop browsers, you might consider using conditional comments, like this:

    <span data-picture data-alt="info">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
        <!--[if (lt IE 9) & (!IEMobile)]>
            <span data-src="medium.jpg"></span>
        <![endif]-->
        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="small.jpg" alt="info">
        </noscript>
    </span>


Create demo by Creative3X.


Advertisement
Tags: responsive, image, picture, span, html, css3, jquery, js, plugin

Leave a Comment

No Comment

© Creative3x Ltd.