How do I enable WebP support on user uploaded images?

Hi there!

I would like to serve user-uploaded images as WebP to browsers that support it.

Reading the PimCore docs this should work out of the box, without any effort.

But even though I have my Thumbnails on Auto (Web-optimized - recommended), I don’t seem to get any WebP converted image.

Calling the following line in my template
echo $image->getThumbnail('header')->getHtml();

Yields the following output
<picture data-alt="Auf Mini-Donuts werden bunte Streusel gegeben" title="Streusel auf Donuts" data-default-src="/backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts.jpeg"> <source srcset="/backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts~-~768w.jpeg 1x, /backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts~-~768w@2x.jpeg 2x" media="(max-width: 768px)"> <source srcset="/backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts~-~1024w.jpeg 1x, /backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts~-~1024w@2x.jpeg 2x" media="(max-width: 1024px)"> <source srcset="/backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts.jpeg 1x, /backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts@2x.jpeg 2x"> <img alt="Auf Mini-Donuts werden bunte Streusel gegeben" title="Streusel auf Donuts" src="/backen.de/Article/image-thumb__23798__header/Magazin-Hero-Donuts~-~768w.jpeg"> </picture>
So no WebP images and <source type="image/webp">in the generated <picture> tag.

I’ve also tried to create a WebP image from the Asset, on-the-fly without a preconfigured Thumbnail setting, like so
echo $image->getThumbnail(["width"=>1024, "format"=>"webp"])->getHtml();
this line yields the following output

<img width="1024" height="594" alt="Auf Mini-Donuts werden bunte Streusel gegeben" title="Streusel auf Donuts" src="/backen.de/Article/image-thumb__23798__auto_63ec737d2e1123e3886dabc27a73c38b/Magazin-Hero-Donuts.webp" srcset="/backen.de/Article/image-thumb__23798__auto_63ec737d2e1123e3886dabc27a73c38b/Magazin-Hero-Donuts.webp 1x, /backen.de/Article/image-thumb__23798__auto_63ec737d2e1123e3886dabc27a73c38b/Magazin-Hero-Donuts@2x.webp 2x">

So, ok it seems to work, but the generated image is the default PimCore image placeholder
see.:

Generating a JPG from the same Asset on-the-fly works perfectly and yields a visible image.

The source images are uploaded as JPGs.

Also it would be nice to know how to extract the direct path to the WebP version (once I’m able to generate it), because I’m not using $thumbnail->getHTML() in my templates, instead I’ve created my own <picture> template because I’m using mobile-first queries (min-width instead of max-width) and I’m not using x 1, x 2 size versions for high DPI screens (we found that unnecessary for our project as x1 images look just fine on “retina” displays), also I would like to have more control over my HTML templates and not having HTML output coming directly from the framework.

I have ImageMagick 6 installed on my system.
I’m using PimCore 5.6.5
I’m on PHP 7.2.18
The DEV version that I’m debugging is running in a Docker container (standard LAMP images) on an Ubuntu 19.04 host.
All other Thumbnail and image-processing related features seem to work fine.

Thanks in advanced!

Hi @tamaskutiod,

Yes, WebP generation is provided by Pimcore and you can use it pretty effortlessly.
Could you please check your system requirements panel (Tools > System Info & Tools > System-Requirements Check) to see if WebP is enabled on your system?

@aarongerig - This screen gives me an error message because we have disabled calling phpinfo() for security reasons, according to best practices.
But I can call php -i from the command line if I enter my Docker container and all the above modules seem to be enabled.

In the imagick section of the CLI output I see the following:

imagick module => enabled imagick module version => 3.4.4 imagick classes => Imagick, ImagickDraw, ImagickPixel, ImagickPixelIterator, ImagickKernel Imagick compiled with ImageMagick version => ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org Imagick using ImageMagick library version => ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org ImageMagick copyright => © 1999-2017 ImageMagick Studio LLC ImageMagick release date => 20170114 ImageMagick number of supported formats: => 236 ImageMagick supported formats => 3FR, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GROUP4, GV, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV

I don’t see WEBP in the list of supported formats thought. Do I maybe need to install some extra lib on the server or update ImageMagick?

Pimcore calls the check here and tries to write a dummy webp image here. If this procedure fails, your Imagick image adapter doesn’t support webp files.

As far as I know a pimcore docker image needs the gd jpeg-png-webp library to support webp images. This is at least what my docker images uses to support it: https://github.com/dpfaffenbauer/pimcore-docker/commit/71e2482cc04ffc632a7e9907606edf642aa905e3

Hope this helps.