SrcSet Responsive Images for Wordpress allows you to change the dimensions of images based on browser size by automatically adding the srcset attribut …
SrcSet responsive images for WordPress allows you to assign a SrcSet group to an image size within WordPress (e.g. medium or large). Any image within a post or page using that image size will have the SrcSet group’s attribute applied to it resulting in responsive images using the srcset attribute.
The srcset attribute is fully supported by most modern mobile devices. Where the attribute shines is allowing developers and content creators to eaily create responsive images for WordPress, swapping out large images for smaller ones more suitable to the size of the devices screen. This allows for less overhead when loading a website, improving load times, and reducing the amount of bandwidth visitors have to consume to view the site.
SrcSet responsive images for WordPress automates the generation of the srcset attribute for all images attached to or within a post/page’s content. SrcSet groups can be setup for any image size registered with WordPress and once setup all images using that image size (e.g. ‘medium’) will have that SrcSet group’s attribute added to the img tag. No short codes, in fact no coding required at all!
SrcSet responsive images for WordPress comes with a Regeneration tool which will search all your posts and pages (including custom post types) find any images using sizes which have SrcSet groups and automatically add the srcset attribute to each one!
Verified contrib2dev project #d0ba1bfb7d445e852945ceaf0492e4ff. Support this project on contrib2dev.com.
/wp-content/plugins/
directorySrcSet groups allow you to change the dimensions of images based on the current width of the user’s browser. When you assign a SrcSet group to an image size within WordPress (e.g. medium or large). Any image within a post or page using that image size will have the SrcSet group’s attribute applied to it.
For example, this ‘medium’ image…
img class=”alignnone size-medium wp-image-1264″ src=”http://www.domain.com/wp-content/uploads/2011/05/test_img-200×150.jpeg” alt=”test_img” width=”200″ height=”150″
Would change to something like this…
img class=”alignnone size-medium wp-image-1264″
src=”http://www.domain.com/wp-content/uploads/2011/05/test_img-200×150.jpeg”
srcset=”http://www.domain.com/wp-content/uploads/2011/05/test_img-125×125.jpeg 640w,
http://www.domain.com/wp-content/uploads/2011/05/test_img-200×150.jpeg 1024w,
http://www.domain.com/wp-content/uploads/2011/05/test_img.jpeg 1440w,
http://www.domain.com/wp-content/uploads/2011/05/test_img-1440×1200.jpeg 1506w”
alt=”test_img” width=”200″ height=”150″
Note that the ‘srcset’ attribute had been added to the img tag and will instruct the browser to replace the image with different sizes at these breakpoints, 640w, 1024w, 1440w, and 1506w.
If the images were already uploaded to the Media Library, you may have to regenerate thumbnails. We recommend using Regenerate Thumbnails for this.
SrcSet Groups give you a way to relate breakpoints to any specific image size (for example, medium). You can set specific breakpoints that align to your theme, and load in smaller versions of the same image. You can select existing image sizes (thunbmail, medium, large), custom image sizes created by themes or plugins, or add a custom image size with dimensions you create.
Note: If you use the Custom image size, remember to regenerate your thumbnails, otherwise these images will not exist, and therefore not be used within the srcset attribute.
Absolutely! In the srcset Settings area, there is a Regeneration page. This feature will go through all public posts (pages and posts by default), and regenerate the image tags of WordPress attachments in post content.
First, take some time and adjust your SrcSet groups and their breakpoints. Once everything is set up properly to your liking, use Regenerate Thumbnails to create any new image sizes you’ve created. Then use the Srcset Regeneration tool.
We intended on including the pixel density (x) support into the plugin. On further investigation, we realized it was not nearly as useful as the breakpoint (w) feature.
In future releases, we will be adding in the pixel density (x) feature support, and hope that it will become a more useful feature, to be combined with the breakpoint (w) feature.
The srcset attribute is a new HTML5 spec which allows us to specify multiple versions of the same image for various screen sizes. This means that you can serve smaller images for smaller screens and devices, which means your viewers will load your page much faster.
In the plugin options under Tools > SrcSet Settings, click the ‘Help’ tab on the left and following the instructions for more examples.
Initial plugin launch.
Added uninstall option to regeneration tool to remove all instances of srcset from all images in all posts,pages,custom post types.
Added Picturefill.js expanding srcset support all browsers both desktop and mobile.
Altered the the filter used to hook into the_post_thumbnail()
and get_the_post_thumbnail()
. We now support wp_get_attachment_image()
and wp_get_attachment_image_src()
as well.
Updated Picturefill.js to v2.3.1, which fixes a JS error in Internet Explorer 8.
Fixed some strict standards and notices when passing dimensions to an image call, rather than registered image sizes.