PThumbTransparent WebP Images

OK thanks - I will check which versions I’m on.

1 Like

Hi again - so this is the spec I have - it seems webP is NOT supported on mine either!!

GD Support => enabled
GD Version => bundled (2.1.0 compatible)
Imagick compiled with ImageMagick version => ImageMagick 6.7.8-9 2016-06-16 Q16 http://www.imagemagick.org
Imagick using ImageMagick library version => ImageMagick 6.7.8-9 2019-08-08 Q16 http://www.imagemagick.org
ImageMagick copyright => Copyright © 1999-2012 ImageMagick Studio LLC
ImageMagick release date => 2019-08-08
ImageMagick number of supported formats: => 209
ImageMagick supported formats => 3FR, A, AAI, AI, ART, ARW, AVI, AVS, B, BGR, BGRA, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DCM, DCR, DCX, DDS, DFONT, DNG, DOT, DPX, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FITS, FRACTAL, FTS, G, G3, GIF, GIF87, GRADIENT, GRAY, GROUP4, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, ICB, ICO, ICON, INFO, INLINE, IPL, ISOBRL, J2C, J2K, JNG, JP2, JPC, JPEG, JPG, JPX, K, K25, KDC, LABEL, M, M2V, M4V, MAC, MAP, MAT, MATTE, MEF, MIFF, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, O, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG24, PNG32, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RGB, RGBA, RGBO, RLA, RLE, SCR, SCT, SFW, SGI, SHTML, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UIL, UYVY, VDA, VICAR, VID, VIFF, VST, WBMP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, Y, YCbCr, YCbCrA, YUV

1 Like

Sorry if this is opening up an older thread, but does anyone think the use of imagewebp() function could accomplish this task and be integrated into pthumb? It’s beyond what I can do myself, but does at first glance seem like an option as far as expanding pthumb’s capabilities. Google speed rankings seem to take this into account now, Lighthouse as well, and it would be very useful. Even if Modernizer JS or use of the element is needed for fallbacks on safari and older ie/edge browsers, it would still be a great feature.

1 Like

Is webp installed on your server?
e.g. sudo apt install webp

1 Like

Yes WebP is installed on the server - it seems like it’s a limitation with pThumb itself.

Might be worth adding an issue to the resizer repo.

For now perhaps disable resizer in pThumb.

Thanks - the system setting useResizer is already set to NO.
I will add the issue to the resizer repo though

Thanks

UPDATE: So - Although useresizer system setting is set to know, the resizer extra was still installed.
I have now uninstalled resizer to see what happens.

It outputs a file with a webP extension, but it was doing that before.The problem is that I can’t be sure the file is actually a webP file type, or whether Modx has just given it the webP extension.

Does anyone know how to test a file to see if it is in fact a webP file?

Hm, I try something similar, now in 2021!
Using webP works with pthumb but without Resizer.
But is doesn’t use the parameter for compression, q seems to be only for jpg.
The docs of phpthumb seems to be outdated:


Any clue, anyone?
[[pthumb?
&input=`[[+url]]`
&options=`w=780&sfn=0&f=webP&q=65`
&useResizer=`0`
&toPlaceholder=`bigImage1`
]]
<img src="[[+bigImage1]]" width="780" alt="PDF" />
PDF

Oh, it’s q=0.7 (vom 0 to 1) :roll_eyes:

Hi @andywizz,

Re. The q= value between 0 and 1, is this for WebP with Resizer off specifically, as I have always used values between 0 - 100 and the docuentation you linked indicate the range is the same:

“q = JPEG compression (1=worst, 95=best, 75=default)”

Just want to check before making any changes on multiple websites :slight_smile:

webp didn’t work with q=70, jpg does, pthumb created pictures with very low quality, that’s how I recognized it.
webp didn’t work with resizer on either, I had to turn it off by resizer=0
But be careful, creating WebPs is very time-consuming for the server. Taking 20 images, about 4-7 MB, generating a couple of sizes each and I had a time off!!!
Using jpgs its 0-100 of course.

Came here looking for the solution for transparent PNG to WEBP.

pthumb works just fine generating webp images, just no transparency.

You might want to check those converted webP files though.
I thought it was working because the file names ended in webP - but was confused that the files were quite large. It turned out they weren’t webP files at all - they had the extension but when I changed it manually to jpg I could open them in photoshop. They were just standard jpgs!

Unless it’s updated since I tried but worth checking the webP files are actually the correct format.

When I use inspector in Chrome the png is 436kB, the webp is 46kB.

<picture>
  <source srcset="[[!pthumb? &input=`images/frontpage/phone.png` &useResizer=`0` &options=`&f=webP&w=460`]]" type="image/webp">
  <source srcset="[[!pthumb? &input=`images/frontpage/phone.png` &useResizer=`1` &options=`&f=png&w=460`]]" type="image/png"> 
  <img class="img-responsive center-block" src="[[!pthumb? &input=`images/frontpage/phone.png` &useResizer=`1` &options=`&f=png&w=460`]]" alt="woman on phone">
</picture>

I thought for a workaround I could upload webp as my source image and convert to png for compatibility, but phpthumb fails.

The fix is to use up to date versions. I ran the same code on an update modxcloud and it worked.

PHP 7.4 has updated versions of GD and imagemagick, I think that is the fix.

1 Like

Hey @bwente

Glad you found a fix.

I take it that fixes the webP transparency, but not the webP as a source image issue?

@dejaya Yes, that is correct, the media browser does not display webP thumbnails.

1 Like

My mistake. It does work. @halftrainedharry pointed out the issue.