Plugin / Just Responsive Images

Description

The Just Responsive Images plugin gives you control of responsive image properties, which WordPress 4.4+ inserts to all post thumbnails by default.

The default solution is to insert all available image sizes as srcset attribute into img tag. This is not optimal, because the browser gets too much image resolutions, it can generate more requests to the server (to get the right image) and it takes longer to display the image itself. Not to mention, Google Page Speed inspector is not satisfied with such a method.

If you have hand-coded a mobile-friendly HTML/CSS for your theme it usually has media queries for background images and <picture> tags instead of <img> tags. A lot of images are used as block backgrounds very often, which should be editable from CMS. All these best practices are not supported in the WordPress core by default and you end up wasting your time re-writing standard functions.

That’s why we’re here! We want to provide easy-to-use control for customizing srcset for each image size dimension you use inside your theme. Also we’re happy to provide you with a few helpers which will generate tags and generate required media queries for backgrounds.

Full documentation and configuration options are available on our github page:
https://github.com/justcoded/just-responsive-images.

Feel free to post your suggestions or bugs under Issues section on github.

Generating image sizes on request

This plugin DOES NOT register image sizes with WordPress add_image_size function. So they are not resized on upload in admin panel. This is done because on big sites there are too much image sizes (especially with enabled retina option) and in this case WordPress wastes the disk space and database with useless files.

Our plugin resize images ONLY when you open the page with an image, printed with rwd functions. Resize is performed through WordPress built in functions, so once resized – WordPress will have information about new sizes available for your image. Unfortunately it’s impact the site speed, when you load the page with images by a first time. Any good copywriter/administrator checks his content before publishing, so this delay will be seen by admin users in most cases.

IMPORTANT

In version 1.2 default RWD set background options updated to mobile-first strategy (from desktop-first).
If you use nested rules from RWD set you should update your main size background option to have @media query with min-width rule.

DEV Mode

In DEV mode plugin does not resize any images and simply use placeholder images. This can be used to reduce disk space, while you develop and configure our plugin to match all required screen sizes.

To enable it you need to define new constant in your wp-config.php file:

define( 'JRI_DUMMY_IMAGE', true );