Reply To: WebP images with png fallback

• John Huebner

• April 30, 2021 at 8:41 am

Currently the only way to use webp images in WP is through a 3rd party and WP does not natively support webp images. Until that happens there will likely be nothing in ACF to handle webp images.

You question got me curious if this was possible. So a little story about images and something that I have been doing with ACF images.

So, this is how I currently generate responsive image tags for ACF images, something else that will not happen automatically in WP. There is some explanation included

$post_id = $post->ID;
$image_id = get_field('_thumbnail_id', $post_id, false);
$image = false;
// this is an array of image sizes from the largest size I want to
// be displayed down to the smallest size
// these sizes have custom dimension I have created
$sizes = array('fixed-xs', 'fixed-tiny', 'fixed-xtiny');
$size = false;

// if I have an image ID then see if there is one of a size that I want to display
if ($image_id) {
  // loop though the sizes
  foreach ($sizes as $size) {
    // get the image data for this size
    $test_image = wp_get_attachment_image_src($image_id, $size);
    // see if index 3 is true, this indicates that it is resized
    // and not the URL of the full size image
    if ($test_image[3]) {
      // since the image is resized set it as the image to use
      // and break out of the loop
      $image = $test_image;
      break;
    }
  }
}
// get the page title
$title = get_the_title($post_id);
// get the images alt value
$image_alt = '';
if ($image) {
  $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
}
if (!$image_alt) {
  // if the image does not have an alt set all to post title
  $image_alt = $title;
}
if ($image) {
  // image was returned
  // construct an image tag that is 
  // the same as the image tag that WP would insert into the content
  $image_tag = '<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].
                '" alt=" '.$image_alt.' " title="'.$image_alt.
               '" class="size-'.$size.' wp-image-'.$image_id.'" />';
               
  // make the image tag responsive
  // using built in WP function
  // this function normally runs on "the_content" hook
  // there is 2 ways to do this, an older way and a newer way
  if (function_exists('wp_filter_content_tags')) {
    // the new WP function exists, use it
    $image_tag = wp_filter_content_tags($content);
  } else {
    // older WP installation, use old function
    $image_tag = wp_make_content_images_responsive($content);
  }
} else {
  // no image was returned, use a default image in the theme
  $url = get_template_directory_uri().'/assets/image/No_Image_Available.jpg';
  $image_tag = '<img src="'.$image[0].
               '" width="450" height="337" alt=" '.
               $image_alt.' " title="'.$image_alt.'" />';
}
// output the image tag
echo $image_tag;

The reason I give you that is that I am already using a filter to to a lot of the work of creating responsive images. So what I looked for is a plugin that lets you use webp images in WP and looked to see if there is a filter or function in that plugin that can be called from code that does whatever it is that the plugin does when “the_content” is filtered.

I found this one https://wordpress.org/plugins/webp-express/. I am not endorsing this plugin, I have never used it. This plugin has a function that you can call to alter the HTML. That function is webPExpressAlterHtml() If I chose to use this plugin I think that I could add to my code the following

$image_tag = webPExpressAlterHtml($image_tag);

However, this is only speculation and it would need to be tested.

There may be other plugins that also allow this as well.