Using image_editor_output_format

  • Topher

    (@topher1kenobe)


    1 year, 6 months ago

    I’m trying to learn how to use image_editor_output_format . I have this kind of thing working fine:

    function map_jpeg_to_webp( $mappings ) {
    $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
    };
    add_filter( 'image_editor_output_format', 'map_jpeg_to_webp' );

    That makes copies of my jpgs, so now I have a bunch of webp files

    but the media library doesn’t know about them and i can use them.

    What do I do with all these webp files now?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator threadi

    (@threadi)

    1 year, 6 months ago

    This should happen automatically as soon as WordPress recognizes that webp images are present in the frontend. However, a theme or plugin could still influence this. I would recommend that you switch to a standard theme as a test and also check the active plugins.

    Thread Starter Topher

    (@topher1kenobe)

    1 year, 6 months ago

    I’ve switched to 2021 and deactivated all my plugins, but it still only interacts with the jpgs.

    Moderator threadi

    (@threadi)

    1 year, 6 months ago

    The webp files are generated for the thumbnails that are used in the frontend. My guess is that you are not looking at the thumbnails but at the original images.

    With the 2021 theme without any plugins, I was able to reproduce this in the following way:

    1. integrated your code from above into the project.
    2. uploaded an image file.
    3. checked via FTP that it was generated as webp – yes, several webp thumbnails were generated for it.
    4. create a new page and select the image you just uploaded. Resolution set to Medium.
    5. viewed the new page in the frontend: the webp image for 241×300 is displayed there.

    With this hints you may be able to see where you are experiencing problems.

    Thread Starter Topher

    (@topher1kenobe)

    1 year, 6 months ago

    I might have a clue. I still get a jpg when I ask to save the image. But my HTML has this

    img fetchpriority="high" decoding="async" width="300" height="300" src="http://slugs.local/wp-content/uploads/2024/07/hari-shanker-300x300@2x-300x300.webp" alt="" class="wp-image-2407" srcset="http://slugs.local/wp-content/uploads/2024/07/hari-shanker-300x300@2x-300x300.webp 300w, http://slugs.local/wp-content/uploads/2024/07/hari-shanker-300x300@2x-150x150.webp 150w, http://slugs.local/wp-content/uploads/2024/07/hari-shanker-300x300@2x.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"

    So is it serving webp to the browser, but when I ask for download, giving me jpg?

    Moderator threadi

    (@threadi)

    1 year, 6 months ago

    The only jpg in the srcset is used for resolutions above 600w. You are obviously missing a thumbnail generation there. This in turn depends on the theme and possibly also on the plugins you use. But the rest is fine 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Using image_editor_output_format’ is closed to new replies.

Tags