Server not serving webp images

Kirby 3 Questions 🤔
1

Hi there,

i am using “Convert JPG and PNG to WEBP Plugin” from Felix Häberle. Images are converted to webp by uploading a jpg or png. this works well. xyz.jpg becomes xyz.webp
i have inserted in the htaccess the code which can be found several times in the web:

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

and i am using the srcset feature of kirby to output images.
unfortunately i cannot see any webp images in the network tab of chrome, only jpg images are served. if i choose webp as image source the output as webp works. i thougt that the htaccess redirect will serve webp if supported. could anybody help please?

2

can there be a problem with the “media” folder? the webp image is not created in the “media” folder, only in the content folder.

3

new status:
if we copy the webp from content to media and rename it to the full name of the used jpg, which is created in the media folder, the htaccess rules are applied and the browser serves the webp image.
does anybody know, how we could create the webp images in the media folder automatically as well as the jpg is created?

4

$file->publish() copies a file to the media folder, so this is probably what should happen with the image after it is created.

However, I’m not sure how this will work for thumbs.

5

could you give me an example, how we could use this function please?

6

we also just found out that a webp linked in the panel is not copied into the media folder and no different sizes of the srcset options are created there. this means that although the webp is displayed in the browser, it is physically only in the content folder in one size. is this correct and intended?

7

I think this would have to go into the plugin. But since I’m not familiar with the plugin…

Images in the content folder are always just the originals. The originals are copied to the media folder. And different sizes are only created in the media folder when you use the thumbs method (resize, crop, scrset…).

8

@jimbobrjames What exactly does your WebP plugin do? Could this be an alternative?

9

this is what we do, we use srcset to deliever responsive optimized image sizes.
the webp images ignore this setting of srcset. :wink:

10

Are you testing this on a server or your local dev environment? What is your environment?

What are the steps to reproduce?

11

Hi @texnixe,

currently we are working on a local dev environment with MAMP on Apache with PHP 7.4.2.
This environment is pushed to Bitbucket and from there published on a vserver with plesk.

do you need any other informations?

12

Mine does not use any htaccess tricks to serve the images by finding a webp when jpg etcs are requested. It converts PNG and JPG to Webp on upload and stores it in the content folder alongside the source file, so you can treat like any other image file and its up to you to use it in srcset tags etc (there is i snippet in the plugin that will do this for you, or you can copy it and make it your own.)

Most versions of Safari (apart from the most recent) do not support WebP anyway, so forcing webp through htaccess is a bad idea. You need the fall back image still.

13

Hi @jimbobrjames,
this is why we use jpg or png and if supported webp via htaccess redirect.

is there a way to use webp in srcset with a jpg/png fallback?

thanks!

14

With my plugin, yes, it has a snippet that is ready to go, but it depends on some file methods in my plugin so wont work without. You should not install it at the same time as the other one, since they both do server side conversion and you might run into craziness, or out of memory :slight_smile:

15

thank you! i found your plugin and installed it.
the snippet works really good.
could you answer 2 questions please:

  1. webp images are not really resized, there are json files with dimensions settings. but it is always the original webp image, which is loaded even on mobile phone. right?
  2. the fallback image has a width and height property. is it possible to leave these properties blank, so that the original size is chosen?

thank you very much!

16

The snippet in the plugin is a good starting point, and all that is needed for most people. I sometimes use the variant below, which depends on the Focuscrop plugin…

It also maintains the height on 16:9 ratio images, so you may have to tweak that part. The image tag at the end which gives you src set on the fallback image is the important bit really - im just giving the whole snippet so you can see it in context.

<?php
$webp = $src->toWebp();
$variants = $src->toVariants()->filterBy('extension', '!=', 'webp');
$source = $src->toSource();
?>

<picture class="<?= $class ?>">

    <?php foreach ($sizes as $max): ?>


        <source
            media="(min-width: <?=$max?>px)"
            type="image/webp"


            srcset="<?=
              $webp->focusSrcset([
                $max . 'w' => [
                    'width' => $max,
                    'height' => ($max / 16) * 9,
                ],
              ]);
            ?>"

            alt="<?=$webp->alt()?>"
        />
    <?php endforeach?>

    <?php foreach ($variants as $variant): ?>
        <?php foreach ($sizes as $max): ?>
            <source
                media="(min-width: <?=$max?>px)"
                type="image/<?=$variant->extension()?>"

                srcset="<?=
                  $variant->focusSrcset([
                    $max . 'w' => [
                        'width' => $max,
                        'height' => ($max / 16) * 9,
                    ],
                  ]);
                ?>"

                alt="<?=$variant->alt()?>"
            />
        <?php endforeach?>
    <?php endforeach?>




  <img
    src="<?= $source->focusCrop($width, $height)->url() ?>"
    alt="<?=$source->alt()?>"
    srcset="<?=$source->focusSrcset([

        '1920w' => [
            'width' => 1920,
            'height' => 1080,
        ],
        '1140w' => [
            'width' => 1140,
            'height' => 640,
        ],
        '640w' => [
            'width' => 640,
            'height' => 360,
        ]
      ]);
    ?>"
  >

</picture>

Can call it in a template like this, assuming you called the Snippet “webp” in the usual snippets folder, and your images are in a field called gallery…

<?php foreach($page->gallery()->toFiles() as $image): ?>
  <?= snippet('webp', ['sizes' => [1920, 1140, 640, 320], 'src' => $image, 'type' => 'png', 'class' => 'picturetagclass', 'width' => 800, 'height' => 600]) ?>
<?php endforeach ?>
17

The plugin uses the source jpeg/png dimensions, and generates a webp from it on a file upload hook. It wont update the webp if you replace the jepg (yet! i hope to add that features)

So the best way is to make sure the jpeg/png is the right size when you upload. However, you can use normal file methods on the webp once it has been generated.

Generally i upload jpegs around 2,000px wide so that i end up with a webp to match, and both are plenty big enough for room when using the resize and crop methods.

18

It might break, but you could try passing null on the width and heights on the snippet. Or make a snippet of ur own without the width and height on it :slight_smile: