Search the Community
Showing results for 'webp'.
-
Yes, I mentioned this solution in the first paragraph, but TextformatterWebpImages requires to use of htaccess to deliver jpg or png files if webp is not supported. In the website code you have only link to /site/assets/files/2581/jellyfish-aas.625x0-is.webp. If the browser doesn’t support it the server redirects the users to the original image. The issue is here that my CDN server don’t know if there is a different image file to download for the users. I think the best practise here is to use the HTML <picture> Tag.
-
I havent really dealt with webp yet, but have you looked at the TextformatterWebpImages text formatter that Ryan created? Apparently it converts jpg/png image tags to use WEBP.
-
ProcessWire offers a few solutions to manage WebP formats including the Class "TextformatterWebpImages", but there is no solution that works for me with CloudFlare. I'm trying to convert CKEditor all images output to WebP using the HTML <picture> Tag. By default CKEditor generates this code when adding an image <img alt="Jellyfish" class="align_center" width="625" src="/site/assets/files/2581/jellyfish-aas.625x0-is.jpg"> I can convert the CKEditor images to WebP adding the imageSizerOptions to the config.php $config->imageSizerOptions('webpAdd', true); But how to convert the output of all images inside CKEditor after "echo $page->textfield" to look like this: <picture> <source data-srcset="/site/assets/files/2581/jellyfish-aas.625x0-is.webp" type="image/webp" /> <img alt="Jellyfish" class="align_center" width="625" data-src="/site/assets/files/2581/jellyfish-aas.625x0-is.jpg"> </picture> This script works and can convert it function webp_picture_fix($content){ preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images); $i = -1; if(isset($images)){ foreach ($images as $key) { $i++; if(strpos($images[3][$i], 'align_center') !== false){ $slika_ekstenzija = $images[7][$i]; $sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija); $webp_slika_src = $sewebp.".webp"; $replacement = '<picture>'."\r\n".'<source data-srcset="'.$webp_slika_src.'" type="image/webp" />'."\r\n".'<img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'data-src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'>'."\r\n".'</picture>'; $content = str_replace($images[0][$i], $replacement, $content); } } } return $content; } but there are also errors PHP Notice: Undefined offset: 3 in /home/cg/root/4517254/main.php on line 18 PHP Notice: Undefined offset: 4 in /home/cg/root/4517254/main.php on line 18 PHP Notice: Undefined offset: 5 in /home/cg/root/4517254/main.php on line 18 PHP Notice: Undefined offset: 6 in /home/cg/root/4517254/main.php on line 18 PHP Notice: Undefined offset: 7 in /home/cg/root/4517254/main.php on line 18 PHP Notice: Undefined offset: 8 in /home/cg/root/4517254/main.php on line 18 PHP Notice: Undefined offset: 9 in /home/cg/root/4517254/main.php on line 18 Any suggestion on how to fix it or use a different approach to the problem?
-
Hi, PIM doesn't have webP support. It was written years before webP support comes into core, and it needs to be completly rewritten. (I also have started 2-3 times, but far from finishing. No time for it ? ) You may use a (clumpsy) workaround. First create a watermark image with 100% quality an sharpening = none, and then finally pass it through the core width() or size() function. This way you can use what ever webp strategy you like as it is always delegated to the core image handling. Downside is one additional (intermediate) variation in the chain. $options = ['sharpening'=>'none', 'quality'=>100]; $image_intermediate = $prop->images->eq(0)->pim2Load("wtm",true, $options)->height(480)->watermarkLogo($watermark, $position='center', $padding=2)->pimSave(); $image_url = $image_intermediate->height($image_intermediate->height)->url; // saves the image with 480px height, but with all default settings for quality, sharpening, webP, etc.
-
Module Page Image Manipulator | API for 1 & 2
Crowdland Technology replied to horst's topic in Modules/Plugins
Hello @horst me again with problems. Tried to enable webp support and get this error: "Error when trying to save the MemoryImage: we have no Targetfilename!In /site/assets/cache/FileCompiler/site/modules/PageImageManipulator/ImageManipulator02.class.php line 674" I'm using your implementation with the Strategy 1 from this post: https://processwire.com/blog/posts/webp-images-and-more/#strategy-1-automatically-delivering-webp-for-jpg-png-images Everything works until I need to create the image with the watermark. The code for the watermark is: $image_url = $prop->images->eq(0)->pim2Load("wtm",true)->height(480)->watermarkLogo($watermark, $position='center', $padding=2) ->pimSave()->url; Thank you!
-
Pageimage: ksgcenter.0x260.webp - not a supported image type
Macrura replied to fisnik's topic in General Support
The Processwire admin does not support webp. Webp is an output format, but not a valid source format for images. The Imagesizer engine of Processwire is not capable of resizing webp images, therefore when you save, it cannot generate the thumbnail, and that's why you get the error. You'll need to delete that webp image and upload a jpg instead. -
Hello all, I am trying to enable webp support for images, but i am having some problems with it. Somehow i have uploaded some images but i cannot delete them from field, when i try to delete it is log me out of processwire. See attached screenshots. P.s my server supports webp images. On my server logs i have only these errors: [Mon Jun 01 21:57:30.399211 2020] [fcgid:warn] [pid 26424] [client 162.158.88.107:22838] mod_fcgid: stderr: #4 /public_html/wire/core/ProcessController.php(337): ProcessWire\\Wire->__call('executeEdit', Array), referer: /setup/language-translator/edit/?language_id=1154&textdomain=wire--modules--languagesupport--languagesupport-module&filename=wire/modules/LanguageSupport/LanguageSupport.module [Mon Jun 01 21:57:30.399219 2020] [fcgid:warn] [pid 26424] [client 162.158.88.107:22838] mod_fcgid: stderr: #5 public_html/wire/core/Wire.php(380): ProcessWire\\ProcessController->___execute() setup/language-translator/edit/?language_id=1154&textdomain=wire--modules--languagesupport--languagesupport-module&filename=wire/modules/LanguageSupport/LanguageSupport.module [Mon Jun 01 21:57:30.399226 2020] [fcgid:warn] [pid 26424] [client 162.158.88.107:22838] mod_fcgid: stderr: #6 /public_html/wire/core/WireHooks.php(823): ProcessWire\\Wire- in /public_html/wire/modules/LanguageSupport/ProcessLanguageTranslator.module on line 634, referer: /setup/language-translator/edit/?language_id=1154&textdomain=wire--modules--languagesupport--languagesupport-module&filename=wire/modules/LanguageSupport/LanguageSupport.module Can anyone point me to right direction? Thanks in advance
-
Hi, i'm trying to add text-watermarks to images placed in a textarea using a textformatter. It works with jpegs executing the function $image->width(123)->watermark('some text') that replaces the variation with a watermarked one. But the webp variation will be created from the original file and there is no watermark. I played a bit with a hook before imSaveReady but the only thing i could achieve, was a watermark on the original file, but here i don't want it. Has anyone an idea how i can achieve this (using processwire functions and hooks)?
-
,@neophron, I think this module and the service behind it has nothing to do with what was called "quality loss" in the above posts. It is a good method to compress your (final) png image variations to get smaller filesizes. But maybe nowadays you can use WebP format directly in PWs core, instead to stick with png output, and than having to invoke a remote service?
-
Hey, I've made good progress. I think I have solved the issue for updating / changing from CAI3 to CAI4! ? - So, if you want to use a CroppableImage field for a fresh new site, simply go directly with CroppableImage4! (once it is officially released) - And if you have the CroppableImage3 on an existing site, but want to upgrade to CroppableImage4, (because you need WebP support), follow these easy steps: First update CroppableImage3 to the latest version 1.2.0! After that, additionally install CroppableImage4. Now you can use both modules with the same ->getCrop() method call on pageimages. The getCrop hook "knows" from which field and module version it comes. ? Therefore, from now on, you are free to start using CAI4 for new created template calls to CAI4 fields, while the older CAI3 calls can stay in and are fully functional without any changes. If you want to switch CAI3 fields to CAI4 fields, to benefit from the new functionalities, you can do that in the admin > setup > fields > YOURFIELDNAME editor, by changing the (field) type. (see screenshot beneath, & yes, KEEP SETTINGS!) The only thing you have to check, before doing that, is: looking into your templates code, if you have made use of the optional second param in the old CAI3 ->getCrop() calls. If no, what I think is 99.9% the case, you have to do nothing. If you make use of it, you need to change / adapt your method call in the template file. That's it. Summary: update CAI3 install CAI4 change the fieldtype(s) from CAI3 to CAI4 When I've got some feedback from beta testers (and everything works out as expected) I will release the CAI4 through the modules directory. Until then, you get the RC2 version of it on GitHub: https://github.com/horst-n/CroppableImage4
-
- + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - There is a new Version in the pipe, that supports WebP too: - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + -
-
Hi all, I'm searching for Alpha/Beta tester of the new rewritten Croppable Image module. I opened a new repo on Github, with the name CroppableImage4: https://github.com/horst-n/CroppableImage4 It is a rewrite of the CAI3. I dropped all internal image manipulations, to be more future safe. Now I delegate all this to the parent core image fields methods. To be able to do this, I need to change some things and the module is no longer backwards compatible. A) For the alpha & beta testing, there is a new crop method name: $image->getCrop4(), this may be changed later to the legacy $image->getCrop() method. But for the testing period to avoid conflicts with CAI3, it is named getCrop4(). <- OBSOLETE, see the next post here in thread B) With the first param, you pass the cropname into the method. Optionally you can pass image processing options as a second param, like with the core image field. To do this, you may use an array or a selector string. C) You can use every known options param. Width, Height, Size is ignored! If you also want create WebPs in one go, please add "webpAdd" => true to the options array, (or webpAdd=1 to the options selector string)! D) The resulting image variation names will differ from those of the previous version 3! Please refer to the readme of the repo and, maybe compare it against the version 3, if you not already know it. Thats it so far. I have tested it a bit in the last days and haven't found any issues. But it would be nice if some of you can test it too.
-
Hi @lpa, Apologies for the late response. I've had a look at this... Number 2 - width and height attributes not rendering - this isn't anything to do with PageimageSrcset. These options, when passed to Pageimage::render(), resize the image, but don't get rendered as attributes. If you want this behaviour, adding a markup option should do the trick: $content .= $img->render([ 'alt'=> $img->name, 'height' => $img->height, 'width' => $img->width, 'srcset' => '883, 687, 369', 'markup' => "<img src='{url}' alt='{alt}' width='{width}' height='{height}' />" ]); As for portrait mode, I'm not getting this when I test. I get: <img src='/site/assets/files/1033/placeholder-city.691x499.1000x667.webp' alt='placeholder-city.jpg' srcset=' /site/assets/files/1033/placeholder-city.369x266-srcset.webp 369w, /site/assets/files/1033/placeholder-city.687x496-srcset.webp 687w, /site/assets/files/1033/placeholder-city.691x499.webp 883w' > In your example, the image isn't being resized as portrait, so it is odd that the sizes attribute is being added. What settings do you have in the module config for Portrait mode? Are you on the latest version of the module (1.01)? Cheers, Chris
-
There is currently no support for webp with CAI3 master. There (only) is a different branch with webp support on github. But I haven't got any feedback about it, so it shouldn't be called "production ready". 5 months ago, I locally started a complete rewrite of CAI3 to only use native core images support. But I get distracted from it. If I remember right, I have included it in one client project that is live since september. But not sure how stable it is. If you have some time for testing and you like, I send you my current version of CAI4. (?)
-
I have a new problem in combination with WEBP. After cropping the WEBP variants are not deleted so they don't know they need to update In Variants I cannot select WEBP (no checkboxes) for manual deleting. I need to do this in FTP.
-
$config->webpOptions = array( 'quality' => 90, // Quality setting of 1-100 where higher is better but bigger 'useSrcExt' => false, // Use source file extension in webp filename? (file.jpg.webp rather than file.webp) 'useSrcUrlOnSize' => true, // Fallback to source file URL when webp file is larger than source? 'useSrcUrlOnFail' => true, // Fallback to source file URL when webp file fails for some reason? ); Set 'useSrcUrlOnSize' to false?
-
Hi, I found this: https://processwire.com/api/ref/pagefile-extra/url/ Can you test it with passing a boolean false in the method call: webp->url(false)
-
Hi @eutervogel, I believe it has to do with a automatic optimization that Ryan has build into the webp->url method. Given that webp is used to get smaller filesizes, and that sometimes a png or jpeg can be smaller than its webp pendant, the smaller one of them is put out by the webp->url. In general a nice idea, but only when one output a single src url in an img tag. For the more advanced usage in picture or srcset elements it is wrong and also irritating the devs. If I remember right, there must be a config setting to disable this. If I find it, I post it here. If someone else reading this and knows where it is and how it is named, please shime in!
-
Hi, what I'm doing is this: <picture> <source srcset="<?php echo $page->section_three->main_img->first()->size(396,710)->webp->url; ?>" type="image/webp"> <img class="p_absoulte pp_block" src="<?php echo $page->section_three->main_img->first()->size(396,710)->url; ?>" alt=""> </picture> and for some reason it sometimes becomes this: <picture> <source srcset="/site/assets/files/1057/sektion3_bild-1.396x710.png" type="image/webp"> <img class="p_absoulte pp_block" src="/site/assets/files/1057/sektion3_bild-1.396x710.png" alt=""> </picture> It seems to be related to ->size(). When I don't use ->size() the webp Url is correct. I'm using the image-field inside a Fieldset(Page). Could that be a problem too? I just increased the output size by 2px and voila the webp url comes up. I deleted all variations (webp variation is present in correct size) changed it back to the original size and again: a png url. I also tried to rename the image and load it up agian. ...same behavoir. Thanks in advance guys
-
I was recently experimenting with optimizing my images to get better load results. The code below is an example of what i've been using. It works nicely but the main problem is if i load a page for the first time after having added a few images my server will overload and return a 503 error. I have to refresh the page a few times for the server to resize all the images. Not a big problem while developing but not something I want on my live website. <picture> <source media='(max-width: 320px)' srcset='{$image->width(320)->url} 1x, {$image->width(640)->url} 2x'> <source media='(max-width: 375px)' srcset='{$image->width(375)->url} 1x, {$image->width(750)->url} 2x'> <source media='(max-width: 767px)' srcset='{$image->width(750)->url} 1x, {$image->width(1500)->url} 2x'> <source media='(max-width: 1023px)' srcset='{$image->width(300)->url} 1x, {$image->width(600)->url} 2x'> <source media='(max-width: 1319px)' srcset='{$image->width(450)->url} 1x, {$image->width(900)->url} 2x'> <source media='(min-width: 1320px)' srcset='{$image->width(510)->url} 1x, {$image->width(1020)->url} 2x'> <img src='{$image->width(1056)->url}' alt='$image->description'> </picture>"; Is there a way to create these different sizes without overloading my server? Ideally i'd like to expand the above code with webp support and a service like tinyPNG to reduce image size even further, but that would stretch the first load time even further.
-
Hey @nbcommunication! Just wondering: do you think it would make sense to implement picture support into this module, or do you see that as a completely unrelated thing? ? The background is that I'm currently looking into ways of handling webp+srcset. Since IE and Safari don't support webp, a fallback is necessary, yet none of the .htaccess fallback solutions are (in my opinion) really up to the task. Every solution I've found so far comes with drawbacks that would eventually cause issues for our clients. Best solution so far seems to be <picture> with fallback <img> element. I could build a (very simple) markup module that just outputs the picture element for me (it's not a whole lot of boilerplate, but still a bit bothersome to write all over the place), but then it occurred to me that since I'm going to need this module anyway, wouldn't it be awesome if I could just call Pageimage::render() and this module would handle the rest. What do you think? ?
-
Would you mind sharing your code? I'm thinking that maybe a textformatter on RTE field would be better fit in some cases as generally images in header/footer are most likely already optimized? I would also be interested in how it goes in long term, what are the savings with webp comparing to optimized images. I wasn't testing with <picture> but I used this approach: $config->hasWebpSupport = (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false); //this is in /site/config.php $url = $config->hasWebpSupport ? "webpUrl" : "url"; foreach($page->images as $img) { echo "<img src='{$img->$url}'> "; } But I think Horst commented that this would kill caching (don't remember exactly...). Also, some browsers don't support webp, but I wouldn't bother too much.
-
Ok, so I decided to play around with writing a DOMDocument based approach which hooks into Page::render and replaces all: <img src="/site/assets/files/1234/image.png" alt="my image" class="my_image_classes"> with: <picture class="my_image_classes"> <source srcset="/site/assets/files/1234/image.png.webp" type="image/webp"> <img src="/site/assets/files/1234/image.png" alt="my image" class="my_image_classes"> </picture> Because it happens on page render, this approach works with images embedded into RTE fields, as well as those added via regular <img> tags in template files. It automatically copies classes from the original <img> tag to the picture tag. I still don't know whether this is the best approach or not, but so far so good ?
-
That's why I said I'm lucky. All my PW sites are "in the house" and my "clients" are my colleagues at work and they do what I say :-) I see. My "customers" are 95% from Slovenia so I don't have to worry about that, luckily. I haven't implemented webp on my sites so I didn't think about that because I just recently upgraded to PW that has webp support. On my sites images are rarely inserted into RTE. If this is the case then you may be better of using .htaccess strategy.
-
Thanks for your thoughts - I must admit I am a little behind in adopting webp, but it's time to get up to speed for sure. I would love to say that I could get clients to optimize before uploading, but it's just not going to happen for all of them and unfortunately they often upload images in the MBs in size, not KBs, so I definitely need to do compression of some sort. I see some sites where they are displaying thumbnails of images which are well over 1MB and even on my 150 Mbps connection, they still visibly load quite slowly so I think it's still important to consider this. Please also consider that in some countries (especially here in Canada), mobile data is stupidly expensive, so even if it's fast enough, it's eating into valuable monthly bandwidth if you're not on WiFi. Thanks for the suggestion of going with Strategy 3 for WebP - I am curious about images inserted into an RTE - do you use DOMDocument (or preg_replace) to scan for <img> tags and automatically wrap them in <picture> tags and add the <source srcset> tag or do you have another strategy for this? Thanks again!
