WooCommerce + Jetpack: Exclude Image From “Lazy Load”

If you don’t use an “Image Lazy Load” plugin, it’s time you install one. And if you happen to pick Jetpack’s free Lazy Load module, you probably did the right thing.

However, since I installed Jetpack Lazy Load, I noticed a little “jump” in my Storefront theme header section, where in fact there is an image – my Business Bloomer logo. The same might apply to any WooCommerce image: a category thumbnail, a single product featured image, a cart icon in the header, a homepage hero image, and so on.

Thankfully Jetpack has a useful “filter” you can tap into in order to exclude image classes from lazy loading (yes, I found this out today, it’s not that I know everything!). So, here’s the fix. Enjoy 🙂

PHP Snippet: Exclude Image e.g. Logo From Jetpack Lazy Load

/**
 * @snippet       Avoid Lazy Loading an Image - Jetpack
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 5
 * @donate $9     https://www.tutoraspire.com
 */

add_filter( 'jetpack_lazy_images_blacklisted_classes', 'tutoraspire_exclude_custom_logo_class_from_lazy_load', 9999 );

function tutoraspire_exclude_custom_logo_class_from_lazy_load( $classes ) {
$classes[] = 'custom-logo';
return $classes;
}