How to generate img secret including webp versions

@jtiebel Just use https://developer.www.ads-software.com/reference/functions/wp_get_attachment_image/ and you have a image tag with the correct srcset.

Keep in mind this plugin only works for new uploaded images. To compress all your old images i suggest wp-cli: https://developer.www.ads-software.com/cli/commands/media/regenerate/

@jtiebel WordPress defines srcset image variations, and they can include WebP just as they do JPEG images.

As noted above, WebP images are working fine for?the wp_get_attachment_image_srcset( $attachment_id )?function.?

If you continue to have troubles with this, please could you share an example URL? Let me know if you have any further questions.

Hi together

fist of all thank you for your quick replies.

I tried, but failed. I see only .jpg in the image srcset, but not the .webP files.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : 
        the_post();

        $featured_image = wp_get_attachment_image(
            get_post_thumbnail_id(),
            'full', 'medium', 'thumbnail', 
            false,
            array(
                'class' => 'post-image', 
                'srcset' => true,
            )
        );

        echo $featured_image;

    endwhile;
endif;
?>

the plugin is doing a good job and creates webP files when uploading new images. I see them in the upload folder.

However, they do not show up in the srcset on frontend:

<img 
    width="2560" 
    height="1707" 
    src="/wp-content/uploads/2024/03/dackel-postcard-scaled.jpg" 
    class="attachment-full size-full not-transparent" 
    alt="" 
    thumbnail="" 
    decoding="async" 
    fetchpriority="high" 
    srcset="
        /wp-content/uploads/2024/03/dackel-postcard-scaled.jpg 2560w, 
        /wp-content/uploads/2024/03/dackel-postcard-800x533.jpg 800w, 
        /wp-content/uploads/2024/03/dackel-postcard-1100x733.jpg 1100w, 
        /wp-content/uploads/2024/03/dackel-postcard-500x333.jpg 500w, 
        /wp-content/uploads/2024/03/dackel-postcard-768x512.jpg 768w" 
    sizes="(max-width: 2560px) 100vw, 2560px" 
    data-has-transparency="false" 
    data-dominant-color="e0ddb9" 
    style="--dominant-color: #e0ddb9;"
>

Sorry, hope you can further assist on this. I am not a wp professional – I do my very best.

@jtiebel Thank you for your response and the information you have shared. You mention that you see only .jpg in the image srcset, but not the .webP files. It’s possible that this is because the WebP Uploads plugin has identified that the WebP version of the uploaded JPEG image would have a larger file size than the original JPEG image, so it does not generate the WebP version.

You could test this by trying with this image: https://www.gstatic.com/webp/gallery/4.jpg, taken from?this URL. This image should be converted to WebP.

I’d also be happy to test this myself if you could share the images that you have been using. Let me know if you have any questions about the above.

Hi Adam. Thanks much. All webP images from my test above are significantly smaller than the corresponding .jpg versions.

Playing around with the issue to solve it myself I found out, that for example the below code is working. I get all images including the webP in the src set.

<?php the_post_thumbnail( 'medium', array( 'itemprop' => 'image', 'sizes' => '(max-width: 768px) 800px, 1500px') ); ?>

Further I switched back from my custom theme to a WP Std. theme to make sure that the problem is not coming from this. Here we go. Using twentytwentyfour for example, the issue is solved. Something seems to be wrong with my template… I have to dive into it…

As far as I see the plugin is working properly as expected.

@jtiebel Nice troubleshooting on your side! Thanks for sharing the insights here and I am glad you found the cause and the plugin is working as expected as you say.

All the best with your digging into the theme and if you have any further questions on the WebP uploads plugin, be sure to reach out and we will be happy to help.

One additional question in this context. Adding an image to a post with the std. Gutenberg block “Image”, I get no srcset and src is always set to “large”. Based on which rule this is happening? And can I influence this?

@jtiebel Thanks for following up with your question. As this isn’t specifically related to the WebP upload plugin and rather a generic WordPress question. I’d suggest checking this in one of the following WordPress support forums:

• Fixing WordPress forum
• Everything else WordPress forum

If there’s anything else WebP Uploads related that I can help you with then please let me know.

Hi Adam,

I need to come back. I further tested and have to conclude that wp_get_attachment_image() and wp_get_attachment_image_srcset() is not working as expected on my side.

Prerequisites:
– The plugin is installed.
– In settings both, .jpg and .webP is activated before image upload
– All images uploaded after Plugin Installation
– Tested with different themes, including twentytwentythree (std. theme)

When uploading a new .webP image, webP versions are generated in all defined sizes and wp_get_attachment_image() and wp_get_attachment_image_srcset() include the .webP versions of the images in the srcset => (check, as expected).

When uploading a new .jpg image, both versions .jpg and webP versions are generated in all defined sizes. But both functions: wp_get_attachment_image() and wp_get_attachment_image_srcset() only include the .jpg versions of the images in the srcset! When I use the_post_thumbnail() it’s working as I expect: then both jpg. and webP versions are in the srcset.

Why webP versions are not included in the srcset when using wp_get_attachment_image() and wp_get_attachment_image_srcset() if the original image was a .jpg and both jpg. and webP versions are available?

Best, Jakob

• This reply was modified 7 months, 1 week ago by Scardelant.
• This reply was modified 7 months, 1 week ago by Scardelant.

@jtiebel The plugin doesn’t make any changes to how responsive images work. See this guide on responsive images for more information.

You could also check the behaviour of images when adding and rendering using the Health Check plugin to see if there are any plugins impacting the output and conflicting. You can do this by following these steps:

1. Login to your live site from a Chrome browser incognito window.
2. Install and activate the Health Check & Troubleshooting plugin.
3. Navigate to “Plugins > Health Check & Troubleshooting > Troubleshoot”.
4. From the same screen click on the “Available Plugins” tab at the top right and then click on the “Enable” option next to “WebP Uploads“.
5. Attempt to upload an JPEG image.

Let me know how you get on with the above.

Hi Adam

I use the example given in the guide on responsive images. I use for example image id 81, a .jpg upload with both, jpg and webP image versions available on the server (checked it before, webP are smaller than jpg etc.).

$img_src = wp_get_attachment_image_url( 81, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( 81, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="Foo Bar">

This is what I see in the browser:

<img src="/uploads/2024/03/f79242252abc335ecd16-800x800.jpg" srcset="/uploads/2024/03/f79242252abc335ecd16-800x800.jpg 800w, /uploads/2024/03/f79242252abc335ecd16-1100x1100.jpg 1100w, /uploads/2024/03/f79242252abc335ecd16-500x500.jpg 500w" sizes="(max-width: 50em) 87vw, 680px" alt="Foo Bar">

Let me ask a different question. Should this code normally return webP images if they are available on the server alongside jpg versions and the browser supports webP? As I understand it, yes. In the end, however, this is not the case.

Apart from acf, I have not installed any plugins. The WP instance is completely blank.

Can you confirm from your experience that this should normally work? Or can you give me an example where the output works accordingly via wp_get_attachment_image()?

Update: Loading the same image not as an attachment, but inside the post loop with the_post_thumbnail() webP images are included.

<img width="800" height="800" src="/uploads/2024/03/f79242252abc335ecd16-800x800-jpg.webp" class="attachment-medium size-medium not-transparent wp-post-image" alt="" itemprop="image" sizes="(max-width: 768px) 1500px, (max-width: 2000px) 1500px, 1500px" decoding="async" srcset="/uploads/2024/03/f79242252abc335ecd16-800x800-jpg.webp 800w, /uploads/2024/03/f79242252abc335ecd16-1100x1100-jpg.webp 1100w, /uploads/2024/03/f79242252abc335ecd16-500x500-jpg.webp 500w" data-has-transparency="false" data-dominant-color="828282" style="--dominant-color: #828282;">

• This reply was modified 7 months, 1 week ago by Scardelant.

@jtiebel Thanks for the follow up and the information you have shared. To check things further, could I please ask you to share your?Site Health information?and site URL here and I can run some checks. Once I have done so I can get back to you with an update.

Here a complete blank WordPress installation.

See example with code and result: https://h44633.web157.dogado.net/wordpress/?page_id=2

Issue as described.. If you want I can give you access to the admin panel.

@jtiebel Unfortunately it’s against forum guidelines to share site credentials. Thanks for sharing the above. Could you please also share the ?Site Health information as requested above and I can look into this further.

doing this, first of all I receive a message: When enabling the plugin, webp-uploads, a site failure occurred. Because of this the change was automatically reverted.

I can force activation and get the message: The webp-uploads plugin was forcefully enabled.

I upload a jpg and can see it in the media folder…

all steps done. Is there a report or something like this?

• This reply was modified 7 months, 1 week ago by Scardelant.