- Regular low-res image for desktop devices
- @2x hi-res image for HiDPI desktop devices (currently only Retina MacBook)
- Smaller low-res image for smartphones (why would smartphones need to load full size image?)
- Smaller hi-res image for smartphones
For tablets I've decided to serve the same sized images as for desktop devices, simply because the size of tablet-specific image size is not so much different from the desktop one, so the bandwidth gains are not huge enough to justify adding two image sizes (per image location) to WordPress (low- and hi-res) and cluttering the uploads and DOM.
Now, everything is fine and dandy when we are dealing with images that the theme is pulling automatically (like post thumbnails, automatic post gallery etc.), but since for Picturefill script to work I need to output four different image paths (with appropriate media queries) - how would I go about images that the user manually places into the post content?
For those who don't want to read how the Picturefill works, here is the syntax that the script expects:
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- 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> </div>
If you have any suggestions for my proposed method please share, but I would be interested in your ideas on how to create the above syntax for the images that users manually put into the post content.
As a side not, please refrain from suggesting to put such functionality into the plugin, as in my opinion HiDPI images are clearly presentational feature and should be handled by the theme.
Also, I am aware of already existing Wp Retina 2x plugin, but this is not exactly what I need since my images has to not only be hi-res, but also responsive - I don't want to force smartphone users to download ~800KB desktop hi-res images.