Search the Community
Showing results for 'webp'.
-
Here's another website that i recently made that I would like to share with the community: https://www.w2-ingenieure.de/ W² Ingenieure (which is german and translates to "W² Engineers") is a small office that offers that develops, modernizes, and optimizes living and working spaces in Germany like: Schleswig-Holstein, Hamburg, and Lower Saxony. Whether for private households, commercial enterprises, public institutions, or industrial plants – they plan and implement customized solutions for even the most complex requirements. This project is a redesign of an existing website. While the old website had plenty of good content, there were multiple flaws in the design (especially the mobile version of the website) so my main task was not to make a from-the-ground-new-concept but to give it a better, functional and more polished look based on the CI. As we are talking about an engineering company that offers planning for the construction industry the look of the site hat to be sleek, clean, somehow modern and overall "serious". We are not talking about a design-agency website here. Tech Talk: - UiKit as frontend framework - RockPageBuilder for content creation and editing - TextformatterRockDown to enable headline formatting - RockFrontend for Ajax Endpoints (used in form submissions) - RockDevTools for Asset Management and Minification - SEO Maestro for SEO meta data - PageImageSource for webp image creation - FileMover as a workaround for a global media management solution - WiremailSMTP to handle form submissions So here it is: The website consists of several page templates, including: - Homepage - Content Page - Project Page - Job Page - etc. The Homepage and Content Page templates can be populated with pre-defined content-blocks via @bernhards RockPageBuilder. This is straight-forward and easy-to use. The user can chose between multiple content elements and place those elements in any order they want: For Example we have: - Textfields - Teaser in multiple variants - Description Lists - Hero Title Image Sections - etc. Once added the content can be edited directly in the frontend or inside a convenient popup window (or from the backend page edit view of course). Other templates like the Project Page offer a more strict, predefined, layout to achieve a uniform look throughout any project page that is crated. These type of pages can be populated from the backend more easily: I have to keep my attachment file list small, so please have a look on this site for yourself and don't hesitate to ask any questions if you would like to know more about the tech in the background. Have a great week! Stefan
-
- 14
-
-
I have no idea when this broke, but it was working. I am just adding an image to a page in the admin. I can upload the image to the page and it shows up in the images field and in the assets directory Adding the image to the page body via CkEditor does nothing - no errors on the screen, but no image Logs show "Unknown image file In /wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module line 376" The GD call to resize works, webp and resized images all show in the assets directory Removing the above exception check will catch at line 398, saying no such image file. I have no idea when it broke. Old images are fine. New images will not insert into the editor. Any ideas? I'm at a loss and really frustrated! -
@nbcommunication I found my problem. 🥵 It wasn't your module at all but instead another module that I was using which interfered with the webp image creation for the srcset attributes: Delayed Image Variations I was using this Module because the image variant generation on image-heavy sites (using the size method) took very long and resulting in time out errors of the server. As described in the module thread: After uninstalling the module all the paths in the srcset attribute point towards the webp versions of the image and also the quality settings are applied as set in the module settings page! I am sorry for causing so much work for your tests! 😔
-
The output of both is: "0 Bytes" I then tried this: <img src="<?php echo $image->size(2550, 1440, [ 'webpQuality' => 10, 'webpAdd' => true, 'webpOnly' => true, 'suffix' => 'q10', ])->webp->url; ?>" /> Which results in in a "502 Bad Gateway" error (for the jpg image file path), because the img src in the DOM refers to the "jpg" version: <img src="/site/assets/files/1651/startbild_architektur.2550x1440-q10.jpg" width="2550" height="1440" sizes="auto" alt="" uk-cover=""> The jpg version however is not created (probably because webpOnly is 'true'). The webp version is created in the filesystem (and the quality setting is working!) but this webp version is not used in the src attribute.
-
Hi @Stefanowitsch, Something else that would be worth trying, output this somewhere: <?php echo implode('<br>', [ $pageimage->size(2550, 1440, [ 'webpQuality' => 10, 'webpAdd' => true, 'webpOnly' => true, 'suffix' => 'q10', ])->webp()->filesizeStr, $pageimage->size(2550, 1440, [ 'webpQuality' => 80, 'webpAdd' => true, 'webpOnly' => true, 'suffix' => 'q80', ])->webp()->filesizeStr, ]); Cheers, Chris
-
@nbcommunication thanks for testing it out! I tried to replicate the steps you took but my results are still the same. First, outputting the srcset array gives this: array 0 => '/site/assets/files/1651/startbild_architektur.640x361-srcset.jpg 640w' 1 => '/site/assets/files/1651/startbild_architektur.1024x578-srcset.webp 1024w' 2 => '/site/assets/files/1651/startbild_architektur.1500x847-srcset.webp 1500w' 3 => '/site/assets/files/1651/startbild_architektur.1920x1084-srcset.webp 1920w' 4 => '/site/assets/files/1651/startbild_architektur.2550x1440.2550x1440-srcset.jpg 2550w' Note: The webp images are not created in the first place, only after reloading the page they get generated from the -srcset.jpg versions (depending on the current screensize, thats why the array is mixed with jpg and webp images). What I still don't understand is that for the largest image variant - 2500px in width - the webp image variant gets created in the file system but is never ever used in the srcset attribute. I extended my browser window width on > 1920 to make sure it will be loaded. In my case the max size for an image variant hast to be lower than the size given in the config. Only then it will be used in the srcset. That's why I am using 2500px instead of 2550px for the srcset in the module settings. $config->imageSizes = [ 'title-img' => [ 'width' => 2550, 'height' => 1440 ] ]; I entered a webp quality setting of "1" in the module settings but this setting is not applied. All webp variants were created at 90% quality based on the filesize. This behaviour is the same on all of my local DDEV projects and on the live servers. I don't use Imagick though, it's the standard GD engine instead.
-
Hi @Stefanowitsch, I've tested based on the information you've provided and it isn't replicating: <?php // /site/config.php $config->imageSizes = [ 'title-img' => [ 'width' => 2550, 'height' => 1440 ] ]; // output, original pageimage is > 3000px wide echo print_r(explode(', ', $pageimage->size('title-img')->srcset([ 640, 1024, 1500, 1920, 2550, ])), 1); // result Array ( [0] => /site/assets/files/1031/very_large_array_clouds.640x361-srcset.webp 640w [1] => /site/assets/files/1031/very_large_array_clouds.1024x578-srcset.webp 1024w [2] => /site/assets/files/1031/very_large_array_clouds.1500x847-srcset.webp 1500w [3] => /site/assets/files/1031/very_large_array_clouds.1920x1084-srcset.webp 1920w [4] => /site/assets/files/1031/very_large_array_clouds.2550x1440.2550x1440-srcset.webp 2550w ) With module config webpQuality setting at 85 With module config setting at 10 With module config empty (defaults to 90 - there was a bug here, fix to be pushed shortly) The quality setting in the module config is definitely being used in this case. Reviewing the above, I'm quite surprised at the difference in file size between 85 and 90. There has to be something else going on here, maybe the image sizer engine (Imagick used here but that about as far as my knowledge goes on these things). Do you have access to any other server environments to try to replicate the test on? I've run this on a dev server and a production server which have different setups with the same result on both. Cheers, Chris
-
@nbcommunication Hello! It's me once again. After excessive testing I found out that the modules webp quality settings were never applied to generated webp iages when outputting the srcset like this: <img srcset="<?php echo $image->size($imgFormat)->srcset ?>" ... The webp versions that were created always used a quality setting of 90%, no matter what I entered as value in the module settings. The solution: I had to place this line in my config.php to kind of "override" the default webOptions of ProcessWire: $config->webpOptions = array(); By the way the default options are set to this: 'quality' => 90 'useSrcExt' => false 'useSrcUrlOnSize' => true 'useSrcUrlOnFail' => true Only then (when the 'quality' option is missing) the entered value from the module settings is applied correctly. I did not test this with the $image->render method, though. Can you confirm if this is the intended behaviour?
-
@nbcommunication Thanks for the hint. I think there indeed lies my problem. Let me try to explain: I am using the size method to crop images to use the aspect ratio / format that I need for my layout (for example a hero slider uses a 16:9 image ratio). The $imgFormat value in that case would look like this: 'title-img' => [ 'width' => 2550, 'height' => 1440 ] <?php echo $image->size('title-img')->srcset() ?> So then the PageImage module takes this image to create variations based on the set rules in my module settings: 640 1024 1500 1920 2550 So there exists a 2550px version of the image (created by the size method) but I have to include this width in the size set rules, otherwise only the image variations up to 1920px will be used in the srcset attribute in the DOM. And this might be the problem: When adding the 2550px rule the cropped 2550px wide jpg image is used int the srcset attribute and not the wepb version (all other image sizes use the webp version, they just weren't created yet - instead queued - when I testet it lately). So to make it finally work for my case I have to crop the image larger than used in the srcset. For example 3000px wide. In that case the 2550px webp version is generated and used correctly together will the other sizes from the set rules in webp format.
-
Hi @Stefanowitsch, PageimageSource:srcset() doesn't directly do any evaluation of the file sizes to decide what to return, it is just calling Pageimage::url() if webP is off, and Pageimage::webpUrl if it is on. When I test I'm getting all JPEG if off, and all webP if on. I don't use named size variations myself, quite possible that this is where the issue lies, and I need to implement something additional to handle these. What's the value of $imgFormat? Cheers, Chris
-
Hi @nbcommunication Yes, my markup for outputting images looks like this: <img srcset="<?php echo $image->size($imgFormat)->srcset() ?>" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 <?=$config->imageSizes[$imgFormat]['width']?> <?=$config->imageSizes[$imgFormat]['height']?>'%2F%3E" sizes="auto" alt="<?= $image->description; ?>" uk-cover loading="<?= $key == 0 ? 'eager' : 'lazy' ?>" /> I am passing no arguments or options to the method call: <?php echo $image->size($imgFormat)->srcset() ?> I can confirm that all webp image variations are generated correctly by looking into the image folders. These image are 50% of the jpg size so the module should load those images instead the jpg ones per default? When inspecting the DOM the image srcset attribute looks like this (only one webp image is used) <img srcset="/site/assets/files/1264/startbild_architektur.640x412-srcset.jpg 640w, /site/assets/files/1264/startbild_architektur.1024x659-srcset.jpg 1024w, /site/assets/files/1264/startbild_architektur.1500x966-srcset.webp 1500w, /site/assets/files/1264/startbild_architektur.1920x1236-srcset.jpg 1920w, /site/assets/files/1264/startbild_architektur.2500x1610-srcset.jpg 2500w" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 2550 1642'%2F%3E" sizes="auto" alt="" uk-cover="">
-
Thanks again! It seems that one or two things are still not working correctly. First the webp image quality setting is still not applied. However the created webp versions have roundabout 50% of the original JPG image size and still look excellent so I don't bother about that. Another problem is that the srcset() method now outputs JPG image paths exclusively (in each case), even when there are webp images available that are way smaller than the JPG versions (Enable webp images ist set to "yes" in the backend). Does this has to do with the latest changes? <img srcset="/site/assets/files/1264/startbild_architektur.640x412-srcset.jpg 640w, /site/assets/files/1264/startbild_architektur.1024x659-srcset.jpg 1024w, /site/assets/files/1264/startbild_architektur.1500x966-srcset.webp 1500w, /site/assets/files/1264/startbild_architektur.1920x1236-srcset.jpg 1920w, /site/assets/files/1264/startbild_architektur.2500x1610-srcset.jpg 2500w" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 2550 1642'%2F%3E" sizes="auto" alt="" uk-cover="">
-
Thank your for the quick fix! I am not using the <picture> element, instead I am outputting images like this: <img srcset="<?php echo $image->size($imgFormat)->srcset() ?>" I played around with the quality settings but it still does not affect the generated webp images at all.
-
Hi @Stefanowitsch, Thanks, yes this is a bug. It was affecting the webP generation when using <picture> and was just defaulting to 90 for quality. I've pushed a fix for this and refreshed the module so it should be available for upgrade now. As for webP being larger than the original - I've found this to be the case for some images. There's some good info on this in this thread: Cheers, Chris
-
@nbcommunication I have a question about the webp quality value in the module settings. I was experimenting to find a good compromise between file-size and quality but it seems that (in my case?) the quality setting has no influence on the output quality of the generated images at al. The webp versions of the images are even slightly larger in size than the jpgs (???) Even when set the webp quality to 10% in the module settings the image still have larger file sizes than the jpg versions.
-
Where to set image resizing quality and how to re-resize images
olafgleba replied to Adam Kiss's topic in General Support
Hi @tpr (and @horst), first, thanks for the module. It was a splendid timesaver in several projects (especially with corrupted webp images/files) in the past. Is this module still maintained? I ask because i get an error (s. below) with latest Version (0.0.4) with PW 3.0.243. Thx and cheers -
Hi @mel47, That sounds like either an issue with the image or the library that's converting to webP. There isn't anything in the module to exclude file types, but you could do that in your own code: <?php $pageimage = $page->image; if($pageimage->ext !== 'png') { // your srcset code } You could also try: <?php $pageimageSource = $modules->get('PageimageSource'); $pageimage = $page->image; if($pageimage->ext === 'png') { $pageimageSource->webp = false; } // Your srcset code Cheers, Chris
-
Hello! I'm wondering if it's possible to convert webp all filetypes except png? I have a strange result with it (it look pixellized). Thanks Mel
-
[solved] Image Variations not recreated after cropping?
ukyo replied to bernhard's topic in General Support
There are some issues about Pageimage class, when creating webp https://github.com/processwire/processwire-issues/issues/2016 https://github.com/processwire/processwire-issues/issues/2048 i don't want to do that :(, i am not using Pageimage class for creating images variations anymore. -
This seems to be a fundamental feature so I must be missing something... I have a RockPageBuilder element called "Gallery". I don't think that it matters or RockPageBuilder has anything to do with it, but maybe I'm wrong, so I mention it for completeness. In that gallery block the client can upload images and in my code I create thumbnails from that images and show a gallery like this: Images are output like this: $images->eq(0)->maxSize(800,800)->webp->url Today the client contacted me, that she cropped one image, but the image does not update on the website... I thought I forget the cache busting timestamp, but that's in place and not the issue. Looking into the variations of the image I clearly see the issue: Image #0 and #2 are the newly cropped images. All others are outdated. Any idea why ProcessWire does not recreate those variations? I have done some research and found one old issue by myself that has been closed by @netcarver and I found this module by @Robin S But I'm wondering... am I missing something obvious? Why would I need an additional module to make sure that ProcessWire resets image variations when the underlying original image has been cropped? That makes no sense to me? Thank you very much for your help!
-
Hi @horst, is this module still being actively developed? I'm running into the problem (again) that WEBP versions of a resized crop are not updated after the crop is modified (ProcessWire 3.0.246 installed). I thought this was solved here, but apparently not. When I apply your old fix in wire/core/Pageimage.php, everything works as expected (although the webp function has changed in the meantime and I'm not sure how to put your fix in there).
-
I think, you only need to change to CAI4, to get this work. I will search for the correct link here in the forum with instructions for the change from CAI3 to CAI4. EDIT: here is the link: https://processwire.com/talk/topic/23294-croppableimage-with-webp-support/ ...
-
Hello! Is there any way to force the recreation of the webp variation when the crop is edited?
-
And here's the answer to migrating large sites! Thanks Ryan. https://processwire.com/blog/posts/webp-images-on-an-existing-site/#implementing-the-webp-strategy
-
If you enable webp, where the easiest way on a legacy site to get a webp version of every image in the CMS?
