About this plugin
x. x, see the master branch of the GitHub repository.
WP is a simple and option-less plugin to serve HDPI and responsive images on a WordPress website.
js to load the appropriate image to the browser.
Considerations before installing
Slow Loading on Activation
WP, new @2x 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.
WP on a large and image heavy site, you may want to consider using another plugin like Regenerate Thumbnails to create the new image sizes for existing posts and pages.
500 or 504 server errors
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.
Image Sizes
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.
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.
To use this plugin most effectively, set the default image sizes (“large”, “medium”, and “thumbnail”) to reflect useful breakpoints in your theme design.
Errors and Warnings
WP suppresses errors and warnings in parsing the DOM. Errors and warnings can now be collected via the picturefill_wp_syntax_present_libxml_errors and picturefill_wp_get_images_libxml_errors filters.
add_filter('picturefill_wp_get_images_libxml_errors', 'handle_errors');
function handle_errors($errors){ foreach($errors as $error){ // Handle errors here. } }
Theme CSS
js syntax uses nested span elements. 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.
span[data-picture]{display:inline;margin:0;padding:0;border:0;} span[data-picture] span{display:inline;margin:0;padding:0;border:0;}
Caching
WP uses transient caching. WP is updated. WP from the plugins menu.
WP. php file:
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);
If you still encounter problems with other plugins or theme features, you may want to disable caching all together. WP” section of the GitHub repository.
Details
WP looks through the_content to find <img> elements like this:
jpg" width="770" height="577" />
then replaces them with something like this (visit the GitHub repository for a breakdown of the syntax):
jpg" width="770" height="577" /> </noscript> </span>
js then looks for the last data-src listed where the associated data-media matches the device and browser, and loads the appropriate image inside the matched <span> element.
Extending Picturefill.WP
WP subsection of the GitHub repository for a list of plugin hooks and examples.
Advanced Use
Markup Tricks
Limit Responsiveness
The responsiveness of an image can be limited by adding the class min-size-{image size}. For example, an image with the class min-size-medium will not load an image smaller than size medium.
Skip Images
To skip images and load them normally add the attribute data-picturefill-wp-ignore to the <img> tag.
Helper Functions
See the helper functions section of the documentation on GitHub.