WebP images do not show up

Support
1

I can’t get webP images going on my site. I am using lazyloading, lots of different srcset sizes and progressive jpeg rendering. Is anyone having an Idea, why webp images do not even show up? (not to mention in the wrong order.

{% for image in p.media.images %}
	<picture>
		{% set service_image = image.derivatives(750,2900,700).enableProgressive().sizes('100vw') %}
		<img class="lazyload"
			data-src="{{ service_image.url(false) }}"
			data-srcset="{{ service_image.srcset(false) }}"
			sizes="{{ service_image.sizes(false)}}">
	</picture>
{% endfor %}

output is as desired for jpgs, but no webp images anywhere.

<picture>
	<img class=" lazyloaded" data-src="image.jpg" 
	data-srcset="image750w.jpg 750w, image1450w.jpg 1450w, image2150w.jpg 2150w, image2850w.jpg 2850w, image.jpg 5359w" 
	sizes="100vw" 
	srcset="image750w.jpg 750w, image1450w.jpg 1450w, image2150w.jpg 2150w, image2850w.jpg 2850w, image.jpg 5359w"src="image.jpg">
</picture>

I think the documentation is not updated yet, could that be? I couldn’t find anything on webP images in the media section.

2

@luap, I cannot reproduce your issue using Grav 1.7.5 + Quark.

Used your code snippet in default.html.twig and picture elements are being generated for both *.jpg and *.webp images.

Does {{ dump(p.media.images) }} show the *.webp image?

3

@anon76427325 thank you for checking my code. I am not using Quark, but wrote a template myself.

Via dump I also don’t see the webP image, and also Grav did not even start to generate webp images (that I would notice in lagging reload because I have quite some images on the page).

01 Testimage.jpg" => Grav\Common\Page\Medium\ImageMedium {#306
    #gettersVariable: "items"
    #items: array:15 [
      "type" => "image"
      "thumb" => "media/thumb-jpg.png"
      "mime" => "image/jpeg"
      "filepath" => "/....../user/pages/02.Testimage/01 Testimage.jpg"
      "filename" => "01 Testimage.jpg"
      "basename" => "01 Testimage"
      "extension" => "jpg"
      "path" => "/....../user/pages/02.Testimage"
      "modified" => 1586807733
      "thumbnails" => array:2 [
        "default" => "/....../system/images/media/thumb-jpg.png"
        "media" => "/....../user/pages/02.Testimage/01 Testimage.jpg"
      ]
      "size" => 2507977
      "debug" => false
      "width" => 5568
      "height" => 3712
      "image" => Grav\Common\Page\Medium\ImageFile {#311
        #cacheDir: "cache/images"
        #cacheMode: null
        #adapter: Gregwar\Image\Adapter\GD {#315
          #source: Gregwar\Image\Source\File {#755
            #file: "/....../images/0/8/6/a/1/086a15af524149451b77bb2c44933ac29033b992-01-Testimage.jpg"
          }
          #resource: null
        }
4

@luap,

  • It seems that p.media.images does not contain the *.webp image.
    Are you sure the folder of the page does contain the webp image?
  • How did you create p.media.images.
    The fact that you are using p instead of page makes it suspicious to me.
  • Which theme are you using?
  • Are there any errors in /logs/grav.log
  • Are there any errors in the logs files of Apache?
5
  • It seems that p.media.images does not contain the *.webp image.
    Are you sure the folder of the page does contain the webp image?

Maybe there’s a misunderstand from my side. I didnt create or upload any webp images. I thought Grav creates them for me.

How did you create p.media.images .

They’re just the media within the pages. I call them in a page collection, the entire website is a onepager, no seperate pages.

There are no logs either in Clockwork nor in apache.

6

@luap, Grav does not create webp images for you. You will have to upload them yourself like any other image format.

7

@anon76427325 Thanks for that clarification. I just assumed, Grav would provide webps of jpegs as derivates for Chrome/FF users. I hope support for this feature comes in the future.

8

I hope not :slight_smile: Webp is a completely different image format with different algorithm. It’s not a version of an image, but rather a completely different image which needs a conversion. Like JPEG and PNG.

BTW, it totally depends on an image. Some webp images look way worse than same size jpegs. Webp might not have artifacts jpeg has, but webp is completely washed out if image has lots of detail

9

@Karmalakas I know, that’s why I’d like to have some sort of control over it, being able to turn that off/on.