ryan Posted May 24, 2019 Share Posted May 24, 2019 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/ 20 4 Link to comment Share on other sites More sharing options...
arjen Posted May 25, 2019 Share Posted May 25, 2019 Thanks Ryan and horst! 3 Link to comment Share on other sites More sharing options...
horst Posted May 25, 2019 Share Posted May 25, 2019 @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. ? 12 Link to comment Share on other sites More sharing options...
Tom. Posted May 29, 2019 Share Posted May 29, 2019 @ryan I can't seem to get this implementation working correctly? webpUrl returns the webp image but webp->url returns the jpg. Link to comment Share on other sites More sharing options...
AndZyk Posted June 7, 2019 Share Posted June 7, 2019 Hello, since the upgrade to PW 3.0.132, I have noticed some artefacts in the generated images: Before the upgrade: I have the ImageSizerEngineIMagick installed and use PHP 7.2.14 with Imagick 3.4.4. I think this issue is specific to Imagick. If I uninstall ImageSizerEngineIMagick I don't have artefacts. Has anyone else noticed such issue or is it maybe just my local installation? Regards, Andreas 2 Link to comment Share on other sites More sharing options...
szabesz Posted June 7, 2019 Share Posted June 7, 2019 (edited) Hi @AndZyk I can confirm this. If I upload a PNG saved by Photoshop then all is good but if I upload a PNG optimized with ImageOptim then transparency is removed and some sort of inverted version of the image is generated. It does look like it is a ProcessWire 3.0.132 issue indeed. It would be great to fix it ASAP as it is a real pita.... Edited June 7, 2019 by szabesz missing words added 2 Link to comment Share on other sites More sharing options...
AndZyk Posted June 7, 2019 Share Posted June 7, 2019 Thank you for confirming. In my case the original file was exported with Sketch unoptimized, but in a UHD resolution. 1 Link to comment Share on other sites More sharing options...
szabesz Posted June 7, 2019 Share Posted June 7, 2019 Hmmm, upon further inspections, I'm no longer so sure that it is a ProcessWire issue because the clone of the site in question in my local dev environment (MAMP Pro) can generate proper PNGs, while the one in production cannot. But still, it started happening after some ProcessWire upgrades. 1 Link to comment Share on other sites More sharing options...
AndZyk Posted June 7, 2019 Share Posted June 7, 2019 Ok, it could also be my local MAMP server setup. Because I have recently installed Imagick with Pecl and use this instead the build-in Imagick of MAMP. But switching didn't change anything and I think I have experienced this issue on our webhoster as well. Let's wait if someone else experienced this. ? 2 Link to comment Share on other sites More sharing options...
horst Posted June 7, 2019 Share Posted June 7, 2019 (edited) Ah, @ryan has added support for PNG8 to the Imagick engine, what wasn't before. He also asked me why this wasn't added and I was unsure if I simply forgot to add it. But now when I see this, I think I had tested it and removed it from the Imagick supported filetypes / subtypes, so that this images always were rendered by GD! until before the last Update. https://github.com/processwire/processwire/pull/141#issuecomment-495983196 So it seems it should be rolled back again, at least for PNG8. EDIT: I couldn't remember as it is (how many?) years ago as the Image Engine System was introduced. And yep, it would have been better to add some comments. ;-) Edited June 7, 2019 by horst 3 Link to comment Share on other sites More sharing options...
horst Posted June 7, 2019 Share Posted June 7, 2019 1 hour ago, szabesz said: Hi @AndZyk I can confirm this. If I upload a PNG saved by Photoshop then all is good but if I upload a PNG optimized with ImageOptim then transparency is removed and some sort of inverted version of the image is generated. It does look like it is a ProcessWire 3.0.132 issue indeed. Besides the broken Imagesupport for PNG8 I want to say: "Uploading ImageOptim optimized images are ONLY for output use as is(!), NOT for serving as master image from what one should generate new variations. ? " Everytime when I read something like this, my photographer heart hurts and somewhere a kitten dies, I believe. ?? ? Link to comment Share on other sites More sharing options...
szabesz Posted June 7, 2019 Share Posted June 7, 2019 5 minutes ago, horst said: at least for PNG8. I see! Yes, those PNGs are indeed PNG8 in my case. Tracy on MAMP Pro reports :IMAGICK SETTINGS Version: 6.9.6 Whereas in production: IMAGICK SETTINGS Version: 6.7.8 It seems like it is a bug in older verions of Imagick which are still quite common, I guess. 1 Link to comment Share on other sites More sharing options...
horst Posted June 7, 2019 Share Posted June 7, 2019 Just now, szabesz said: It seems like it is a bug in older verions of Imagick which are still quite common, I guess. Yep, and I / we don't like version hunting for all the format issues in Imagick or GD. ? 1 Link to comment Share on other sites More sharing options...
szabesz Posted June 7, 2019 Share Posted June 7, 2019 (edited) 7 minutes ago, horst said: Everytime when I read something like this, my photographer heart hurts and somewhere a kitten dies, I believe. ? I know the theory, however, saving space can be important on some servers. Also, in this particular case form a 3000x3000 PNG8 a 1000x1000 JPG is generated, and I do not think anyone can tell what the source was just by looking at it. Edited June 7, 2019 by szabesz typo 1 Link to comment Share on other sites More sharing options...
horst Posted June 7, 2019 Share Posted June 7, 2019 Hohoho, a 3000 x 3000 PNG, for what do you need this? You generate a 1000 x 1000 variation? If you use photoshop jpeg quality 12 you also has lossless master images. My favor would be to have LZW-Tiffs as master, = Lossless compression and a format that cannot wrongly used for web output. ? 1 Link to comment Share on other sites More sharing options...
szabesz Posted June 7, 2019 Share Posted June 7, 2019 6 minutes ago, horst said: Hohoho, a 3000 x 3000 PNG, for what do you need this? I do not need it ? but my client does so I had to find a way not to upload the "same" image twice, once for the client and once for the site. The client also needs those PNGs to be as small as possible, so that is where crushing them comes into play. Anyway, if you could revert the change, that would be great for the time being. Maybe a note in the source code about the issue could help to decide when to add it again to the supported filetypes is feasible. (A few years from now on, maybe?) 1 Link to comment Share on other sites More sharing options...
psy Posted June 10, 2019 Share Posted June 10, 2019 From @ryan's comment in the blog post https://processwire.com/blog/posts/webp-images-in-pw/: "By the way, if for some reason the webp results in a larger image (which is very rare), calling the $image->webp->url will return the smaller (non-webp) image." Very excited to see webp support in PW core then followed all the instructions. Couldn't get it working, or so I thought. Seems I did. OK, I take the craftsman's approach when adding images: Photoshop image as needed then reduce the image size to close to the max dimensions I need Export for Web Legacy - jpeg high @ 60% quality Drop exported jpeg into the lovely TinyBeest app https://www.tinybeest.com/ (Mac only) Upload TinyBeest-optimised image to PW, often output with MarkupSrcSet https://modules.processwire.com/modules/markup-src-set/ template code Every time I used $image->webp->url I got a jpg file with great quality. Only got webp when I uploaded the original image, often MB's huge. Bit frustrating that my images still get scored down on Google Page Speed Insights for not being webp - but then they'd be bigger and take longer to download ? 1 Link to comment Share on other sites More sharing options...
horst Posted June 10, 2019 Share Posted June 10, 2019 4 hours ago, psy said: Bit frustrating that my images still get scored down on Google Page Speed Insights for not being webp - but then they'd be bigger and take longer to download @psy You can set webpQuality to lower values what will result in smaller filesizes. Examples: 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now