{"id":152100,"date":"2022-01-14T09:45:01","date_gmt":"2022-01-14T09:45:01","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/optimize-more-images\/"},"modified":"2023-05-21T15:24:56","modified_gmt":"2023-05-21T15:24:56","slug":"optimize-more-images","status":"publish","type":"plugin","link":"https:\/\/sw.wordpress.org\/plugins\/optimize-more-images\/","author":20183415,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.3","stable_tag":"1.1.3","tested":"6.2.9","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"Optimize More! - Images & Media Files","header_author":"Arya Dhiratara","header_description":"Yet another image optimization plugin. Features: Lazy loading images, iframes, and videos, using high performant lozad.js, Use CDN for images, Add missing image dimensions, Preload featured images, and more to come. Part of ThinkWeb's Performance Pack, built for WordPress Speed Optimization Purpose.","assets_banners_color":"fafafa","last_updated":"2023-05-21 15:24:56","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/dhiratara.com\/","rating":5,"author_block_rating":0,"active_installs":80,"downloads":9139,"num_ratings":4,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"aryadhiratara","date":"2022-01-14 09:50:13"},"1.0.5":{"tag":"1.0.5","author":"aryadhiratara","date":"2022-08-03 07:42:22"},"1.0.7":{"tag":"1.0.7","author":"aryadhiratara","date":"2022-08-03 07:42:22"},"1.0.9":{"tag":"1.0.9","author":"aryadhiratara","date":"2022-11-16 06:08:51"},"1.1.0":{"tag":"1.1.0","author":"aryadhiratara","date":"2022-11-16 06:08:51"},"1.1.1":{"tag":"1.1.1","author":"aryadhiratara","date":"2022-11-30 02:37:17"},"1.1.2":{"tag":"1.1.2","author":"aryadhiratara","date":"2022-12-02 02:12:57"},"1.1.3":{"tag":"1.1.3","author":"aryadhiratara","date":"2023-05-21 15:24:56"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":4},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2915413,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2915413,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2915413,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2915413,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.1","1.0.5","1.0.7","1.0.9","1.1.0","1.1.1","1.1.2","1.1.3"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":2665301,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":2657603,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":2657603,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":2657754,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"Lazy Loading Media Files (Image Tags, Inline Background Images, CSS Background Images, Iframes, Videos)","2":"Preload Featured Images, useful to bypass critical image render blocking issue","3":"Use CDN for your images, useful to decrease server load","4":"Add missing image dimension (width and height attributes)"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[187460,4884,1466,1513,247],"plugin_category":[50,54],"plugin_contributors":[206792,206793],"plugin_business_model":[],"class_list":["post-152100","plugin","type-plugin","status-publish","hentry","plugin_tags-core-web-vitals","plugin_tags-lazy-load","plugin_tags-lazyload","plugin_tags-pagespeed","plugin_tags-performance","plugin_category-media","plugin_category-security-and-spam-protection","plugin_contributors-aryadhiratara","plugin_contributors-thinkwebdev","plugin_committers-aryadhiratara"],"banners":{"banner":"https:\/\/ps.w.org\/optimize-more-images\/assets\/banner-772x250.png?rev=2915413","banner_2x":"https:\/\/ps.w.org\/optimize-more-images\/assets\/banner-1544x500.png?rev=2915413","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/optimize-more-images\/assets\/icon-128x128.png?rev=2915413","icon_2x":"https:\/\/ps.w.org\/optimize-more-images\/assets\/icon-256x256.png?rev=2915413","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/optimize-more-images\/assets\/screenshot-1.jpg?rev=2665301","caption":"Lazy Loading Media Files (Image Tags, Inline Background Images, CSS Background Images, Iframes, Videos)"},{"src":"https:\/\/ps.w.org\/optimize-more-images\/assets\/screenshot-2.jpg?rev=2657603","caption":"Preload Featured Images, useful to bypass critical image render blocking issue"},{"src":"https:\/\/ps.w.org\/optimize-more-images\/assets\/screenshot-3.jpg?rev=2657603","caption":"Use CDN for your images, useful to decrease server load"},{"src":"https:\/\/ps.w.org\/optimize-more-images\/assets\/screenshot-4.jpg?rev=2657754","caption":"Add missing image dimension (width and height attributes)"}],"raw_content":"<!--section=description-->\n<p>A lightweight yet powerful image, iframe, and video optimization plugin. Lazy load, preload, and more. No jquery dependency.<\/p>\n\n<h3>Features<\/h3>\n\n<ul>\n<li><strong>Lazy Load<\/strong> - Lazy loading images, iframes, and videos, using the high performant <code>lazysizes.js<\/code>. No jquery dependency.<\/li>\n<li><strong>Preload Featured Images<\/strong> - Automatically preloading featured image from common page\/post (homepage, pages except homepage, single post, and woocommerce single product pages).<\/li>\n<li><strong>Use CDN for Images<\/strong> - HTML rewrite if you want to serve images from your favorite CDN.<\/li>\n<li><strong>Add Missing Image Dimensions<\/strong> - Add missing width and height attributes from your images.<\/li>\n<\/ul>\n\n<p><strong>New<\/strong> (since 1.1.1)<\/p>\n\n<ul>\n<li>Add <code>no-lazy<\/code> and <code>skip-lazy<\/code> class as default exclude class for lazyloading images.<\/li>\n<li>Enable <code>loading eager<\/code> to also target <code>no-lazy<\/code> and <code>skip-lazy<\/code> class.<\/li>\n<li>Automatically exclude featured image (add <code>no-lazy<\/code> class) from lazyloading if <code>Preload Featured Images<\/code> feature is enabled (useful to avoid <code>Largest Contentful Paint image was lazily loaded<\/code> warning in Google Pagespeed Insights ).<\/li>\n<li>Add <code>webp<\/code> extension to CDN HTML rewrite regex.<\/li>\n<\/ul>\n\n<p><strong>New<\/strong> (since 1.0.7)<\/p>\n\n<ul>\n<li>We changed the lazy load library from lozad.js to <strong>lazysizes.js<\/strong>.<\/li>\n<li>Add field to modify lazysize default configuration. Read the <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\/#js-api---options\">docs<\/a>.<\/li>\n<li>Add fields to specify width and height fallback value if the Add Missing Image Dimensions feature failed to get the actual image dimension.<\/li>\n<\/ul>\n\n<p><strong>New<\/strong> (since 1.0.3)<\/p>\n\n<ul>\n<li><strong>Lazy load CSS Background Images<\/strong> - Load faster by lazy loading background images from the CSS <code>background-image<\/code> property.  Tested and works well on CSS background image from <code>GenerateBlocks<\/code>, <code>Elementor<\/code>, and <code>Oxygen Builder<\/code>.<\/li>\n<li><strong>Noscript Fallback<\/strong> - Extra option to use &lt;noscript&gt; fallback for lazy images and iframes.<\/li>\n<li><strong>Add Loading Eager<\/strong> - Extra option to Automatically add <code>loading=eager<\/code> to the lazy load excluded list.<\/li>\n<\/ul>\n\n<p>This plugin only adds 1 extra row in your database. And it will self delete upon uninstalation.<\/p>\n\n<h3>About Lazysizes<\/h3>\n\n<p>Lazysizes is highly performant lazy load library, written by Alexander Farkas in pure JS with no dependencies.<\/p>\n\n<p><strong>Taken from lazysize's github description<\/strong>:\n<em>High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.<\/em><\/p>\n\n<h3>Optimize More!<\/h3>\n\n<p>Need to optimize more? Try our <a href=\"https:\/\/thinkweb.dev\/service\/speed-optimization\/\">WordPress Speed Optimization's Service<\/a>.<\/p>\n\n<h3>Other USEFUL PLUGINS TO OPTIMIZE YOUR SITE'S SPEED:<\/h3>\n\n<ul>\n<li><p><strong><a href=\"https:\/\/wordpress.org\/plugins\/optimize-more\/\">Optimize More!<\/a><\/strong> - Selectively Optimize your CSS\/JS Delivery: Load CSS Asynchronously, Delay CSS and JavaScripts until User Interaction, Preload Critical CSS and JavaScripts, and Remove Unused CSS and JavaScripts Files.<\/p><\/li>\n<li><p><strong><a href=\"https:\/\/wordpress.org\/plugins\/lazyload-preload-and-more\/\">Lazyload, Preload, and more!<\/a><\/strong> - A simplified version of this plugin. The plugin size is only around 14kb zipped. Without UI for settings, but you can customize the settings using filters.\nThe default configuration is the best for optimizing images and other media files to speed up your site (just install and activate it and you're good to go):<\/p>\n\n<ul>\n<li>lazyload your below the fold images\/iframes\/videos,<\/li>\n<li>preload your featured images,<\/li>\n<li>and add loading=\u201deager\u201d to your featured image and all images that have <code>no-lazy<\/code> or <code>skip-lazy<\/code> class.<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<h3>Other USEFUL PLUGIN:<\/h3>\n\n<ul>\n<li><p><strong><a href=\"https:\/\/wordpress.org\/plugins\/shop-extra\/\">Shop Extra<\/a><\/strong> - A lightweight plugin to optimize your WooCommerce &amp; Business site: Floating WhatsApp Chat Widget (can be use without WooCommerce), WhatsApp Order Button for WooCommrece, Hide\/Disable WooCommerce Elements, WooCommerce Strings Translations, and many more.<\/p><\/li>\n<li><p><strong><a href=\"https:\/\/wordpress.org\/plugins\/animate-on-scroll\/\">Animate on Scroll<\/a><\/strong> - Animate any Elements on scroll using the popular AOS JS library simply by adding class names. This plugin helps you integrate easily with AOS JS library to add any AOS animations to WordPress. Simply add the desired AOS animation to your element class name with \"aos-\" prefix and the plugin will add the corresponding aos attribute to the element tag.<\/p><\/li>\n<\/ul>\n\n<!--section=installation-->\n<h4>From within WordPress<\/h4>\n\n<ol>\n<li>Visit <code>Plugins &gt; Add New<\/code><\/li>\n<li>Search for <code>Optimize More Images<\/code><\/li>\n<li>Activate Optimize More! Images from your Plugins page<\/li>\n<li>Find Optimize More! Images in your sidebar menu to configure settings<\/li>\n<\/ol>\n\n<h4>Manually<\/h4>\n\n<ol>\n<li>Download the plugin using the download link in this WordPress plugins repository<\/li>\n<li>Upload <code>optimize-more-images<\/code> folder to your <code>\/wp-content\/plugins\/<\/code> directory<\/li>\n<li>Activate Optimize More! Images plugin from your Plugins page<\/li>\n<li>Find Optimize More! Images in your sidebar menu to configure settings<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='why%20changing%20the%20lazy%20load%20library%20from%20lozad.js%20to%20lazysizes.js%3F'><h3>Why changing the lazy load library from lozad.js to lazysizes.js?<\/h3><\/dt>\n<dd><p>More configurable.<\/p><\/dd>\n<dt id='how%20to%20enable%20lazy%20loading%20css%20background%20images%3F'><h3>How to enable lazy loading CSS background images?<\/h3><\/dt>\n<dd><p>Lazy loading css background images requires some effort from your end. Add an extra <code>lazyload<\/code> class to each container which has css background image in your favorite page editor. Or, simply put (one of) the container class in the include list field, the plugin will automatically add an extra <code>lazyload<\/code> class to the container.<\/p><\/dd>\n<dt id='why%20is%20there%20preload%20featured%20image%20feature%3F'><h3>Why is there preload featured image feature?<\/h3><\/dt>\n<dd><p>This actually a good practice to add extra performance boost to your WordPress site.<\/p>\n\n<p>On WordPress single post and WooCommerce single product pages, featured images usually appear on above the fold section, so it's better to preload them to avoid render blocking issues, just like any assets which required in above the fold section.<\/p>\n\n<p>We can adapt this single post and single product behaviour in pages too. Set your hero \/ above the fold images as featured images to programatically, and automatically, preload them on all pages.<\/p><\/dd>\n<dt id='preload%20featured%20images%20not%20working%3F'><h3>Preload featured images not working?<\/h3><\/dt>\n<dd><p>It calls images set as featured image in the native WordPress post\/pages, using <code>get_post_thumbnail_id()<\/code> and <code>wp_get_attachment_image_src()<\/code>. Make sure you already adds them.<\/p>\n\n<p>If you are using Elementor or other Page's builders, simply edit the pages with the native WordPress editor to set the featured image.<\/p><\/dd>\n<dt id='this%20plugin%20preload%20the%20wrong%20image%20size%20in%20my%20post%3F'><h3>This plugin preload the wrong image size in my post?<\/h3><\/dt>\n<dd><p>By default, this plugin will be grab the url and preload the <code>full<\/code> image size and <code>woocommerce_single<\/code> for WooCommerce single product pages. You can change that using filter if your theme is uses different <code>image size<\/code>. See example below.<\/p><\/dd>\n<dt id='how%20to%20change%20the%20image%20size%20of%20featured%20image%20when%20using%20preload%20featured%20images%20feature%3F'><h3>How to change the image size of featured image when using Preload Featured Images feature?<\/h3><\/dt>\n<dd><p>Here are some examples:<\/p>\n\n<p>add_filter( 'preload_featured_images_image_size', function( $image_size, $post ) {\n    if ( is_singular( 'post' ) ) { return 'large'; }\n    elseif ( is_singular( 'product' ) ) { return 'full'; }\n    else { return $image_size; }\n}, 10, 2 );<\/p><\/dd>\n<dt id='how%20to%20change%20the%20image%20file%20types%20for%20cdn%20html%20rewrite%3F'><h3>How to change the image file types for CDN HTML rewrite?<\/h3><\/dt>\n<dd><p>Example if you want to include svg to your image CDN:<\/p>\n\n<p>add_filter( 'opm_cdn_file_types', function($opm_cdn_file_types) {\n    return $opm_cdn_file_types . '|svg';\n} );<\/p>\n\n<p>Example if you want to completely change the default file types:<\/p>\n\n<p>add_filter( 'opm_cdn_file_types', function($opm_cdn_file_types) {\n    return 'png|webp|svg';\n} );<\/p><\/dd>\n<dt id='add%20missing%20image%20dimensions%20not%20working%3F'><h3>Add Missing Image Dimensions not working?<\/h3><\/dt>\n<dd><p>This depends on you theme or overal site's setup and how you upload your images. If it fails to grab the width and height of your images, you can specify the default image width and height fallback values that best suit your website situation in the provided fields.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.3<\/h4>\n\n<ul>\n<li>Bug fix: add js pattern to lazyload video poster images<\/li>\n<li>Refactor the add image dimension class (in my tests, this one succeeded more often in adding image width and height)<\/li>\n<\/ul>\n\n<h4>1.1.2<\/h4>\n\n<ul>\n<li>Enable <code>no-lazy<\/code> and <code>skip-lazy<\/code> class to lazy load background images<\/li>\n<li>Remove svg extension and only use <code>jpg|jpeg|png|webp<\/code> as the default file types for CDN HTML rewrite regex<\/li>\n<li>Introduce <code>opm_cdn_file_types<\/code> filter to change the file types of CDN HTML rewrite regex (see FAQ)<\/li>\n<li>Fix some bugs<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>Add <code>no-lazy<\/code> and <code>skip-lazy<\/code> class as default exclude class for lazyloading images<\/li>\n<li>Enable <code>loading eager<\/code> to also target <code>no-lazy<\/code> and <code>skip-lazy<\/code> class<\/li>\n<li>Automatically exclude featured image (add <code>no-lazy<\/code> class) from lazyloading if <code>Preload Featured Images<\/code> feature is enabled (useful to avoid <code>Largest Contentful Paint image was lazily loaded<\/code> warning in Google Pagespeed Insights)<\/li>\n<li>Introduce <code>preload_featured_images_image_size<\/code> filter to change the <code>image size<\/code> of <code>featured image<\/code> in the plugin's FAQ.<\/li>\n<li>Add <code>webp<\/code> and <code>svg<\/code> to CDN HTML rewrite regex<\/li>\n<li>Add <code>dns-prefetch<\/code> for CDN url<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Enable exclude field to also exclude Lazy Load CSS BG Images class. Useful if we want to put generic class in the Lazy Load CSS BG Images include list<\/li>\n<\/ul>\n\n<h4>1.0.9<\/h4>\n\n<ul>\n<li>Exclude 404 page for Preload Featured Image feature<\/li>\n<\/ul>\n\n<h4>1.0.8<\/h4>\n\n<ul>\n<li>Re-commit to push 1.0.7 update on repo<\/li>\n<\/ul>\n\n<h4>1.0.7<\/h4>\n\n<ul>\n<li>Change the lazy load library from lozad.js to lazysizes.js<\/li>\n<li>Add field to modify lazysize default configuration<\/li>\n<li>Add fields to specify width and height fallback value if the Add Missing Image Dimensions feature failed to get the actual image dimension<\/li>\n<\/ul>\n\n<h4>1.0.6<\/h4>\n\n<ul>\n<li>Bug fixes: sometimes images take too long to appear on woocommerce products shortcode display in some themes<\/li>\n<\/ul>\n\n<h4>1.0.5<\/h4>\n\n<ul>\n<li>Bug fixes<\/li>\n<\/ul>\n\n<h4>1.0.4<\/h4>\n\n<ul>\n<li>Minor fixes: simplifying and add structure to the plugin menu name in the sidebar menu to incorporate our new plugin <a href=\"https:\/\/wordpress.org\/plugins\/optimize-more-css\/\">Optimize More! - CSS<\/a><\/li>\n<\/ul>\n\n<h4>1.0.3<\/h4>\n\n<ul>\n<li>Added lazy loading CSS background image feature<\/li>\n<li>Added option to use no-script fallback<\/li>\n<li>Added option to automatically add loading=eager to the excluded list<\/li>\n<li>Minor fixes: admin css fixes, typo fixes, and plugin screenshot revision<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Minor fixes, plugin banner revision, typo fixes, and plugin screenshot revision<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"A lightweight yet powerful image, iframe, and video optimization plugin. Lazy load, preload, and more. No jquery dependency.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/152100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=152100"}],"author":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/aryadhiratara"}],"wp:attachment":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=152100"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=152100"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=152100"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=152100"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=152100"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=152100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}