[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fJHkvHPUQJZjGIW5oQd5ke04_L-4RuZ7vgMRn5Mo_Ssg":3,"$fRLN16ISmD_3n5Cw-oUmoI1e5EwWdONpaAVQhMjvv-fc":173,"$fiktj4HmJ8qQ7q_nFsMm0Rl3QxuWpWYA8IYggdoS6rF4":178},{"slug":4,"name":5,"version":6,"author":7,"author_profile":8,"description":9,"short_description":10,"active_installs":11,"downloaded":12,"rating":13,"num_ratings":13,"last_updated":14,"tested_up_to":15,"requires_at_least":16,"requires_php":17,"tags":18,"homepage":17,"download_link":22,"security_score":23,"vuln_count":13,"unpatched_count":13,"last_vuln_date":24,"fetched_at":25,"discovery_status":26,"vulnerabilities":27,"developer":28,"crawl_stats":24,"alternatives":33,"analysis":129,"fingerprints":153},"wp-responsive-retina-images","Picture Element Responsive and Retina Images","1.0.0","christhewanderer","https:\u002F\u002Fprofiles.wordpress.org\u002Fchristhewanderer\u002F","\u003Cp>WordPress has introduced the srcset feature into core which is great but this plugin goes a step further to help theme developers use the picture element with a fallback to a standard image tag and srcset.\u003C\u002Fp>\n\u003Cp>This plugin also offers support for on the fly image generation plugins. In fact it’s hugely encouraged to use one as this plugin can cause image uploads to slow down otherwise.\u003C\u002Fp>\n\u003Cp>It also offers support for 2x and 3x images for retina screens so you can serve the best image possible for your visitors.\u003C\u002Fp>\n\u003Ch4>Define image sizes\u003C\u002Fh4>\n\u003Cp>First you need to define your image sizes, similar to add_image_size. This particular function is optional but recommended because it also creates 2x and 3x images for retina.\u003Cbr \u002F>\nE.G. \u003Ccode>add_image_size_for_picture('mobile_images', 320, 0, true);\u003C\u002Fcode>\u003C\u002Fp>\n\u003Ch4>Using images in your template\u003C\u002Fh4>\n\u003Cp>Once your sizes are defined you can call them in your template like so:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>generate_picture($some_attachment_id, [\n    'mobile_images' => '(max-width: 320px)'\n], [\n    'class' => 'some-class-name',\n    'data-item' => 1\n]);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The second argument array is in the format of \u003Ccode>image size name : media query\u003C\u002Fcode> that way you can specify as many different responsive sizes as you need to.\u003Cbr \u002F>\nThe third argument allows you to add attributes to the source\u002Fimg tag.\u003C\u002Fp>\n\u003Ch4>Integrating with on the fly image generation plugins\u003C\u002Fh4>\n\u003Cp>Adding upload sizes to wordpress and slow down the image upload significantly as we generate three times as many images that you add a size for. This can cause the upload to time out if you are using a server with a low amount of cpu cores.\u003C\u002Fp>\n\u003Cp>To solve this we recommend using a plugin that will create these images independent of the upload and not affect users. For this purpose we have three filters available for you to change the functions we call underneath the hood.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>responsive_retina_images_add_size_function is the function to call when adding a new size, by default this calls `add_image_size`\n'responsive_retina_images_source_function is the function to call when pulling the image from the database, by default this calls `wp_get_attachment_image_src`\nresponsive_retina_images_source_function_index is the index at which to access the url returned from `responsive_retina_images_source_function`, by default this is `0`\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For example if you were to integrate with Fly Dynamic Image Resizer you could add the following to your functions.php.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter('responsive_retina_images_add_size_function', function() { return 'fly_add_image_size'; });\nadd_filter('responsive_retina_images_source_function', function() { return 'fly_get_attachment_image_src'; });\nadd_filter('responsive_retina_images_source_function_index', function() { return 'src'; });\n\u003C\u002Fcode>\u003C\u002Fpre>\n","A plugin that helps you generate a picture element for creating responsive images. Retina support is included out of the box.",10,1269,0,"2017-02-23T03:51:00.000Z","4.7.33","4.0.0","",[19,20,21],"picture","responsive-images","retina-images","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fwp-responsive-retina-images.zip",85,null,"2026-04-06T09:54:40.288Z","no_bundle",[],{"slug":7,"display_name":7,"profile_url":8,"plugin_count":29,"total_installs":11,"avg_security_score":23,"avg_patch_time_days":30,"trust_score":31,"computed_at":32},1,30,84,"2026-05-19T18:49:07.323Z",[34,56,76,97,112],{"slug":35,"name":36,"version":37,"author":38,"author_profile":39,"description":40,"short_description":41,"active_installs":42,"downloaded":43,"rating":44,"num_ratings":45,"last_updated":46,"tested_up_to":47,"requires_at_least":48,"requires_php":17,"tags":49,"homepage":53,"download_link":54,"security_score":23,"vuln_count":13,"unpatched_count":13,"last_vuln_date":24,"fetched_at":55},"picturefillwp","Picturefill.WP","1.3.5","kylereicks","https:\u002F\u002Fprofiles.wordpress.org\u002Fkylereicks\u002F","\u003Cp>\u003Cstrong>Note: This is an implementation of \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fscottjehl\u002Fpicturefill\u002Ftree\u002F1.2\" rel=\"nofollow ugc\">Picturefill.js version 1.2.x\u003C\u002Fa>. For an implementation of \u003Ca href=\"http:\u002F\u002Fscottjehl.github.io\u002Fpicturefill\u002F\" rel=\"nofollow ugc\">Picturefill.js 2.x\u003C\u002Fa>, see the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkylereicks\u002Fpicturefill.js.wp\u002Ftree\u002Fmaster\" rel=\"nofollow ugc\">master branch of the GitHub repository\u003C\u002Fa>.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Picturefill.WP is a simple and option-less plugin to serve HDPI and responsive images on a WordPress website.\u003C\u002Fp>\n\u003Cp>This plugin parses post and page content replacing images with a special syntax similar to the proposed syntax for the HTML5 \u003Ccode>picture\u003C\u002Fcode> element, then uses an adapted version of \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fscottjehl\u002Fpicturefill\" rel=\"nofollow ugc\">picturefill.js\u003C\u002Fa> to load the appropriate image to the browser.\u003C\u002Fp>\n\u003Ch3>Considerations before installing\u003C\u002Fh3>\n\u003Ch4>Slow Loading on Activation\u003C\u002Fh4>\n\u003Cp>The first time a page or post is loaded after activating Picturefill.WP, new \u003Ccode>@2x\u003C\u002Fcode> 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.\u003C\u002Fp>\n\u003Cp>If you are installing Picturefill.WP on a large and image heavy site, you may want to consider using another plugin like \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fregenerate-thumbnails\u002F\" rel=\"ugc\">Regenerate Thumbnails\u003C\u002Fa> to create the new image sizes for existing posts and pages.\u003C\u002Fp>\n\u003Ch4>500 or 504 server errors\u003C\u002Fh4>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch4>Image Sizes\u003C\u002Fh4>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>To use this plugin most effectively, set the default image sizes (“large”, “medium”, and “thumbnail”) to reflect useful breakpoints in your theme design.\u003C\u002Fp>\n\u003Ch4>Errors and Warnings\u003C\u002Fh4>\n\u003Cp>As of version 1.3.3 Picturefill.WP suppresses errors and warnings in parsing the DOM. Errors and warnings can now be collected via the \u003Ccode>picturefill_wp_syntax_present_libxml_errors\u003C\u002Fcode> and \u003Ccode>picturefill_wp_get_images_libxml_errors\u003C\u002Fcode> filters.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter('picturefill_wp_get_images_libxml_errors', 'handle_errors');\n\nfunction handle_errors($errors){\n  foreach($errors as $error){\n    \u002F\u002F Handle errors here.\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>Theme CSS\u003C\u002Fh4>\n\u003Cp>As described in the \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fpicturefillwp\u002Fother_notes\u002F\" rel=\"ugc\">Details section\u003C\u002Fa>, the picturefill.js syntax uses nested \u003Ccode>span\u003C\u002Fcode> elements. If a theme’s CSS applies styles to un-classed \u003Ccode>span\u003C\u002Fcode> elements, you may notice some of these \u003Ccode>span\u003C\u002Fcode>s showing up unexpectedly on the page after activating Picturefill.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.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>span[data-picture]{display:inline;margin:0;padding:0;border:0;}\nspan[data-picture] span{display:inline;margin:0;padding:0;border:0;}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>Caching\u003C\u002Fh4>\n\u003Cp>To improve performance, especially in image heavy posts, Picturefill.WP uses transient caching. The cache will be refreshed automatically every time a post is updated or Picturefill.WP is updated. The cache can be manually refreshed by deactivating and reactivating Picturefill.WP from the plugins menu.\u003C\u002Fp>\n\u003Cp>If you suspect that Picturefill.WP’s caching is causing trouble with another plugin or theme feature, first try deactivating and reactivating Picturefill.WP. If problems persist, try lowering the priority for Picturefill.WP to be executed by adding the following to your functions.php file:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>remove_filter('the_content', array(Picturefill_WP::get_instance(), 'apply_picturefill_wp_to_the_content'), 11);\nadd_filter('the_content', array(Picturefill_WP::get_instance(), 'cache_picturefill_output'), 9999);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>If you still encounter problems with other plugins or theme features, you may want to disable caching all together. See the subsection on how to disable caching under the “Extending Picturefill.WP” section of the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkylereicks\u002Fpicturefill.js.wp\" rel=\"nofollow ugc\">GitHub repository\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Details\u003C\u002Fh3>\n\u003Cp>Picturefill.WP looks through \u003Ccode>the_content\u003C\u002Fcode> to find \u003Ccode>\u003Cimg>\u003C\u002Fcode> elements like this:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cimg class=\"alignnone size-large wp-image-123\" alt=\"Accessible alternate text for the image\" title=\"A title that displays on hover\" src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-770x577.jpg\" width=\"770\" height=\"577\" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>then replaces them with something like this (visit the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkylereicks\u002Fpicturefill.js.wp#details\" rel=\"nofollow ugc\">GitHub repository\u003C\u002Fa> for a breakdown of the syntax):\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cspan data-picture data-class=\"alignnone size-large wp-image-123\" dat-alt=\"Accessible alternate text for the image\" data-title=\"A title that displays on hover\" data-width=\"770\" data-height=\"577\">\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-770x577.jpg\">\u003C\u002Fspan>\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-150x150.jpg\" data-width=\"150\" data-height=\"150\" data-media=\"(min-width: 1px)\" class=\"picturefill-wp-source thumbnail\">\u003C\u002Fspan>\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-300x300.jpg\" data-width=\"150\" data-height=\"150\" data-media=\"(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)\" class=\"picturefill-wp-source retina thumbnail\">\u003C\u002Fspan>\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-400x300.jpg\" data-width=\"400\" data-height=\"300\" data-media=\"(min-width: 420px)\" class=\"picturefill-wp-source medium\">\u003C\u002Fspan>\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-800x600.jpg\" data-width=\"400\" data-height=\"300\" data-media=\"(min-width: 420px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)\" class=\"picturefill-wp-source retina medium\">\u003C\u002Fspan>\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-770x577.jpg\" data-width=\"770\" data-height=\"577\" data-media=\"(min-width: 790px)\" class=\"picturefill-wp-source large\">\u003C\u002Fspan>\n  \u003Cspan data-src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-1540x1155.jpg\" data-width=\"770\" data-height=\"577\" data-media=\"(min-width: 790px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)\" class=\"picturefill-wp-source retina large\">\u003C\u002Fspan>\n  \u003Cnoscript>\n    \u003Cimg class=\"alignnone size-large wp-image-123\" alt=\"Accessible alternate text for the image\" title=\"A title that displays on hover\" src=\"http:\u002F\u002Fsitename.com\u002Fwp-content\u002Fuploads\u002F2013\u002F4\u002Fimage-770x577.jpg\" width=\"770\" height=\"577\" \u002F>\n  \u003C\u002Fnoscript>\n\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The adapted version of picturefill.js then looks for the last \u003Ccode>data-src\u003C\u002Fcode> listed where the associated \u003Ccode>data-media\u003C\u002Fcode> matches the device and browser, and loads the appropriate image inside the matched \u003Ccode>\u003Cspan>\u003C\u002Fcode> element.\u003C\u002Fp>\n\u003Ch3>Extending Picturefill.WP\u003C\u002Fh3>\n\u003Cp>See the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkylereicks\u002Fpicturefill.js.wp#extending-picturefillwp\" rel=\"nofollow ugc\">Extending Picturefill.WP\u003C\u002Fa> subsection of the GitHub repository for a list of plugin hooks and examples.\u003C\u002Fp>\n\u003Ch3>Advanced Use\u003C\u002Fh3>\n\u003Ch3>Markup Tricks\u003C\u002Fh3>\n\u003Ch4>Limit Responsiveness\u003C\u002Fh4>\n\u003Cp>The responsiveness of an image can be limited by adding the class \u003Ccode>min-size-{image size}\u003C\u002Fcode>. For example, an image with the class \u003Ccode>min-size-medium\u003C\u002Fcode> will not load an image smaller than size \u003Ccode>medium\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch4>Skip Images\u003C\u002Fh4>\n\u003Cp>To skip images and load them normally add the attribute \u003Ccode>data-picturefill-wp-ignore\u003C\u002Fcode> to the \u003Ccode>\u003Cimg>\u003C\u002Fcode> tag.\u003C\u002Fp>\n\u003Ch3>Helper Functions\u003C\u002Fh3>\n\u003Cp>See the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkylereicks\u002Fpicturefill.js.wp#helper-functions\" rel=\"nofollow ugc\">helper functions\u003C\u002Fa> section of the documentation on GitHub.\u003C\u002Fp>\n","A Wordpress plugin to use picturefill.js to load responsive\u002Fretina images, mimicking the proposed HTML5 picture spec.",60,9633,100,7,"2014-08-03T22:15:00.000Z","3.9.40","3.2",[50,51,20,52,21],"images","picturefill","retina","http:\u002F\u002Fgithub.com\u002Fkylereicks\u002Fpicturefill.js.wp","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fpicturefillwp.1.3.5.zip","2026-04-16T10:56:18.058Z",{"slug":57,"name":58,"version":59,"author":60,"author_profile":61,"description":62,"short_description":63,"active_installs":64,"downloaded":65,"rating":66,"num_ratings":67,"last_updated":68,"tested_up_to":69,"requires_at_least":70,"requires_php":17,"tags":71,"homepage":74,"download_link":75,"security_score":23,"vuln_count":13,"unpatched_count":13,"last_vuln_date":24,"fetched_at":55},"ricg-responsive-images","RICG Responsive Images","3.1.1","tevko","https:\u002F\u002Fprofiles.wordpress.org\u002Ftevko\u002F","\u003Cp>Bringing automatic default responsive images to WordPress.\u003C\u002Fp>\n\u003Cp>This plugin works by including all available image sizes for each image upload. Whenever WordPress outputs the image through the media uploader, or whenever a featured image is generated, those sizes will be included in the image tag via the srcset attribute.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Important notes\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>As of WordPress 4.4, images are responsive by default. If you are on WordPress 4.4 or plan to update, you will not need to install this plugin.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If you have had this plugin installed since before version 2.5 but are running version 4.4 of WordPress, it is important that you leave the plugin installed. This is because all versions of the plugin before version 2.5 relied on a \u003Ccode>data-sizes\u003C\u002Fcode> attribute being present on an image in order to provide the responsive markup needed. If the plugin in this case is removed, then images in posts will be left with invalid markup. We are working to address this issue, and you can keep track of our progress here at https:\u002F\u002Fgithub.com\u002FResponsiveImagesCG\u002Fwp-tevko-responsive-images\u002Fissues\u002F178.\u003C\u002Fp>\n\u003Cp>You can still use the plugin for advanced image compression support or as a simple way to include the picturefill script. The plugin will fall back to WordPress default functions if responsive image support is detected in your installation.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cp>Version 3.1.0 includes important changes that make this plugin compatible with WordPress version 4.4. Upgrading is highly recommended.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>As of version 2.5.0, the plugin adds \u003Ccode>srcset\u003C\u002Fcode> and \u003Ccode>sizes\u003C\u002Fcode> attributes to images on the front end instead of adding them to the image markup saved in posts.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Full documentation and contributor guidelines can be found on \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FResponsiveImagesCG\u002Fwp-tevko-responsive-images\" rel=\"nofollow ugc\">Github\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>\n","Bringing automatic default responsive images to WordPress.",2000,155166,94,20,"2017-11-28T13:19:00.000Z","4.4.34","4.0",[50,51,72,20,73],"responsive","srcset","https:\u002F\u002Fgithub.com\u002FResponsiveImagesCG\u002Fwp-tevko-responsive-images","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fricg-responsive-images.3.1.1.zip",{"slug":77,"name":78,"version":79,"author":80,"author_profile":81,"description":82,"short_description":83,"active_installs":84,"downloaded":85,"rating":44,"num_ratings":86,"last_updated":87,"tested_up_to":88,"requires_at_least":89,"requires_php":17,"tags":90,"homepage":93,"download_link":94,"security_score":95,"vuln_count":29,"unpatched_count":29,"last_vuln_date":96,"fetched_at":55},"responsify-wp","Responsify WP","1.9.11","stefanledin","https:\u002F\u002Fprofiles.wordpress.org\u002Fstefanledin\u002F","\u003Cp>Responsify WP is the WordPress plugin that cares about responsive images.\u003C\u002Fp>\n\u003Ch3>Features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Use \u003Ccode>img\u003C\u002Fcode> with srcset\u002Fsizes attributes.\u003C\u002Fli>\n\u003Cli>…or the \u003Ccode>picture\u003C\u002Fcode> element.\u003C\u002Fli>\n\u003Cli>Works with or without \u003Ca href=\"http:\u002F\u002Fscottjehl.github.io\u002Fpicturefill\u002F\" rel=\"nofollow ugc\">Picturefill\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Supports high resolution images (retina).\u003C\u002Fli>\n\u003Cli>Custom media queries.\u003C\u002Fli>\n\u003Cli>Handpick which image sizes to use.\u003C\u002Fli>\n\u003Cli>Responsive background images.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=3ThYWO6vHKI&spfreload=10\" rel=\"nofollow ugc\">Demo\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Responsify WP finds featured images and all images inside the content and makes them responsive.\u003Cbr \u002F>\nFor example, you might have a template that looks like this:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Carticle>\n    \u003Ch1>\u003C?php the_title();?>\u003C\u002Fh1>\n    \u003C?php the_content();?>\n\u003C\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>That will output something like this:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Carticle>\n    \u003Ch1>Hello world\u003C\u002Fh1>\n    \u003Cp>Lorem ipsum dolor sit amet...\u003C\u002Fp>\n    \u003Cimg src=\"large.jpg\" alt=\"Image description\">\n\u003C\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>But once you have activated the plugin, it will look like this instead:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Carticle>\n    \u003Ch1>Hello world\u003C\u002Fh1>\n    \u003Cp>Lorem ipsum dolor sit amet...\u003C\u002Fp>\n    \u003Cimg sizes=\"(min-width: 300px) 1024px, (min-width: 150x) 300px, 150px\"\n        srcset=\"thumbnail.jpg 150w,\n        medium.jpg 300w,\n        large.jpg 1024w\"\n        alt=\"Image description\">\n\u003C\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>You can also choose to use the \u003Ccode>picture\u003C\u002Fcode> element instead:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Carticle>\n    \u003Ch1>Hello world\u003C\u002Fh1>\n    \u003Cp>Lorem ipsum dolor sit amet...\u003C\u002Fp>\n    \u003Cpicture>\n        \u003Csource srcset=\"full-size.jpg\" media=\"(min-width: 1024px)\">\n        \u003Csource srcset=\"large.jpg\" media=\"(min-width: 300px)\">\n        \u003Csource srcset=\"medium.jpg\" media=\"(min-width: 150px)\">\n        \u003Cimg srcset=\"thumbnail.jpg\" alt=\"Image description\">\n    \u003C\u002Fpicture>\n\u003C\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>It also works with high resolution (retina) images:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Carticle>\n    \u003Ch1>Hello world\u003C\u002Fh1>\n    \u003Cp>Lorem ipsum dolor sit amet...\u003C\u002Fp>\n    \u003Cpicture>\n        \u003Csource srcset=\"full-size.jpg\" media=\"(min-width: 1024px)\">\n        \u003Csource srcset=\"large.jpg, large_retina.jpg 2x\" media=\"(min-width: 300px)\">\n        \u003Csource srcset=\"medium.jpg, medium_retina.jpg 2x\" media=\"(min-width: 150px)\">\n        \u003Cimg srcset=\"thumbnail.jpg, thumbnail_retina.jpg 2x\" alt=\"Image description\">\n    \u003C\u002Fpicture>\n\u003C\u002Farticle>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The different versions of the image in the examples above is in the standard \u003Ccode>thumbnail\u003C\u002Fcode>, \u003Ccode>medium\u003C\u002Fcode>, \u003Ccode>large\u003C\u002Fcode> and \u003Ccode>full\u003C\u002Fcode> sizes.\u003Cbr \u002F>\nThe \u003Cstrong>media queries\u003C\u002Fstrong> are based on the width of the “previous” image.\u003Cbr \u002F>\nAny \u003Cstrong>custom sizes\u003C\u002Fstrong> of the image will also be found and used.\u003C\u002Fp>\n\u003Ch3>Settings\u003C\u002Fh3>\n\u003Cp>You can \u003Cstrong>select which image sizes\u003C\u002Fstrong> that the plugin should use from the RWP settings page.\u003Cbr \u002F>\nThese settings can be overwritten from your templates.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003C?php\n\n\u002F\u002F Using get_posts()\n$posts = get_posts( array(\n    'post_type' => 'portfolio',\n    'rwp_settings' => array(\n        'sizes' => array('large', 'full')\n    )\n) );\nforeach( $posts as $post ) {\n    \u002F\u002F ...\n}\n\n\u002F\u002F Using WP_Query()\n$query = new WP_Query( array(\n    'category_name' => 'wordpress',\n    'rwp_settings' => array(\n        'sizes' => array('large', 'full')\n    )\n) );\nif ( $query->have_posts() ) {\n    \u002F\u002F ...\n}\n?>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Available settings:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Select which image sizes to use.\u003C\u002Fli>\n\u003Cli>Set\u002Foverride attributes.\u003C\u002Fli>\n\u003Cli>Set custom media queries.\u003C\u002Fli>\n\u003Cli>Turn on\u002Foff retina.\u003C\u002Fli>\n\u003Cli>Ignore image formats.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Functions\u003C\u002Fh3>\n\u003Cp>RWP provides a number of functions that can generate responsive images in your templates.\u003Cbr \u002F>\nLet’s say that you have the following markup for a very large header image:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cheader>\n    \u003C?php the_post_thumbnail( 'full' ); ?>\n\u003C\u002Fheader>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>As you probably know, \u003Ccode>the_post_thumbnail()\u003C\u002Fcode> will create a regular \u003Ccode>\u003Cimg>\u003C\u002Fcode> tag with the full-size image in this case.\u003Cbr \u002F>\nBut you don’t want to send a big 1440px image to a mobile device. This can easily be solved like this:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cheader>\n    \u003C?php\n    $thumbnail_id = get_post_thumbnail_id( $post->ID );\n\n    \u002F\u002F Generate an \u003Cimg> tag with srcset\u002Fsizes attributes.\n    echo rwp_img( $thumbnail_id );\n\n    \u002F\u002F Generate a \u003Cpicture> element\n    echo rwp_picture( $thumbnail_id );\n    ?>\n\u003C\u002Fheader>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Website\u003C\u002Fh3>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fresponsifywp.com\" rel=\"nofollow ugc\">http:\u002F\u002Fresponsifywp.com\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Demo\u003C\u002Fh3>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fresponsifywp.com\u002Fdemo\" rel=\"nofollow ugc\">http:\u002F\u002Fresponsifywp.com\u002Fdemo\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Documentation and examples\u003C\u002Fh3>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fstefanledin\u002Fresponsify-wp\" rel=\"nofollow ugc\">https:\u002F\u002Fgithub.com\u002Fstefanledin\u002Fresponsify-wp\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Requirements\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>PHP 5.3\u003C\u002Fli>\n\u003C\u002Ful>\n","Responsive images. Plug and play.",600,45265,18,"2018-06-07T06:21:00.000Z","4.9.29","3.8.1",[19,91,20,92,73],"picture-element","sizes","https:\u002F\u002Fgithub.com\u002Fstefanledin\u002Fresponsify-wp","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fresponsify-wp.1.9.11.zip",63,"2025-06-05 00:00:00",{"slug":98,"name":99,"version":100,"author":101,"author_profile":102,"description":103,"short_description":104,"active_installs":11,"downloaded":105,"rating":13,"num_ratings":13,"last_updated":106,"tested_up_to":107,"requires_at_least":108,"requires_php":109,"tags":110,"homepage":17,"download_link":111,"security_score":44,"vuln_count":13,"unpatched_count":13,"last_vuln_date":24,"fetched_at":55},"picture-tag","Picture Tag","1.5.0","Artilab Company LTD","https:\u002F\u002Fprofiles.wordpress.org\u002Fartilab\u002F","\u003Cp>The \u003Cstrong>Picture Tag\u003C\u002Fstrong> plugin allows you to easily integrate responsive \u003Ccode>\u003Cpicture>\u003C\u002Fcode> tags into your WordPress site. This plugin adds support for generating modern image formats like \u003Cstrong>WebP\u003C\u002Fstrong> and \u003Cstrong>AVIF\u003C\u002Fstrong>, improving performance and SEO.\u003C\u002Fp>\n\u003Cp>Features:\u003Cbr \u002F>\n– A function for displaying images using the picture tag.\u003Cbr \u002F>\n– Support for WebP and AVIF formats.\u003Cbr \u002F>\n– Flexible settings for custom paths and image attributes.\u003Cbr \u002F>\n– A shortcode \u003Ccode>[arti_picture]\u003C\u002Fcode> for inserting responsive  tags with customizable attributes.\u003C\u002Fp>\n","Generate responsive  tags with support for WebP and AVIF formats in WordPress.",1062,"2026-01-09T12:10:00.000Z","6.9.4","5.0","7.4",[98,20],"https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fpicture-tag.1.5.0.zip",{"slug":113,"name":114,"version":115,"author":116,"author_profile":117,"description":118,"short_description":119,"active_installs":11,"downloaded":120,"rating":44,"num_ratings":29,"last_updated":121,"tested_up_to":107,"requires_at_least":122,"requires_php":109,"tags":123,"homepage":127,"download_link":128,"security_score":44,"vuln_count":13,"unpatched_count":13,"last_vuln_date":24,"fetched_at":55},"responsive-picture-block","Responsive Picture Block","1.1.1","Core Essentials","https:\u002F\u002Fprofiles.wordpress.org\u002Fcoreessentials\u002F","\u003Cp>\u003Cstrong>Core Essentials – Responsive Picture Block\u003C\u002Fstrong> turns several standard \u003Cstrong>Image\u003C\u002Fstrong> blocks into one semantic, front-end \u003Ccode>\u003Cpicture>\u003C\u002Fcode> HTML element. It’s built for \u003Cstrong>art direction\u003C\u002Fstrong>: choose \u003Cstrong>different crops, compositions, or formats\u003C\u002Fstrong> for different breakpoints (e.g., a tight mobile crop, a wider desktop crop, or an AVIF\u002FWebP source).\u003C\u002Fp>\n\u003Cp>Why this matters:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>\u003Ccode>\u003Cpicture>\u003C\u002Fcode> vs \u003Ccode>\u003Cimg srcset>\u003C\u002Fcode>\u003C\u002Fstrong>\u003Cbr \u002F>\n  srcset is great for picking the right \u003Cstrong>resolution\u003C\u002Fstrong> of the \u003Cem>same\u003C\u002Fem> image. But when you need different \u003Cstrong>content\u003C\u002Fstrong> (crop\u002Fratio\u002Fcomposition) at different viewport widths, you need \u003Cstrong>art direction\u003C\u002Fstrong> — that’s exactly what \u003Ccode>\u003Cpicture>\u003C\u002Fcode> does by letting you swap \u003Cstrong>entire sources\u003C\u002Fstrong> via \u003Ccode>\u003Csource media=\"…\">\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>\u003Cstrong>Editor-first UX\u003C\u002Fstrong>\u003Cbr \u002F>\nAuthors see a single “Responsive Picture (Block)” wrapper, then insert one Image per breakpoint. The plugin mirrors the link \u002Fcaption from the Desktop image. Per-image design controls (aspect ratio, object-fit, width\u002Fheight) are respected. The block’s \u003Cstrong>preview\u003C\u002Fstrong> shows the native \u003Cstrong>Desktop \u002F Tablet \u002F Mobile\u003C\u002Fstrong> toolbar:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Desktop preview ⇒ show \u003Cstrong>all\u003C\u002Fstrong> child images  \u003C\u002Fli>\n\u003Cli>Tablet preview ⇒ show \u003Cstrong>Tablet\u003C\u002Fstrong>, else \u003Cstrong>Desktop\u003C\u002Fstrong>, else \u003Cstrong>Mobile\u003C\u002Fstrong>  \u003C\u002Fli>\n\u003Cli>Mobile preview ⇒ show \u003Cstrong>Mobile\u003C\u002Fstrong>, else \u003Cstrong>Tablet\u003C\u002Fstrong>, else \u003Cstrong>Desktop\u003C\u002Fstrong>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>\u003Cstrong>Perfect source ordering\u003C\u002Fstrong>\u003Cbr \u002F>\nCustom media queries are \u003Cstrong>auto-sorted\u003C\u002Fstrong> so the correct \u003Ccode>\u003Csource>\u003C\u002Fcode> wins (most specific first). Works with \u003Ccode>max-width\u003C\u002Fcode>, \u003Ccode>min-width\u003C\u002Fcode>, and range queries.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Key Features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Wraps multiple core \u003Cstrong>Image\u003C\u002Fstrong> blocks into a single semantic \u003Ccode>\u003Cpicture>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Pick \u003Cstrong>Desktop \u002F Tablet \u002F Mobile \u002F Custom\u003C\u002Fstrong> images (true art direction)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Override \u003Ccode>media\u003C\u002Fcode>\u003C\u002Fstrong> per Tablet\u002FMobile\u002FCustom (e.g., \u003Ccode>(max-width: 1200px)\u003C\u002Fcode>)\u003C\u002Fli>\n\u003Cli>Optional \u003Cstrong>\u003Ccode>sizes\u003C\u002Fcode> override\u003C\u002Fstrong> per source (advanced bandwidth tuning)\u003C\u002Fli>\n\u003Cli>Allows \u003Cstrong>width, height, aspect-ratio, object-fit\u003C\u002Fstrong> per breakpoint\u003C\u002Fli>\n\u003Cli>Uses \u003Cstrong>link + caption\u003C\u002Fstrong> from the Desktop (fallback) image\u003C\u002Fli>\n\u003Cli>Editor \u003Cstrong>preview\u003C\u002Fstrong> follows WordPress’ device switcher (Desktop\u002FTablet\u002FMobile)\u003C\u002Fli>\n\u003Cli>Prevents layout overflow; picture wrapper is fully responsive\u003C\u002Fli>\n\u003Cli>Works with standard WP image sizes and responsive \u003Ccode>srcset\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Lightweight, no front-end JS — pure HTML\u002FCSS on the front end\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Why \u003Ccode>\u003Cpicture>\u003C\u002Fcode> (Art Direction 101)\u003C\u002Fh3>\n\u003Cp>When your layout needs \u003Cstrong>different imagery\u003C\u002Fstrong> across breakpoints (e.g., a vertical crop on phones and a wide landscape on desktops), you’re doing \u003Cstrong>art direction\u003C\u002Fstrong>. The \u003Ccode>\u003Cpicture>\u003C\u002Fcode> element enables this by letting the browser \u003Cstrong>choose an entire source\u003C\u002Fstrong> based on \u003Ccode>media\u003C\u002Fcode> conditions (and even file \u003Ccode>type\u003C\u002Fcode>, like AVIF\u002FWebP), not just a different width of the same file. The result is \u003Cstrong>better design control\u003C\u002Fstrong> and \u003Cstrong>faster pages\u003C\u002Fstrong> because each device downloads \u003Cstrong>only the most appropriate asset\u003C\u002Fstrong> for its layout saving you bandwidth as well as having compositions control.\u003C\u002Fp>\n\u003Ch3>Use Cases\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Hero banners with \u003Cstrong>different crops\u003C\u002Fstrong> for mobile vs desktop  \u003C\u002Fli>\n\u003Cli>Product images where the \u003Cstrong>subject framing\u003C\u002Fstrong> changes on small screens  \u003C\u002Fli>\n\u003Cli>Editorial layouts that require \u003Cstrong>portrait vs landscape\u003C\u002Fstrong> compositions  \u003C\u002Fli>\n\u003Cli>File \u003Cstrong>format switching\u003C\u002Fstrong> (e.g., AVIF\u002FWebP with PNG\u002FJPEG fallback)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Usage\u003C\u002Fh3>\n\u003Col>\n\u003Cli>\u003Cstrong>Insert\u003C\u002Fstrong> the \u003Cstrong>Responsive Picture (Block)\u003C\u002Fstrong> block.  \u003C\u002Fli>\n\u003Cli>\u003Cstrong>Add Image blocks\u003C\u002Fstrong> inside it for: Desktop (fallback), Tablet, Mobile, and\u002For Custom.  \u003C\u002Fli>\n\u003Cli>\u003Cstrong>Select each Image\u003C\u002Fstrong> and open the \u003Cstrong>Responsive: Breakpoint\u003C\u002Fstrong> panel:\n\u003Cul>\n\u003Cli>\u003Cstrong>Viewport\u003C\u002Fstrong>: Desktop \u002F Tablet \u002F Mobile \u002F Custom  \u003C\u002Fli>\n\u003Cli>\u003Cstrong>Override media query\u003C\u002Fstrong> (Tablet\u002FMobile): optional (e.g., \u003Ccode>(max-width: 1200px)\u003C\u002Fcode>)  \u003C\u002Fli>\n\u003Cli>\u003Cstrong>Custom media query\u003C\u002Fstrong>: required when using the “Custom” viewport  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>(Optional) Open \u003Cstrong>Advanced: Sizes override\u003C\u002Fstrong> to set a custom \u003Ccode>sizes=\"\"\u003C\u002Fcode> for that source.  \u003C\u002Fli>\n\u003Cli>Use the editor’s \u003Cstrong>Desktop \u002F Tablet \u002F Mobile\u003C\u002Fstrong> preview to check the effective image per breakpoint.  \u003C\u002Fli>\n\u003Cli>Publish. The front end renders a single \u003Ccode>\u003Cpicture>\u003C\u002Fcode> with perfectly ordered \u003Ccode>\u003Csource>\u003C\u002Fcode> tags and a fallback \u003Ccode>\u003Cimg>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Block Details\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Block name: \u003Ccode>ce\u002Fresponsive-picture\u003C\u002Fcode>  \u003C\u002Fli>\n\u003Cli>Children: one or more \u003Ccode>core\u002Fimage\u003C\u002Fcode> blocks  \u003C\u002Fli>\n\u003Cli>\n\u003Cp>Front-end HTML output:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cpicture>\n  \u003Csource media=\"(max-width: 767px)\" srcset=\"…\" sizes=\"…\">\n  \u003Csource media=\"(max-width: 1024px)\" srcset=\"…\" sizes=\"…\">\n  \u003C!-- custom sources (auto-sorted) -->\n  \u003Cimg src=\"…\" srcset=\"…\" sizes=\"…\" alt=\"\">\n\u003C\u002Fpicture>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003C\u002Ful>\n","Create truly responsive, art-directed images in the block editor. Wrap multiple Image blocks (Desktop\u002FTablet\u002FMobile\u002FCustom) and render a single HTML e …",1023,"2026-03-12T08:40:00.000Z","6.3",[124,125,126,91,20],"art-direction","block-editor","gutenberg","https:\u002F\u002Fcoreessentials.online\u002Fplugins-for-wordpress\u002Fresponsive-picture-block\u002F","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fresponsive-picture-block.1.1.1.zip",{"attackSurface":130,"codeSignals":136,"taintFlows":143,"riskAssessment":144,"analyzedAt":152},{"hooks":131,"ajaxHandlers":132,"restRoutes":133,"shortcodes":134,"cronEvents":135,"entryPointCount":13,"unprotectedCount":13},[],[],[],[],[],{"dangerousFunctions":137,"sqlUsage":138,"outputEscaping":140,"fileOperations":13,"externalRequests":13,"nonceChecks":13,"capabilityChecks":13,"bundledLibraries":142},[],{"prepared":13,"raw":13,"locations":139},[],{"escaped":13,"rawEcho":13,"locations":141},[],[],[],{"summary":145,"deductions":146},"The \"wp-responsive-retina-images\" v1.0.0 plugin exhibits a strong security posture based on the provided static analysis.  The absence of any detected dangerous functions, SQL queries that are not prepared, unescaped outputs, file operations, external HTTP requests, or taint flows is highly commendable.  Furthermore, the plugin has no recorded vulnerability history, indicating a history of security diligence.  The zero entry points, especially zero unprotected ones, suggest a well-designed and secure integration with WordPress.\n\nHowever, the complete absence of nonce and capability checks on all entry points is a notable concern. While the static analysis shows no exploitable entry points currently, the lack of these fundamental WordPress security mechanisms means that if any new entry points were introduced or existing ones were to become exposed through future modifications or interactions with other plugins, they would be inherently unprotected against common attacks like Cross-Site Request Forgery (CSRF) and unauthorized access. This presents a potential weakness that, while not immediately exploitable with the current code, creates a future risk.\n\nIn conclusion, the plugin's current codebase is clean and free of obvious vulnerabilities, with a strong commitment to secure coding practices for the identified elements. The lack of historical vulnerabilities further reinforces this positive assessment. The primary area for improvement lies in implementing essential WordPress security checks like nonces and capability checks on all potential interaction points to ensure robust protection against a wider range of threats.",[147,150],{"reason":148,"points":149},"No Nonce checks on entry points",5,{"reason":151,"points":149},"No Capability checks on entry points","2026-03-17T01:29:52.532Z",{"wat":154,"direct":159},{"assetPaths":155,"generatorPatterns":156,"scriptPaths":157,"versionParams":158},[],[],[],[],{"cssClasses":160,"htmlComments":161,"htmlAttributes":162,"restEndpoints":165,"jsGlobals":166,"shortcodeOutput":167},[],[],[163,164],"data-id","data-size",[],[],[168,169,170,171,172],"\u003Cpicture","srcset='","media='","type='","data-size='",{"error":174,"url":175,"statusCode":176,"statusMessage":177,"message":177},true,"http:\u002F\u002Flocalhost\u002Fapi\u002Fplugins\u002Fwp-responsive-retina-images\u002Fbundle",404,"no bundle for this plugin yet",{"slug":4,"current_version":6,"total_versions":13,"versions":179},[]]