Search the Community

Ok... that's tough than. I changed one of my sites (behind Cloudflares Free Plan) to strategy 1 as described here: https://processwire.com/blog/posts/webp-images-and-more/#strategy-1-automatically-delivering-webp-for-jpg-png-images It works, even in image URLs generated with size(). Ryan says this in the article: Maybe that's the reason.

HI @eelkenet, I have setup a new test site today and it looks that any possible setting is working as expected from the PW image generation site. So it seems I need some more information from your setup. Especially this: what settings are you using for $config->imageSizerOptions ? what are the settings for $config->webpOptions ? how do you call the image url in your template file(s) with $image->size()->webp->url or $image->size()->url, or how? do you use an individually passed options array there? what are your settings in the .htaccess file ? Please can you provide these information as exact as possible. If you don't want to post this here you can PM me. My newly set up testing, without any settings in the .htaccess doesn't recreate any variations. It looks like this:

I've been doing a little rejigging of our default htaccess file after yesterday's dev release, and trying to understand Section 18 a bit better too... In section 18 we use a rule based on what is outlined here: https://processwire.com/blog/posts/optimizing-404s-in-processwire/ RewriteCond %{REQUEST_URI} !\.(jpg|jpeg|gif|png|ico|webp|svg|php|cgi|pl|asp|rar|zip)$ [NC] This is entered after the existing section 18 rules, which are left commented out. After the end of ProcessWire's htaccess rules we have: <FilesMatch "\.(jpg|jpeg|gif|png|ico|webp|svg|php|cgi|pl|asp|rar|zip)$"> ErrorDocument 404 "The requested file was not found. </FilesMatch> Without that rule, I get the ProcessWire 404 page when accessing a non-existent file matching one of those types. On a different htaccess-related note, I recommend the 6G htaccess Firewall https://perishablepress.com/6g/. We have this at the start of our default .htaccess file, followed by: ErrorDocument 403 "Sorry, you are not permitted to access this resource. The only issue I've come across after a few years of use is with the autocomplete Page field, when using OR selectors (e.g. template=home|default). I wrote this hook as a remedy: <?php // Replace pipes (|) with %7C in PageAutocomplete data-url attribute // This gets around 6G htaccess rules which disallows pipes in urls $wire->addHookAfter("InputfieldPageAutocomplete::render", function(HookEvent $event) { $out = $event->return; if(strpos($out, "data-url") === false) return; $url = explode("'", ltrim(explode("data-url=", $out)[1], "'"))[0]; $event->return = str_replace($url, str_replace(" ", "+", str_replace("|", "%7C", $url)), $out); }); Cheers, Chris

Hello @eelkenet, I had that issue on my local MAMP server, when this feature was introduced. I tried this config option, but for me it doesn't work at all. Is it mandatory to edit your .htaccess? Because strategies 1 and 2 didn't work for me, I use strategy 3 with an own config variable ($config->useWebP) and disable WebP on my local MAMP server. Regards, Andreas

I'm not totally following what you are doing, but sessioningerprinting should not be an issue if you look at my code the post above with using php function getallheaders() This allows a complete 1:1 copy of the sended headers from the browser also through wirehttp. It includes the same UA header, same cookies, same everything. array(12) { ["Host"] string(32) "pw-change-default-language.local" ["Connection"] string(10) "keep-alive" ["Upgrade-Insecure-Requests"] string(1) "1" ["User-Agent"] string(132) "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 OPR/75.0.3969.149" ["Accept"] string(135) "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9" ["Sec-Fetch-Site"] string(4) "none" ["Sec-Fetch-Mode"] string(8) "navigate" ["Sec-Fetch-User"] string(2) "?1" ["Sec-Fetch-Dest"] string(8) "document" ["Accept-Encoding"] string(17) "gzip, deflate, br" ["Accept-Language"] string(35) "de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7" ["Cookie"] string(166) "wire=8jfqut56c2ag66iaquvb27jdpu; wire_challenge=72ie9BYKDjbw4h0%2FhBYu1wmngAyUoA3F; wires=5u0b7v49ecudnj39bmdpat4dje; wires_challenge=TmFvvRVgTxBQYsyta4tST6yQJjkzymPd" }

I would recommend using the third WebP strategy for that. ?

Hi, cool site! One thing though – Safari (14.0.3) doesn't support .webp and all nice images are not visible ?

No sign of lcms anywhere! According to the docs, it looks like it needs to be included during compile: --with-lcms=yes My IM installation was manually compiled from source because at the time I set things up, the debian package was out of date and didn't support things I needed. I can't think of, or find, any way to get delegate info directly using iMagick extension. Name Value ------------------------------------------------------------------------------- CC gcc -std=gnu99 -std=gnu99 CFLAGS -fopenmp -g -O2 -Wall -pthread CONFIGURE ./configure '--without-perl' '--with-gslib=yes' COPYRIGHT Copyright (C) 1999-2011 ImageMagick Studio LLC CPPFLAGS -I/usr/local/include/ImageMagick CXX g++ CXXFLAGS -g -O2 -pthread DEFS -DHAVE_CONFIG_H DELEGATES bzlib fontconfig freetype gs jpeg jng jp2 png rsvg tiff x11 xml zlib DISTCHECK_CONFIG_FLAGS --disable-deprecated --with-quantum-depth=16 --with-umem=no --with-autotrace=no --with-fontpath= --with-perl=no EXEC-PREFIX /usr/local FEATURES OpenMP HOST x86_64-unknown-linux-gnu LDFLAGS -L/usr/local/lib LIB_VERSION 0x667 LIB_VERSION_NUMBER 6,6,7,5 LIBS -lMagickCore -ltiff -lfreetype -ljasper -ljpeg -lgs -lpng -lfontconfig -lXext -lSM -lICE -lX11 -lbz2 -pthread -L/usr/local/lib -lrsvg-2 -lgio-2.0 -lgdk_pixbuf-2.0 -lm -lcairo -lgobject-2.0 -lgmodule-2.0 -lgthread-2.0 -lrt -lglib-2.0 -lxml2 -lz -lm -lgomp -lpthread -lltdl NAME ImageMagick PCFLAGS -fopenmp PREFIX /usr/local QuantumDepth 16 RELEASE_DATE 2011-02-05 VERSION 6.6.7 WEBSITE http://www.imagemagick.org Path: [built-in] Name Value ------------------------------------------------------------------------------- NAME ImageMagick Path: /usr/local/lib/ImageMagick-6.6.7/config/delegates.xml Delegate Command ------------------------------------------------------------------------------- blender => "blender" -b "%i" -F PNG -o "%o""\n"convert" -concatenate "%o*.png" "%o" cdr => "uniconvertor" "%i" "%o.svg"; mv "%o.svg" "%o" cgm => "ralcgm" -d ps -oC < "%i" > "%o" 2> "%Z" dng:decode => "/usr/bin/ufraw-batch" --silent --wb=camera --black-point=auto --exposure=auto --create-id=also --out-type=png --out-depth=16 "--output=%u.png" "%i" dvi => "dvips" -q -o "%o" "%i" eps<=>pdf "gs" -q -dQUIET -dSAFER -dBATCH -dUseCIEColor -dNOPAUSE -dNOPROMPT -dMaxBitmap=500000000 "-sDEVICE=pdfwrite" "-sOutputFile=%o" "-f%i" eps<=>ps "gs" -q -dQUIET -dSAFER -dBATCH -dUseCIEColor -dNOPAUSE -dNOPROMPT -dMaxBitmap=500000000 -dAlignToPixels=0 -dGridFitTT=2 "-sDEVICE=pswrite" "-sOutputFile=%o" "-f%i" fig => "fig2dev" -L ps "%i" "%o" gplt => "echo" "set size 1.25,0.62 set terminal postscript portrait color solid; set output "%o"; load "%i"" > "%u";"gnuplot" "%u" hdr => "ra_pfm" "%i" "%o" hpg => "hp2xx" -q -m eps -f `basename "%o"` "%i"; mv -f `basename "%o"` "%o" hpgl => "if [ -e hp2xx -o -e /usr/bin/hp2xx ]; then hp2xx -q -m eps -f `basename "%o"` "%i"; mv -f `basename "%o"` "%o"; else echo "You need to install hp2xx to use HPGL files with ImageMagick."; exit 1; fi" htm => "html2ps" -U -o "%o" "%i" html => "html2ps" -U -o "%o" "%i" https => "curl" -s -k -o "%o" "https:%M" ilbm => "ilbmtoppm" "%i" > "%o" man => "groff" -man -Tps "%i" > "%o" miff<= show "/usr/local/bin/display" -delay 0 -window-group %[group] -title "%l of %f" "ephemeral:%i" mpeg:decode => "ffmpeg" -v -1 -vframes %S -i "%i" -vcodec pam -an -f rawvideo -y "%u.pam" 2> "%Z" pdf<=>eps "gs" -q -dQUIET -dSAFER -dBATCH -dUseCIEColor -dNOPAUSE -dNOPROMPT -dMaxBitmap=500000000 -dAlignToPixels=0 -dGridFitTT=2 "-sDEVICE=epswrite" "-sOutputFile=%o" "-f%i" pdf<=>ps "gs" -q -dQUIET -dSAFER -dBATCH -dUseCIEColor -dNOPAUSE -dNOPROMPT -dMaxBitmap=500000000 -dAlignToPixels=0 -dGridFitTT=2 "-sDEVICE=pswrite" "-sOutputFile=%o" "-f%i" pic => "ra_pfm" "%i" "%o" png<= launch "gimp" "%i" png<= webp "cp "%i" "%i.png"; "webpconv" "%i.png"; rm "%i.png"; mv "%i.webp" "%o" pnm<= ilbm "ppmtoilbm" -24if "%i" > "%o" pov => "povray" "+i%i" -D0 +o"%o" +fn%q +w%w +h%h +a -q9 -kfi"%s" -kff"%n"\n"convert" -concatenate "%o*.png" "%o" ps<=>eps "gs" -q -dQUIET -dSAFER -dBATCH -dUseCIEColor -dNOPAUSE -dNOPROMPT -dMaxBitmap=500000000 -dAlignToPixels=0 -dGridFitTT=2 "-sDEVICE=epswrite" "-sOutputFile=%o" "-f%i" ps<=>pdf "gs" -q -dQUIET -dSAFER -dBATCH -dUseCIEColor -dNOPAUSE -dNOPROMPT -dMaxBitmap=500000000 -dAlignToPixels=0 -dGridFitTT=2 "-sDEVICE=pdfwrite" "-sOutputFile=%o" "-f%i" ps<= print "lpr "%i" rad => "ra_pfm" "%i" "%o" rgba<= rle "rawtorle" -o "%o" -v "%i" scan => "scanimage" -d "%i" > "%o" scanx => "scanimage" > "%o" shtml => "html2ps" -U -o "%o" "%i" sid => "mrsidgeodecode" -if sid -i "%i" -of tif -o "%o" > "%u" svg => "rsvg" "%i" "%o" txt<=>ps "enscript" -o "%o" "%i" webp => "cp "%i" "%i.webp";"webpconv" -format PNG "%i.webp"; convert "%i.png" "%o";rm "%i.webp" "%i.png" wmf => "wmf2eps" -o "%o" "%i"

@Sanyaissues I see that there is used GD for the creation of the image variations, (at least some). Please, can you tell me which value you use(d) for "defaultGamma" in your $config->imageSizerOptions (or optional a options array passed to the variation creation)? BTW, the image handling is perfect! Different source sets for landscape and portrait orientation, (native) lazy loading, WebP variations with jpeg/png fallback, - everything is in! ? ? If you or the artist is interested in protecting the original images (the high quality 2000px ones) you may embed a .htacess snippet and the admin-image-proxy php from here.

This week I’m happy to report we now have WEBP support in ProcessWire thanks to a GitHub pull request from Horst Nogajski. This enables you to have highly optimized image output in PW and I think you’ll really like the difference it makes. Read on for all the details… https://processwire.com/blog/posts/webp-images-in-pw/

Hi, I have a strange problem as below: Linux box Chrome always serves jpg files instead of webp files but Firefox does serves the webp files. Mac Bookpro Both Chrome and FireFox serve jpg files only. Any clues?? Gideon P.S. Solved. Seems like it is a browser cache problem.

@ryan I can't seem to get this implementation working correctly? webpUrl returns the webp image but webp->url returns the jpg.

Did it create the WEBP version? Maybe the JPG was smaller so it served that up instead. In my limited experience, it's quite common that the webp version is actually larger :)

I have WebP support enabled in GD (PHP 7.3), but $image_field->webp->url still returns a JPEG file. Anything I'm missing? Is there something to add in the config.php file?

Do you mean you tried to upload a WebP image to an Images field? If so that's not supported - the blog post explains that WebP is an output format only:

@ryan thank you very much for all the additions you implemented in such a short time on top of my github pullrequest. It seems that there currently nothing is left in regard of webp support in ProcessWire. But I already have one or two points for future updates to the image rendering engines, that should be implemented when all browsers will support webp and we don't need fallback jpegs or pngs anymore. ?

I think it is independent from the source. The compression is set for the output format, that is webp, regardless what was the source format. It can be JPEG, PNG, GIF, TIFF, BMP or any other image file format that can be opened by the proceeding rendering engine. (For IMagick most often one out of 230+) In this context, we can use lossless for sources from JPEGs too. But because in my tests it seems to be exact or nearly the same like quality 100, I had not seen a valid reason to bloat our imageSizerOptions with another setting, what then would need to be checked for its existence and compared against webpQuality. Also: HINT: if one passes wrong values for webpQuality, out of range (1-100), the webp rendering method automatically falls back to lossless. So if you use 100 or anything above 100 for webpQuality, you get lossless. ?

I never have jpg and png files of the same variation name. So there will be only one type available. If you really create png and jpeg of the same variation, you have to work with suffixes. Webp is a (final) OUTPUTFORMAT only! You cannot use it as a pageimage. If you want to upload and use webp directly, you can use a file field. This one, maybe in site/config.php, is really usefull for conditional markup, as it can reduce it drastically. ?

Maybe the most reliable way is: $webpsupport = (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false); if($webpsupport) { //serve webp } else { //serve jpg or png or whatever } Of course, .htaccess is a viable solution...

Thank you for the hint, that seems to be it. Here is a screenshot of my local ImageMagick installed with Homebrew on MacOS: But even when I uninstall the core module IMagick Image Sizer, I cannot create a WebP image with ImageSizerEngineGD. Our hoster doesn't seem to support WebP either unfortunately. Not so easy to use WepP at the moment. ?

Hello @horst, thank you for your efforts to bring WebP to ProcessWire. I can't wait till it is implemented in the core and want to try it out, but have some problems getting it to work. I hope you can help me: I have downloaded your modified ProcessWire from your pull request and replaced the wire folder with your wire folder, because I don't want to mess up the Git development branch of my project. Maybe I don't understand the concept of pull requests right. ? Following files have changed: wire/config.php wire/core/ImageSizerEngine.php wire/core/ImageSizerEngineGD.php wire/core/Pageimage.php wire/modules/Image/ImageSizerEngineIMagick/ImageSizerEngineIMagick.module Now if I have understood correctly, I should be able to generate a WebP of an image with: <?php $options = [ "webpAdd" => true, "webpQuality"=> 90 ]; page()->image->size(800, 600, $options); Now I get the error: Am I missing something or has it to do with my local MAMP? Regards, Andreas

@Noboru I now have changed it to work with all regular use cases in PW. But this includes to have a regular file and optionally a webp file. But this is/was the behave before the core webp addition too. Please try if it now works for you, or report back. If not, we can define a custom hook or a custom function to suite your setup.

Hi @horst, My ImageSizerEngineVips is based on your ImageSizerEngineIMagickCLI with code from other sizers. The module works fine, but at the moment only for my needs, because I optimized for speed and left some options like sharpening. But if I have the time and interest, I can polish it. Another thing: I only use WebP in pages with lazy loading and srcset. Because of that I have only variations as WebP, not the uploaded pageimage. Your change here checks not only variations, right? For me, it changes many variations that already exist.

you may use the new debug info for images. and / or skip the rewrite: /site/assets/files/1/basename.jpg?skiprewrite And: nobody is forced to use it this way. You always can create conditional markup. My goal is to collect different solutions, and with the .htaccess only, to show and discuss a solution that would not need a rewrite for existing sites, or at least, makes the rewrite as small as possible. (change all image variations in markup from .jpg to .webp). EDIT: I think maintainers should know about the fact if they have implemented a webp solution and if so, wich one. If, for what ever reason, someone don't like this solution in a site, he shouldn't use it.

Another update to the PageImage class, comes in handy during the webp work. But it is not only useful for WebP copies, but for everything in regards of experimenting and debugging with images. I added a new method: ->getDebugInfo($options). See examples here: https://biriba.de/pw_pop3/pw_pageimage_getdebuginfo/