DEV Community

How to preload images in WordPress

Jackson Lewis on April 19, 2021

Isn't it fun, the never ending game of web performance! This post will be looking using preload on images, and more specifically at preloading the ...

Read full post

christopher-bio • Aug 9 '21 • Edited

Thank you so much for this outstanding code!

For those of you using Web P Express without automatic conversion that want to check, whether an image exists, before replacing the URLs:

Add this function:
function get_webp_url_if_available_own($url){
$webp_url = $url . ".webp";
$webp_url_folder = str_replace("/uploads/", "/webp-express/webp-images/doc-root/wp-content/uploads/", $webp_url);

if (@getimagesize($webp_url_folder)) {
$url = $webp_url_folder;
}
return $url;
}

and this part after the srcset has been initialed:
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
// webp is supported!
$src = get_webp_url_if_available_own($src);
$src_split = explode(", ", $srcset);

foreach ($src_split as $key => $src_single) {
$src_single_split = explode(" ", $src_single);
$single_img = $src_single_split[0];
$single_img = get_webp_url_if_available_own($single_img);
$src_single_split[0] = $single_img;
$src_split[$key] = implode(" ", $src_single_split);
}

$srcset = implode(", ", $src_split);
}

Hope it works for you and would appreciate feedback, if it does not.

Bettylex • Jun 24 '21 • Edited

Thank you very much for this wonderful code! It's exactly what I've been looking for and couldn't find anywhere.

For those of you using Webp Express, I've found a workaround:

Replacing: "printf( '', esc_url( $src ), $additional_attr );"

With: "if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
$srcw = str_replace( '.jpg','.jpg.webp', $src );
$additional_attrw = str_replace( '.jpg','.jpg.webp', $additional_attr );
printf( 'link rel="preload" as="image" href="%s" %s/', esc_url( $srcw ), $additional_attrw );

} else { printf( 'link rel="preload" as="image" href="%s" %s/', esc_url( $src ), $additional_attr ); }"

Str_replace can be modified to add more image formats.

I know it's not the cleanest solution, but I couldn't find any other. I haven't checked yet but, if using a CDN like Cloudflare or a preloading cache function like WP Rocket's, it may require separate webp caching to work cross browser.

PS: I hade to remove the "<" and ">" chars in the link tag so that it doesn't disappear in this comment. Restore them before adding this to your functions.php.