Skip to content

Commit

Permalink
Example of HD Support in Picture Element
Browse files Browse the repository at this point in the history 
Would appreciate some help with a better image, I did my best.  Don't
know if it was optimal resizing.
  • Loading branch information
Brian Muenzenmeyer authored and Brian Muenzenmeyer committed May 16, 2012
1 parent 0d793ea commit e004bf3
Show file tree
Hide file tree
Showing 12 changed files with 52 additions and 0 deletions.
27 changes: 27 additions & 0 deletions README.md
View file
Expand Up @@ -36,6 +36,33 @@ While the [proposed markup for the `picture` element](http://www.w3.org/communit
<noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>

The following is a more extensive example with HD(retina) images backing up each image step.

<picture alt="Responsive Octocat">
<!-- <source src="external/imgs/octocat_320.png"> -->
<source src="external/imgs/octocat_320.png">
<!-- <source src="external/imgs/hd/octocat_320x2.png" media="(min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_320x2.png" media="(-webkit-min-device-pixel-ratio: 2.0)">
<!-- <source src="external/imgs/octocat_480.png" media="(min-width: 400px)"> -->
<source src="external/imgs/octocat_480.png" media="(min-width: 400px)">
<!-- <source src="external/imgs/hd/octocat_480x2.png" media="(min-width: 400px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_480x2.png" media="(min-width: 400px) and (-webkit-min-device-pixel-ratio: 2.0)">

<!-- <source src="external/imgs/octocat_768.png" media="(min-width: 800px)"> -->
<source src="external/imgs/octocat_768.png" media="(min-width: 800px)">
<!-- <source src="external/imgs/hd/octocat_768x2.png" media="(min-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_768x2.png" media="(min-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0)">
<!-- <source src="external/imgs/octocat_1024.png" media="(min-width: 1000px)"> -->
<source src="external/imgs/octocat_1024.png" media="(min-width: 1000px)">
<!-- <source src="external/imgs/hd/octocat_1024x2.png" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_1024x2.png" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2.0)">
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/octocat_320.png" alt="octocat Logo Fallback"></noscript>
</picture>

### Explained...

Notes on the markup above...
Expand Down
Binary file added external/imgs/hd/.DS_Store
View file
Binary file not shown.
Binary file added external/imgs/hd/octocat_1024x2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/hd/octocat_320x2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/hd/octocat_480x2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/hd/octocat_768x2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/octocat_1024.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/octocat_320.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/octocat_480.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/octocat_768.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added external/imgs/psd/Octocat_SmartObject.psd
View file
Binary file not shown.
25 changes: 25 additions & 0 deletions index.html
View file
Expand Up @@ -30,5 +30,30 @@ <h1>Picturefill: A &lt;picture&gt; element polyfill</h1>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>

<picture alt="Responsive Octocat">
<!-- <source src="external/imgs/octocat_320.png"> -->
<source src="external/imgs/octocat_320.png">
<!-- <source src="external/imgs/hd/octocat_320x2.png" media="(min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_320x2.png" media="(-webkit-min-device-pixel-ratio: 2.0)">

<!-- <source src="external/imgs/octocat_480.png" media="(min-width: 400px)"> -->
<source src="external/imgs/octocat_480.png" media="(min-width: 400px)">
<!-- <source src="external/imgs/hd/octocat_480x2.png" media="(min-width: 400px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_480x2.png" media="(min-width: 400px) and (-webkit-min-device-pixel-ratio: 2.0)">

<!-- <source src="external/imgs/octocat_768.png" media="(min-width: 800px)"> -->
<source src="external/imgs/octocat_768.png" media="(min-width: 800px)">
<!-- <source src="external/imgs/hd/octocat_768x2.png" media="(min-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_768x2.png" media="(min-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0)">

<!-- <source src="external/imgs/octocat_1024.png" media="(min-width: 1000px)"> -->
<source src="external/imgs/octocat_1024.png" media="(min-width: 1000px)">
<!-- <source src="external/imgs/hd/octocat_1024x2.png" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2.0)"> -->
<source src="external/imgs/hd/octocat_1024x2.png" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2.0)">

<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/octocat_320.png" alt="octocat Logo Fallback"></noscript>
</picture>
</body>
</html>

3 comments on commit e004bf3

@Wolfr
Copy link

@Wolfr Wolfr commented on e004bf3 Jun 25, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will not work on Firefox, Opera on a Macbook with retina display.

Can picturefill handle multiple media queries?

(will end w/ a boatload of code otherwise)

@bmuenzenmeyer
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right about the -webkit-prefix; those browsers would only be served the standard definition images. It would be best to use the standards syntax too, though I am unsure of browser support at the moment. (btw, the Macbook with Retina was not announced when I wrote this :) ).

As to whether the picturefill can handle multiple media queries; yes it can. The compound syntax works fine in my testing.

@Wolfr
Copy link

@Wolfr Wolfr commented on e004bf3 Jun 25, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK

I am writing an article called "webdesign in a retina world" and researching these things. Thanks so much!

Please sign in to comment.