Support » Plugin: Imagify – Optimize Images & Convert WebP » Get webp image url to use as background image

  • Resolved katmacau

    (@katmacau)


    Hello. Your plugin is working when I use wp_get_attachment_image to display an image in my theme.

    However, there are instances where I use wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ), 'large') for example to get the image URL. This is still returning the jpg version of the image. Can I get the webp url returned?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author WP Media

    (@wp_media)

    Hey @katmacau,

    I have just tested this on my end by adding the code to one of my page templates. It worked, WebP is delivered.

    So, I used the exact code you mention:

    wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ), 'large');

    And set the Featured image to page/post. Then optimized image (as it was not optimized in my case) and made sure WebP exists for that one. It worked fine.

    I used <picture> tag method to deliver it. Can you check again or provide any other info that could be useful to debug the problem?

    Thanks!
    Marko

    Thread Starter katmacau

    (@katmacau)

    Thanks Marko

    In my instance I am getting the image URL and adding as a css background image and not an image on the page. For example:

    `
    $post_id = get_the_ID();
    if( has_post_thumbnail( $post_id ) ) {
    $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ), ‘large’);
    $thumb_url = $thumb_url[0];
    ?>
    <div class=”single-hero-image” style=”background-image:url(<?php echo “$thumb_ur”; ?>Text…</div>
    <?php
    } ?>

    However, instead of getting the webp file, I get https://mysite.com.au/wp-content/uploads/myimage-1100×825.jpg.

    Thanks

    Plugin Author WP Media

    (@wp_media)

    Hey @katmacau

    Thanks, that makes things more clear. It is not possible to fetch background images using <picture> tags at the moment (not only with Imagify, but any other similar tool as far as I know).

    So that’s the main problem.

    If you don’t use CDN/Cloudflare or some extensive server caching solution, you might consider using rewrite rules method as it would fetch background images as well.

    ​Let me know if you need any further assistance, I am happy to help.

    Best Regards,
    Marko

    Thread Starter katmacau

    (@katmacau)

    Thanks. So you cannot get the url or of the webp version of the file using any of the get image related wordpress functions?

    Do you mind please explain how I would use the picture tag to display a posts featured image on the page?

    Plugin Author WP Media

    (@wp_media)

    Hey @katmacau

    The problem is the way you are delivering it on the front-end. If you deliver it standard way using <img src..., it will work.

    If you add it using CSS (as background image), it will not work.

    The thing is, you could “hack” the system by appending .webp to the source you get, but this is a problem for browsers that do not support WebP (it’s minority of browsers but still…).

    > Do you mind please explain how I would use the picture tag to display a posts featured image on the page?

    If you use it not as a background image, it will work. Or you can use rewrite rules method as I explained.

    Let me know what you think.

    Best Regards
    Marko

    Thread Starter katmacau

    (@katmacau)

    I see now. If I use the standard wp_get_attachment_image($image_id,'medium') wordpress function it will actually add in the picture tag and webp format.

    I will switch my layout to use the images as picture tags that site under content instead of css backgrounds.

    Thanks Marko.

    Plugin Author WP Media

    (@wp_media)

    Hey @katmacau

    Thanks for confirmation!

    Don’t hesitate to get in touch if you need any further help.

    Best Regards
    Marko

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Get webp image url to use as background image’ is closed to new replies.