Optimize More! – Images

FAQ

Why changing the lazy load library from lozad.js to lazysizes.js?

More configurable.

How to enable lazy loading CSS background images?

Lazy loading css background images requires some effort from your end. Add an extra lazyload 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 lazyload class to the container.

Why is there preload featured image feature?

This actually a good practice to add extra performance boost to your WordPress site.

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.

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.

Preload featured images not working?

It calls images set as featured image in the native WordPress post/pages, using get_post_thumbnail_id() and wp_get_attachment_image_src(). Make sure you already adds them.

If you are using Elementor or other Page’s builders, simply edit the pages with the native WordPress editor to set the featured image.

This plugin preload the wrong image size in my post?

By default, this plugin will be grab the url and preload the full image size and woocommerce_single for WooCommerce single product pages. You can change that using filter if your theme is uses different image size. See example below.

How to change the image size of featured image when using Preload Featured Images feature?

Here are some examples:

add_filter( ‘preload_featured_images_image_size’, function( $image_size, $post ) {
if ( is_singular( ‘post’ ) ) { return ‘large’; }
elseif ( is_singular( ‘product’ ) ) { return ‘full’; }
else { return $image_size; }
}, 10, 2 );

How to change the image file types for CDN HTML rewrite?

Example if you want to add svg:

add_filter( ‘opm_cdn_file_types’, function($opm_cdn_file_types) {
return $opm_cdn_file_types . ‘|svg’;
} );

Example if you want to completely change the default file types:

add_filter( ‘opm_cdn_file_types’, function($opm_cdn_file_types) {
return ‘png|webp|svg’;
} );

Add Missing Image Dimensions not working?

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.