Deliver additional webp images

1

I would like to deliver additional webp images for Chrome browsers.
Though Apache has been configured the webp images aren’t being loaded.
What’s wrong?

2

What did you try as for now?

A simple setup would be to serve jpeg or png images, and install mod_pagespeed for apache, which will serve webp version of images to chrome users automatically.

3

Hello Paul,
thank you for reply.
I have configured the webserver via .htaccess.

I’m using jpg files and I have added .webp versions into the folders, where the original jpg images are (e.g. /user/pages/01.home/_page1/image_main.webp
for /user/pages/01.home/_page1/image_main.jpg).
When I look at the source code unfortunately the webp are not loaded but the .jpg images are reprocessed within Grav to an jpEg and with different quality, size and output name (e.g. /images/a/1/7/b/a/b27da9f43155858296e64b8baeb66c795775c2d6-image_main.jpeg).

The best would be if Grav let me handle the images myself

4

Did you add this as a valid type in Grav’s media.yaml configuration? Grav won’t be able to process these like jpg/png, but it should be able to at least output the image tag for them.

5

I’m re-opening this old thread because I thought Grav v 1.7 had webp support, but I can’t make it show webp images on my site, even though our Apache server supports them and I have added the entry in the media.yaml file. How do you use them?

Thanks in advance

6

@marcocevoli, Grav 1.7 does indeed seem to support webp images.

  • Fresh install of Grav 1.7.5
  • Copied a webp image from Google webp gallery into ‘/user/pages/02.typography/’
  • Added the following snippet to ‘/user/themes/quark/templates/default.html.twig’:
    {{ (page.media|first).html | raw }}
  • Browsed to localhost/typography and image is shown.

Note:

  • I made no changes to Grav’s config files.
7

Awesome!
What would the best strategy be if you want to serve webp images only to browsers that support that format?

I’ve found this code for HTML on Using WebP Images | CSS-Tricks

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

but I don’t how to tell Grav to pick one or the other… For instance, my current template for blog page goes like this:

<img src="{{ child.media.images|first.cropZoom(1920,900).cache.url() }}" class="img-responsive" alt="" />

(ignore the missing alt value)

How can I tell Grav to pick webp, supposing both files have the same name?

TIA

Marco

8

@marcocevoli, According to caniuse, webp images are supported by 92% of all users worldwide.

Only IE and KAIOS browsers do not support it. And Safari 14 supports it partially.

You might ask yourself: “Is it worth the effort?”

If it is, you might give the following a try In Twig:

<picture>
  {# Reverse the sort order, to get webp first #}
  {% for img in page.media.images|reverse %}
    {% set url = img.cropZoom(1920,900).cache.url() %}
    {% set mime = img.mime %}

    <source srcset="{{ url }}" type="{{ mime }}">

    {% if loop.last %}
      <img src="{{ url }}" alt="Alt Text!">
    {% endif %}
  {% endfor %}
</picture>

Which yields:

<picture>
  <source srcset="/images/...-image.webp" type="image/webp">
  <source srcset="/images/...-image.jpg" type="image/jpeg">
  <img src="/images/...-image.jpg" alt="Alt Text!">
</picture>
1 Like
9

9 posts were split to a new topic: WebP images do not show up