Retina images – custom syntax for inserting images into post content

by

I am currently in the process of building a responsive real estate WordPress theme and I’m figuring out how to properly add support for HiDPI screens. I decided to use a JavaScript solution Picturefill, which mimics the functionality of proposed picture HTML element. WordPress lets us create custom image sizes, and I have decided that for each image size (like listing gallery images on single listing page) I will need four images sizes declared:

  1. Regular low-res image for desktop devices
  2. @2x hi-res image for HiDPI desktop devices (currently only Retina MacBook)
  3. Smaller low-res image for smartphones (why would smartphones need to load full size image?)
  4. 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="https://wordpress.stackexchange.com/questions/80044/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.

2 s
2

I hadn’t done this myself but I have How to insert image in Markdown syntax in WordPress stashed for later that shows how to customize markup of inserted image.

It makes use of image_send_to_editor filter in get_image_send_to_editor() function.

Leave a Comment