{"id":3274,"date":"2025-02-14T09:50:13","date_gmt":"2025-02-14T09:50:13","guid":{"rendered":"https:\/\/s-o-s.net\/enhanced-responsive-images\/"},"modified":"2025-02-14T09:50:13","modified_gmt":"2025-02-14T09:50:13","slug":"enhanced-responsive-images","status":"publish","type":"post","link":"https:\/\/s-o-s.net\/en_gb\/enhanced-responsive-images\/","title":{"rendered":"Enhanced Responsive Images"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<article id=\"post-186295\" class=\"alignwide post-186295 plugin type-plugin status-publish hentry plugin_tags-auto-sizes plugin_tags-images plugin_tags-performance plugin_category-media plugin_category-security-and-spam-protection plugin_contributors-wordpressdotorg plugin_business_model-community plugin_committers-joemcgill plugin_committers-performanceteam plugin_committers-westonruter plugin_support_reps-adamdunnage plugin_support_reps-jamesosborne\">\n<div class=\"plugin-banner\" id=\"plugin-banner-auto-sizes\"><\/div>\n<header class=\"plugin-header\">\n<div class=\"entry-heading-container\">\n<div>\n<div class=\"entry-thumbnail\">\n\t\t\t\t\t<img decoding=\"async\" class=\"plugin-icon\" src=\"https:\/\/ps.w.org\/auto-sizes\/assets\/icon.svg?rev=3098222\" alt=\"\">\t\t\t\t<\/div>\n<div>\n<h1 class=\"plugin-title\">Enhanced Responsive Images<\/h1>\n<p>\t\t\t\t\t<span class=\"byline\">By <span class=\"author vcard\"><a target=\"_blank\" class=\"url fn n\" href=\"https:\/\/profiles.wordpress.org\/joemcgill\/\" rel=\"noopener\">Joe McGill<\/a><\/span><\/span>\n\t\t\t\t<\/div>\n<\/p><\/div>\n<div class=\"plugin-actions\">\n<div class=\"wp-block-button is-small plugin-download download-button\"><a target=\"_blank\" class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/downloads.wordpress.org\/plugin\/auto-sizes.1.4.0.zip\" rel=\"noopener\">Download<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><!-- .entry-header --><\/p>\n<p>\t<span id=\"description\"><\/span><br \/>\n\t<span id=\"reviews\"><\/span><br \/>\n\t<span id=\"installation\"><\/span><br \/>\n\t<span id=\"developers\"><\/span><br \/>\n\t<span id=\"advanced\" class=\"\"><\/span><br \/>\n\t<span id=\"section-links\"><\/p>\n<ul class=\"tabs clear\">\n<li id=\"tablink-description\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/auto-sizes\/#description\" rel=\"noopener\">Details<\/a><\/li>\n<li id=\"tablink-reviews\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/auto-sizes\/#reviews\" rel=\"noopener\">Reviews<\/a><\/li>\n<li id=\"tablink-installation\">\n\t\t\t\t<a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/auto-sizes\/#installation\" rel=\"noopener\">Installation<\/a>\n\t\t\t<\/li>\n<li id=\"tablink-developers\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/auto-sizes\/#developers\" rel=\"noopener\">Development<\/a><\/li>\n<\/ul>\n<div id=\"link-support\">\n\t\t\t<a target=\"_blank\" href=\"https:\/\/wordpress.org\/support\/plugin\/auto-sizes\/\" rel=\"noopener\">Support<\/a>\n\t\t<\/div>\n<p>\t<\/span><br \/>\n\t<script type=\"text\/javascript\">if ( '#changelog' == window.location.hash ) { window.setTimeout( function() { window.location.hash=\"#developers\"; }, 10 ); }<\/script><\/p>\n<div class=\"entry-content\">\n<div id=\"tab-description\" class=\"plugin-description section\">\n<h2 id=\"description-header\">Description<\/h2>\n<p>This plugin implements experimental enhancements for the responsive images functionality in WordPress. Currently, this includes:<\/p>\n<ol>\n<li>Improvements to the accuracy of the <code>sizes<\/code> attribute by using available layout information in the theme.<\/li>\n<li>Implementation of the new HTML spec for adding <code>sizes=\"auto\"<\/code> to lazy-loaded images. See the HTML spec issue <a target=\"_blank\" href=\"https:\/\/github.com\/whatwg\/html\/issues\/4654\" rel=\"nofollow ugc noopener\">Add \u201cauto sizes\u201d for lazy-loaded images<\/a>.<\/li>\n<\/ol>\n<p>This plugin integrates with the <a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/image-prioritizer\/\" rel=\"ugc noopener\">Image Prioritizer<\/a> plugin. When that plugin is active, it starts learning about which images are not in the initial viewport based on actual visitors to your site. When it knows which images are below the fold, it then adds <code>loading=lazy<\/code> to these images. This plugin then extends Image Prioritizer to also add <code>sizes=auto<\/code> to these lazy-loaded images.<\/p>\n<p>There are currently <strong>no settings<\/strong> and no user interface for this plugin since it is designed to work without any configuration.<\/p>\n<\/div>\n<div id=\"tab-installation\" class=\"plugin-installation section\">\n<h2 id=\"installation-header\">Installation<\/h2>\n<h4>Installation from within WordPress<\/h4>\n<ol>\n<li>Visit <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>Enhanced Responsive Images<\/strong>.<\/li>\n<li>Install and activate the <strong>Enhanced Responsive Images<\/strong> plugin.<\/li>\n<\/ol>\n<h4>Manual installation<\/h4>\n<ol>\n<li>Upload the entire plugin folder to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Visit <strong>Plugins<\/strong>.<\/li>\n<li>Activate the <strong>Enhanced Responsive Images<\/strong> plugin.<\/li>\n<\/ol>\n<\/div>\n<div id=\"faq\" class=\"plugin-faq section\">\n<h2 id=\"faq-header\">FAQ<\/h2>\n<dl>\n<dt id=\"where%20can%20i%20submit%20my%20plugin%20feedback%3F\">\n<h3>Where can I submit my plugin feedback?<\/h3>\n<\/dt>\n<dd>\n<p>Feedback is encouraged and much appreciated, especially since this plugin may contain future WordPress core features. If you have suggestions or requests for new features, you can <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/issues\/new\/choose\" rel=\"nofollow ugc noopener\">submit them as an issue in the WordPress Performance Team\u2019s GitHub repository<\/a>. If you need help with troubleshooting or have a question about the plugin, please <a target=\"_blank\" href=\"https:\/\/wordpress.org\/support\/plugin\/auto-sizes\/#new-topic-0\" rel=\"ugc noopener\">create a new topic on our support forum<\/a>.<\/p>\n<\/dd>\n<dt id=\"where%20can%20i%20report%20security%20bugs%3F\">\n<h3>Where can I report security bugs?<\/h3>\n<\/dt>\n<dd>\n<p>The Performance team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.<\/p>\n<p>To report a security issue, please visit the <a target=\"_blank\" href=\"https:\/\/hackerone.com\/wordpress\" rel=\"nofollow ugc noopener\">WordPress HackerOne<\/a> program.<\/p>\n<\/dd>\n<dt id=\"how%20can%20i%20contribute%20to%20the%20plugin%3F\">\n<h3>How can I contribute to the plugin?<\/h3>\n<\/dt>\n<dd>\n<p>Contributions are always welcome! Learn more about how to get involved in the <a target=\"_blank\" href=\"https:\/\/make.wordpress.org\/performance\/handbook\/get-involved\/\" rel=\"nofollow ugc noopener\">Core Performance Team Handbook<\/a>.<\/p>\n<\/dd>\n<\/dl>\n<\/div>\n<div id=\"tab-reviews\" class=\"plugin-reviews section\">\n<h2 id=\"reviews-header\">Reviews<\/h2>\n<div class=\"notice notice-warning notice-alt\">\n<p>There are no reviews for this plugin.<\/p>\n<\/div>\n<\/div>\n<div id=\"tab-developers\" class=\"plugin-developers section\">\n<h2 id=\"developers-header\">Contributors &amp; Developers<\/h2>\n<div class=\"plugin-contributors\">\n<p>\u201cEnhanced Responsive Images\u201d is open source software. The following people have contributed to this plugin.<\/p>\n<p><span class=\"screen-reader-text\">Contributors<\/span><\/p>\n<ul id=\"contributors-list\" class=\"contributors-list\">\n<li>\n\t\t\t\t<img decoding=\"async\" alt=\"\" src=\"https:\/\/secure.gravatar.com\/avatar\/178f40079143ff7464125e4fbc88e62024a16442920a6a3d6dfa3d7e626be20d?s=32&amp;d=mm&amp;r=g\" srcset=\"https:\/\/secure.gravatar.com\/avatar\/178f40079143ff7464125e4fbc88e62024a16442920a6a3d6dfa3d7e626be20d?s=64&amp;d=mm&amp;r=g 2x\" class=\"avatar avatar-32 photo\" height=\"32\" width=\"32\">\t\t\t\t<a target=\"_blank\" href=\"https:\/\/profiles.wordpress.org\/wordpressdotorg\/\" rel=\"noopener\"><br \/>\n\t\t\t\t\tWordPress.org\t\t\t\t<\/a>\n\t\t\t<\/li>\n<\/ul><\/div>\n<div class=\"plugin-development\">\n<p>\u201cEnhanced Responsive Images\u201d has been translated into 6 locales. Thank you to <a target=\"_blank\" href=\"https:\/\/translate.wordpress.org\/projects\/wp-plugins\/auto-sizes\/contributors\" rel=\"noopener\">the translators<\/a> for their contributions.<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/translate.wordpress.org\/projects\/wp-plugins\/auto-sizes\" rel=\"noopener\">Translate \u201cEnhanced Responsive Images\u201d into your language.<\/a><\/p>\n<h3>Interested in development?<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/browser\/auto-sizes\/\" rel=\"noopener\" class=\"broken_link\">Browse the code<\/a>, check out the <a target=\"_blank\" href=\"https:\/\/plugins.svn.wordpress.org\/auto-sizes\/\" rel=\"noopener\">SVN repository<\/a>, or subscribe to the <a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/log\/auto-sizes\/\" rel=\"noopener\" class=\"broken_link\">development log<\/a> by <a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/log\/auto-sizes\/?limit=100&amp;mode=stop_on_copy&amp;format=rss\" rel=\"noopener\" class=\"broken_link\">RSS<\/a>.<\/p>\n<\/div>\n<\/div>\n<div id=\"tab-changelog\" class=\"plugin-changelog section\">\n<h2 id=\"changelog-header\">Changelog<\/h2>\n<h4>1.4.0<\/h4>\n<p><strong>Features<\/strong><\/p>\n<ul>\n<li>Accurate Sizes: Incorporate layout constraints in image sizes calculations. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1738\" rel=\"nofollow ugc noopener\">1738<\/a>)<\/li>\n<\/ul>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Accurate sizes: Pass parent alignment context to images. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1701\" rel=\"nofollow ugc noopener\">1701<\/a>)<\/li>\n<li>Accurate sizes: Reorganize file structure by feature. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1699\" rel=\"nofollow ugc noopener\">1699<\/a>)<\/li>\n<li>Accurate sizes: Support relative alignment widths. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1737\" rel=\"nofollow ugc noopener\">1737<\/a>)<\/li>\n<li>Remove <code>auto_sizes_get_layout_settings()<\/code>. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1743\" rel=\"nofollow ugc noopener\">1743<\/a>)<\/li>\n<\/ul>\n<p><strong>Bug Fixes<\/strong><\/p>\n<ul>\n<li>Accurate sizes: Disable layout calculations for classic themes. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1744\" rel=\"nofollow ugc noopener\">1744<\/a>)<\/li>\n<\/ul>\n<h4>1.3.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Move Auto Sizes logic from Enhanced Responsive Images to Image Prioritizer. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1476\" rel=\"nofollow ugc noopener\">1476<\/a>)<\/li>\n<li>Update auto sizes logic in Enhanced Responsive Images plugin to no longer load if already in Core. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1547\" rel=\"nofollow ugc noopener\">1547<\/a>)<\/li>\n<\/ul>\n<h4>1.2.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Harden logic to add <code>auto<\/code> keyword to <code>sizes<\/code> attribute to prevent duplicate keyword. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1445\" rel=\"nofollow ugc noopener\">1445<\/a>)<\/li>\n<li>Use more robust HTML Tag Processor for auto sizes injection. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1471\" rel=\"nofollow ugc noopener\">1471<\/a>)<\/li>\n<\/ul>\n<p><strong>Bug Fixes<\/strong><\/p>\n<ul>\n<li>Remove sizes attribute when responsive images are disabled. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1399\" rel=\"nofollow ugc noopener\">1399<\/a>)<\/li>\n<\/ul>\n<h4>1.1.0<\/h4>\n<p><strong>Features<\/strong><\/p>\n<ul>\n<li>Initial implementation of improved image <code>sizes<\/code> algorithm. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1250\" rel=\"nofollow ugc noopener\">1250<\/a>)<\/li>\n<\/ul>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Improved image <code>sizes<\/code> for left\/right\/center alignment. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1290\" rel=\"nofollow ugc noopener\">1290<\/a>)<\/li>\n<li>Integrate Auto Sizes with Image Prioritizer to ensure correct sizes=auto. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1322\" rel=\"nofollow ugc noopener\">1322<\/a>)<\/li>\n<li>Update <code>Auto-sizes for Lazy-loaded Images<\/code> plugin name to <code>Enhanced Responsive Images<\/code>. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1335\" rel=\"nofollow ugc noopener\">1335<\/a>)<\/li>\n<li>Use correct sizes for small images. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1252\" rel=\"nofollow ugc noopener\">1252<\/a>)<\/li>\n<\/ul>\n<p><strong>Documentation<\/strong><\/p>\n<ul>\n<li>Update the plugin description for Enhanced Responsive Images. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1339\" rel=\"nofollow ugc noopener\">1339<\/a>)<\/li>\n<li>Update the plugin header description. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1344\" rel=\"nofollow ugc noopener\">1344<\/a>)<\/li>\n<\/ul>\n<h4>1.0.2<\/h4>\n<ul>\n<li>Improve overall code quality with stricter static analysis checks. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/issues\/775\" rel=\"nofollow ugc noopener\">775<\/a>)<\/li>\n<li>Bump minimum PHP requirement to 7.2. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1130\" rel=\"nofollow ugc noopener\">1130<\/a>)<\/li>\n<\/ul>\n<h4>1.0.1<\/h4>\n<ul>\n<li>Add auto-sizes generator tag. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1105\" rel=\"nofollow ugc noopener\">1105<\/a>)<\/li>\n<li>Bump minimum required WP version to 6.4. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1062\" rel=\"nofollow ugc noopener\">1062<\/a>)<\/li>\n<li>Update tested WordPress version to 6.5. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1027\" rel=\"nofollow ugc noopener\">1027<\/a>)<\/li>\n<\/ul>\n<h4>1.0.0<\/h4>\n<ul>\n<li>Initial release of the Auto-sizes for Lazy-loaded Images plugin as a standalone plugin. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/904\" rel=\"nofollow ugc noopener\">904<\/a>)<\/li>\n<\/ul>\n<\/div><\/div>\n<p><!-- .entry-content --><\/p>\n<p>\t<!-- .entry-meta --><br \/>\n<\/article>\n<p><br \/>\n<br \/><a href=\"https:\/\/wordpress.org\/plugins\/auto-sizes\/\" target=\"_blank\" rel=\"noopener\">Source link <\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Enhanced Responsive Images By Joe McGill Download Details Reviews Installation Development Support Description This plugin implements experimental enhancements for the responsive images functionality in WordPress. Currently, this includes: Improvements to the accuracy of the sizes attribute by using available layout information in the theme. Implementation of the new HTML spec for adding sizes=&#8221;auto&#8221; to lazy-loaded [&hellip;]<\/p>","protected":false},"author":80,"featured_media":3275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"give_campaign_id":0,"footnotes":""},"categories":[1933,39,40],"tags":[2223,1978,2224],"class_list":["post-3274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-community-plugin","category-lite-version","category-wp-plugin-solution","tag-enhanced","tag-images","tag-responsive"],"acf":[],"fifu_image_url":"https:\/\/ps.w.org\/auto-sizes\/assets\/banner-772x250.png?rev=3098222","_links":{"self":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts\/3274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/users\/80"}],"replies":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/comments?post=3274"}],"version-history":[{"count":0,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts\/3274\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/media\/3275"}],"wp:attachment":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/media?parent=3274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/categories?post=3274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/tags?post=3274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}