{"id":3376,"date":"2025-02-14T12:10:18","date_gmt":"2025-02-14T12:10:18","guid":{"rendered":"https:\/\/s-o-s.net\/image-prioritizer\/"},"modified":"2025-02-14T12:10:18","modified_gmt":"2025-02-14T12:10:18","slug":"image-prioritizer","status":"publish","type":"post","link":"https:\/\/s-o-s.net\/en_gb\/image-prioritizer\/","title":{"rendered":"Image Prioritizer"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<article id=\"post-196547\" class=\"alignwide post-196547 plugin type-plugin status-publish hentry plugin_tags-image plugin_tags-lazy-load plugin_tags-lcp plugin_tags-optimization plugin_tags-performance plugin_category-media plugin_category-performance plugin_category-security-and-spam-protection plugin_contributors-wordpressdotorg plugin_business_model-community plugin_committers-performanceteam plugin_committers-westonruter\">\n<div class=\"plugin-banner\" id=\"plugin-banner-image-prioritizer\"><\/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\/image-prioritizer\/assets\/icon.svg?rev=3099535\" alt=\"\">\t\t\t\t<\/div>\n<div>\n<h1 class=\"plugin-title\">Image Prioritizer<\/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\/performanceteam\/\" rel=\"noopener\">performanceteam<\/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\/image-prioritizer.1.0.0-beta1.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\/image-prioritizer\/#description\" rel=\"noopener\">Details<\/a><\/li>\n<li id=\"tablink-reviews\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/image-prioritizer\/#reviews\" rel=\"noopener\">Reviews<\/a><\/li>\n<li id=\"tablink-installation\">\n\t\t\t\t<a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/image-prioritizer\/#installation\" rel=\"noopener\">Installation<\/a>\n\t\t\t<\/li>\n<li id=\"tablink-developers\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/image-prioritizer\/#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\/image-prioritizer\/\" 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 optimizes the loading of images (and videos) with prioritization to improve <a target=\"_blank\" href=\"https:\/\/web.dev\/articles\/lcp\" rel=\"nofollow ugc noopener\">Largest Contentful Paint<\/a> (LCP), lazy loading, and more accurate image size selection.<\/p>\n<p>The current optimizations include:<\/p>\n<ol>\n<li>Add breakpoint-specific <code>fetchpriority=high<\/code> preload links (both as <code>LINK[rel=preload]<\/code> elements and <code>Link<\/code> response headers) for image URLs of LCP elements:\n<ol>\n<li>An <code>IMG<\/code> element, including the <code>srcset<\/code>\/<code>sizes<\/code> attributes supplied as <code>imagesrcset<\/code>\/<code>imagesizes<\/code> on the <code>LINK<\/code>.<\/li>\n<li>The first <code>SOURCE<\/code> element with a <code>type<\/code> attribute in a <code>PICTURE<\/code> element. (Art-directed <code>PICTURE<\/code> elements using media queries are not supported.)<\/li>\n<li>An element with a CSS <code>background-image<\/code> inline <code>style<\/code> attribute.<\/li>\n<li>An element with a CSS <code>background-image<\/code> applied with a stylesheet (when the image is from an allowed origin).<\/li>\n<li>A <code>VIDEO<\/code> element\u2019s <code>poster<\/code> image.<\/li>\n<\/ol>\n<\/li>\n<li>Ensure <code>fetchpriority=high<\/code> is only added to an <code>IMG<\/code> when it is the LCP element across all responsive breakpoints.<\/li>\n<li>Add <code>fetchpriority=low<\/code> to <code>IMG<\/code> tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.<\/li>\n<li>Lazy loading:\n<ol>\n<li>Apply lazy loading to <code>IMG<\/code> tags based on whether they appear in any breakpoint\u2019s initial viewport.<\/li>\n<li>Implement lazy loading of CSS background images added via inline <code>style<\/code> attributes.<\/li>\n<li>Lazy-load <code>VIDEO<\/code> tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a <code>VIDEO<\/code> is the LCP element, it gets <code>preload=auto<\/code>; if it is in an initial viewport, the <code>preload=metadata<\/code> default is left; if it is not in an initial viewport, it gets <code>preload=none<\/code>. Lazy-loaded videos also get initial <code>preload<\/code>, <code>autoplay<\/code>, and <code>poster<\/code> attributes restored when the <code>VIDEO<\/code> is going to enter the viewport.<\/li>\n<\/ol>\n<\/li>\n<li>Responsive image sizes:\n<ol>\n<li>Compute the <code>sizes<\/code> attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by <code>sizes=auto<\/code>).<\/li>\n<li>Ensure <a target=\"_blank\" href=\"https:\/\/make.wordpress.org\/core\/2024\/10\/18\/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7\/\" rel=\"nofollow ugc noopener\"><code>sizes=auto<\/code><\/a> is set on <code>IMG<\/code> tags after setting correct lazy-loading (above).<\/li>\n<\/ol>\n<\/li>\n<li>Reduce the size of the <code>poster<\/code> image of a <code>VIDEO<\/code> from full size to the size appropriate for the maximum width of the video (on desktop).<\/li>\n<\/ol>\n<p><strong>This plugin requires the <a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/optimization-detective\/\" rel=\"ugc noopener\">Optimization Detective<\/a> plugin as a dependency.<\/strong> Please refer to that plugin for additional background on how this plugin works as well as additional developer options.<\/p>\n<p>\ud83d\udc49 <strong>Note:<\/strong> This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won\u2019t see optimizations applied immediately after activating the plugin. Please wait for URL Metrics to be gathered for both mobile and desktop visits. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.<\/p>\n<p>Your site must have the <strong>REST API accessible<\/strong> to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. 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>Image Prioritizer<\/strong>.<\/li>\n<li>Install and activate the <strong>Image Prioritizer<\/strong> plugin.<\/li>\n<\/ol>\n<h4>Manual installation<\/h4>\n<ol>\n<li>Upload the entire <code>image-prioritizer<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Visit <strong>Plugins<\/strong>.<\/li>\n<li>Activate the <strong>Image Prioritizer<\/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\/image-prioritizer\/#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<p>The <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/tree\/trunk\/plugins\/image-prioritizer\" rel=\"nofollow ugc noopener\">plugin source code<\/a> is located in the <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\" rel=\"nofollow ugc noopener\">WordPress\/performance<\/a> repo on GitHub.<\/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>\u201cImage Prioritizer\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>\u201cImage Prioritizer\u201d has been translated into 5 locales. Thank you to <a target=\"_blank\" href=\"https:\/\/translate.wordpress.org\/projects\/wp-plugins\/image-prioritizer\/contributors\" rel=\"noopener\">the translators<\/a> for their contributions.<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/translate.wordpress.org\/projects\/wp-plugins\/image-prioritizer\" rel=\"noopener\">Translate \u201cImage Prioritizer\u201d into your language.<\/a><\/p>\n<h3>Interested in development?<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/browser\/image-prioritizer\/\" rel=\"noopener\" class=\"broken_link\">Browse the code<\/a>, check out the <a target=\"_blank\" href=\"https:\/\/plugins.svn.wordpress.org\/image-prioritizer\/\" rel=\"noopener\">SVN repository<\/a>, or subscribe to the <a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/log\/image-prioritizer\/\" rel=\"noopener\" class=\"broken_link\">development log<\/a> by <a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/log\/image-prioritizer\/?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.0.0-beta1<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Bump version to 1.0.0-beta1 to indicate graduation from being experimental. See <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1846\" rel=\"nofollow ugc noopener\">1846<\/a>.<\/li>\n<li>Compute responsive <code>sizes<\/code> attribute based on the <code>width<\/code> from the <code>boundingClientRect<\/code> in captured URL Metrics. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1840\" rel=\"nofollow ugc noopener\">1840<\/a>)<\/li>\n<\/ul>\n<h4>0.3.1<\/h4>\n<p><strong>Bug Fixes<\/strong><\/p>\n<ul>\n<li>Remove erroneous check for resource initiator type when considering whether to submit LCP background image. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1760\" rel=\"nofollow ugc noopener\">1760<\/a>)<\/li>\n<\/ul>\n<h4>0.3.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Add preload links LCP picture elements. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1707\" rel=\"nofollow ugc noopener\">1707<\/a>)<\/li>\n<li>Harden validation of user-submitted LCP background image URL. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1713\" rel=\"nofollow ugc noopener\">1713<\/a>)<\/li>\n<li>Lazy load background images added via inline style attributes. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1708\" rel=\"nofollow ugc noopener\">1708<\/a>)<\/li>\n<li>Preload image URLs for LCP elements with external background images. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1697\" rel=\"nofollow ugc noopener\">1697<\/a>)<\/li>\n<li>Serve unminified scripts when <code>SCRIPT_DEBUG<\/code> is enabled. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1643\" rel=\"nofollow ugc noopener\">1643<\/a>)<\/li>\n<\/ul>\n<h4>0.2.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Lazy load videos and video posters. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1596\" rel=\"nofollow ugc noopener\">1596<\/a>)<\/li>\n<li>Prioritize loading poster image of video LCP elements. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1498\" rel=\"nofollow ugc noopener\">1498<\/a>)<\/li>\n<li>Choose smaller video poster image size based on actual dimensions. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1595\" rel=\"nofollow ugc noopener\">1595<\/a>)<\/li>\n<li>Add fetchpriority=low to occluded initial-viewport images (e.g. images in hidden carousel slides). (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1482\" rel=\"nofollow ugc noopener\">1482<\/a>)<\/li>\n<li>Avoid lazy-loading images and embeds unless there are URL Metrics for both mobile and desktop. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1604\" rel=\"nofollow ugc noopener\">1604<\/a>)<\/li>\n<\/ul>\n<h4>0.1.4<\/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<\/ul>\n<h4>0.1.3<\/h4>\n<p><strong>Bug Fixes<\/strong><\/p>\n<ul>\n<li>Fix handling of image prioritization when only some viewport groups are populated. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1404\" rel=\"nofollow ugc noopener\">1404<\/a>)<\/li>\n<\/ul>\n<h4>0.1.2<\/h4>\n<ul>\n<li>Update PHP logic to account for changes in Optimization Detective API. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1302\" rel=\"nofollow ugc noopener\">1302<\/a>)<\/li>\n<\/ul>\n<h4>0.1.1<\/h4>\n<ul>\n<li>Fix background-image styled tag visitor\u2019s handling of parsing style without background-image. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1288\" rel=\"nofollow ugc noopener\">1288<\/a>)<\/li>\n<\/ul>\n<h4>0.1.0<\/h4>\n<ul>\n<li>Initial release.<\/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\/image-prioritizer\/\" target=\"_blank\" rel=\"noopener\">Source link <\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Image Prioritizer By performanceteam Download Details Reviews Installation Development Support Description This plugin optimizes the loading of images (and videos) with prioritization to improve Largest Contentful Paint (LCP), lazy loading, and more accurate image size selection. The current optimizations include: Add breakpoint-specific fetchpriority=high preload links (both as LINK[rel=preload] elements and Link response headers) for image [&hellip;]<\/p>","protected":false},"author":6,"featured_media":3377,"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":[1975,2308],"class_list":["post-3376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-community-plugin","category-lite-version","category-wp-plugin-solution","tag-image","tag-prioritizer"],"acf":[],"fifu_image_url":"https:\/\/ps.w.org\/image-prioritizer\/assets\/banner-772x250.png?rev=3099535","_links":{"self":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts\/3376","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/comments?post=3376"}],"version-history":[{"count":0,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts\/3376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/media\/3377"}],"wp:attachment":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/media?parent=3376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/categories?post=3376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/tags?post=3376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}