Support

Account

Home Forums General Issues WebP images with png fallback

Solving

WebP images with png fallback

  • Hi, I’m hoping to update our pages that currently have png images to use webp images, with the png images as fallback if the user’s browser doesn’t support webp. Is that possible with ACF? We have a PRO membership if that matters. I can edit the code within ACF if necessary, but an out-of-the-box solution would be better if that exists.

    Thank you!

  • 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.

  • Did some testing with the plugin I mentioned.

    
    $image_tag = apply_filters('post_thumbnail_html', $image_tag );
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.