kylereicks

<p><strong>Note: This is an implementation of <a href="https://github.com/scottjehl/picturefill/tree/1.2" rel="nofollow ugc">Picturefill.js version 1.2.x</a>. For an implementation of <a href="http://scottjehl.github.io/picturefill/" rel="nofollow ugc">Picturefill.js 2.x</a>, see the <a href="https://github.com/kylereicks/picturefill.js.wp/tree/master" rel="nofollow ugc">master branch of the GitHub repository</a>.</strong></p>
<p>Picturefill.WP is a simple and option-less plugin to serve HDPI and responsive images on a WordPress website.</p>
<p>This plugin parses post and page content replacing images with a special syntax similar to the proposed syntax for the HTML5 <code>picture</code> element, then uses an adapted version of <a href="https://github.com/scottjehl/picturefill" rel="nofollow ugc">picturefill.js</a> to load the appropriate image to the browser.</p>
<h3>Considerations before installing</h3>
<h4>Slow Loading on Activation</h4>
<p>The first time a page or post is loaded after activating Picturefill.WP, new <code>@2x</code> size images will need to be created for the images in the post or page content. This can take several seconds and will take longer on image heavy posts. Once these images are created, posts should load at least as fast or faster than they do without the plugin.</p>
<p>If you are installing Picturefill.WP on a large and image heavy site, you may want to consider using another plugin like <a href="https://wordpress.org/plugins/regenerate-thumbnails/" rel="ugc">Regenerate Thumbnails</a> to create the new image sizes for existing posts and pages.</p>
<h4>500 or 504 server errors</h4>
<p>These errors are related to the slow loading listed above. If the server reaches its timeout limit before it is finished processing new images, it will return a 500 or 504 error. Refreshing the page usually gives the server the time it needs to finish processing the images. On some image-heavy posts, it may take more than one refresh.</p>
<h4>Image Sizes</h4>
<p>By default, WordPress creates as many as 3 images of different sizes for each uploaded image (“large”, “medium”, and “thumbnail”), in addition to the “full” image size.</p>
<p>This plugin adds responsive breakpoints based on the width of the image. The largest available image will display unless the browser width is less than the image width + 20px, in which case the next size down is displayed.</p>
<p>To use this plugin most effectively, set the default image sizes (“large”, “medium”, and “thumbnail”) to reflect useful breakpoints in your theme design.</p>
<h4>Errors and Warnings</h4>
<p>As of version 1.3.3 Picturefill.WP suppresses errors and warnings in parsing the DOM. Errors and warnings can now be collected via the <code>picturefill_wp_syntax_present_libxml_errors</code> and <code>picturefill_wp_get_images_libxml_errors</code> filters.</p>
<pre><code>add_filter('picturefill_wp_get_images_libxml_errors', 'handle_errors');

function handle_errors($errors){
  foreach($errors as $error){
    // Handle errors here.
  }
}
</code></pre>
<h4>Theme CSS</h4>
<p>As described in the <a href="https://wordpress.org/plugins/picturefillwp/other_notes/" rel="ugc">Details section</a>, the picturefill.js syntax uses nested <code>span</code> elements. If a theme’s CSS applies styles to un-classed <code>span</code> elements, you may notice some of these <code>span</code>s showing up unexpectedly on the page after activating Picturefill.WP. If possible, it is best to remove the offending code from your theme files, but adding the flowing to the bottom of your theme’s CSS file should also work to reset these styles.</p>
<pre><code>span[data-picture]{display:inline;margin:0;padding:0;border:0;}
span[data-picture] span{display:inline;margin:0;padding:0;border:0;}
</code></pre>
<h4>Caching</h4>
<p>To improve performance, especially in image heavy posts, Picturefill.WP uses transient caching. The cache will be refreshed automatically every time a post is updated or Picturefill.WP is updated. The cache can be manually refreshed by deactivating and reactivating Picturefill.WP from the plugins menu.</p>
<p>If you suspect that Picturefill.WP’s caching is causing trouble with another plugin or theme feature, first try deactivating and reactivating Picturefill.WP. If problems persist, try lowering the priority for Picturefill.WP to be executed by adding the following to your functions.php file:</p>
<pre><code>remove_filter('the_content', array(Picturefill_WP::get_instance(), 'apply_picturefill_wp_to_the_content'), 11);
add_filter('the_content', array(Picturefill_WP::get_instance(), 'cache_picturefill_output'), 9999);
</code></pre>
<p>If you still encounter problems with other plugins or theme features, you may want to disable caching all together. See the subsection on how to disable caching under the “Extending Picturefill.WP” section of the <a href="https://github.com/kylereicks/picturefill.js.wp" rel="nofollow ugc">GitHub repository</a>.</p>
<h3>Details</h3>
<p>Picturefill.WP looks through <code>the_content</code> to find <code><img></code> elements like this:</p>
<pre><code><img class="alignnone size-large wp-image-123" alt="Accessible alternate text for the image" title="A title that displays on hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577" />
</code></pre>
<p>then replaces them with something like this (visit the <a href="https://github.com/kylereicks/picturefill.js.wp#details" rel="nofollow ugc">GitHub repository</a> for a breakdown of the syntax):</p>
<pre><code><span data-picture data-class="alignnone size-large wp-image-123" dat-alt="Accessible alternate text for the image" data-title="A title that displays on hover" data-width="770" data-height="577">
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-150x150.jpg" data-width="150" data-height="150" data-media="(min-width: 1px)" class="picturefill-wp-source thumbnail"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-300x300.jpg" data-width="150" data-height="150" data-media="(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina thumbnail"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-400x300.jpg" data-width="400" data-height="300" data-media="(min-width: 420px)" class="picturefill-wp-source medium"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-800x600.jpg" data-width="400" data-height="300" data-media="(min-width: 420px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina medium"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" data-width="770" data-height="577" data-media="(min-width: 790px)" class="picturefill-wp-source large"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-1540x1155.jpg" data-width="770" data-height="577" data-media="(min-width: 790px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina large"></span>
  <noscript>
    <img class="alignnone size-large wp-image-123" alt="Accessible alternate text for the image" title="A title that displays on hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577" />
  </noscript>
</span>
</code></pre>
<p>The adapted version of picturefill.js then looks for the last <code>data-src</code> listed where the associated <code>data-media</code> matches the device and browser, and loads the appropriate image inside the matched <code><span></code> element.</p>
<h3>Extending Picturefill.WP</h3>
<p>See the <a href="https://github.com/kylereicks/picturefill.js.wp#extending-picturefillwp" rel="nofollow ugc">Extending Picturefill.WP</a> subsection of the GitHub repository for a list of plugin hooks and examples.</p>
<h3>Advanced Use</h3>
<h3>Markup Tricks</h3>
<h4>Limit Responsiveness</h4>
<p>The responsiveness of an image can be limited by adding the class <code>min-size-{image size}</code>. For example, an image with the class <code>min-size-medium</code> will not load an image smaller than size <code>medium</code>.</p>
<h4>Skip Images</h4>
<p>To skip images and load them normally add the attribute <code>data-picturefill-wp-ignore</code> to the <code><img></code> tag.</p>
<h3>Helper Functions</h3>
<p>See the <a href="https://github.com/kylereicks/picturefill.js.wp#helper-functions" rel="nofollow ugc">helper functions</a> section of the documentation on GitHub.</p>


Picturefill.WP

A Wordpress plugin to use picturefill.js to load responsive/retina images, mimicking the proposed HTML5 picture spec.

christhewanderer

<p>WordPress has introduced the srcset feature into core which is great but this plugin goes a step further to help theme developers use the picture element with a fallback to a standard image tag and srcset.</p>
<p>This plugin also offers support for on the fly image generation plugins. In fact it’s hugely encouraged to use one as this plugin can cause image uploads to slow down otherwise.</p>
<p>It also offers support for 2x and 3x images for retina screens so you can serve the best image possible for your visitors.</p>
<h4>Define image sizes</h4>
<p>First you need to define your image sizes, similar to add_image_size. This particular function is optional but recommended because it also creates 2x and 3x images for retina.<br />
E.G. <code>add_image_size_for_picture('mobile_images', 320, 0, true);</code></p>
<h4>Using images in your template</h4>
<p>Once your sizes are defined you can call them in your template like so:</p>
<pre><code>generate_picture($some_attachment_id, [
    'mobile_images' => '(max-width: 320px)'
], [
    'class' => 'some-class-name',
    'data-item' => 1
]);
</code></pre>
<p>The second argument array is in the format of <code>image size name : media query</code> that way you can specify as many different responsive sizes as you need to.<br />
The third argument allows you to add attributes to the source/img tag.</p>
<h4>Integrating with on the fly image generation plugins</h4>
<p>Adding upload sizes to wordpress and slow down the image upload significantly as we generate three times as many images that you add a size for. This can cause the upload to time out if you are using a server with a low amount of cpu cores.</p>
<p>To solve this we recommend using a plugin that will create these images independent of the upload and not affect users. For this purpose we have three filters available for you to change the functions we call underneath the hood.</p>
<pre><code>responsive_retina_images_add_size_function is the function to call when adding a new size, by default this calls `add_image_size`
'responsive_retina_images_source_function is the function to call when pulling the image from the database, by default this calls `wp_get_attachment_image_src`
responsive_retina_images_source_function_index is the index at which to access the url returned from `responsive_retina_images_source_function`, by default this is `0`
</code></pre>
<p>For example if you were to integrate with Fly Dynamic Image Resizer you could add the following to your functions.php.</p>
<pre><code>add_filter('responsive_retina_images_add_size_function', function() { return 'fly_add_image_size'; });
add_filter('responsive_retina_images_source_function', function() { return 'fly_get_attachment_image_src'; });
add_filter('responsive_retina_images_source_function_index', function() { return 'src'; });
</code></pre>


Picture Element Responsive and Retina Images

A plugin that helps you generate a picture element for creating responsive images. Retina support is included out of the box.

Picturefill.WP vs Picture Element Responsive and Retina Images