Search the Community

The core InputfieldImage does not support webp format.

If i add a webp image url i get error "Pageimage: johnrogershousemay2020.0x260.webp - not a supported image type"... ? Any idea whats wrong?

Using PNG compression for pictures might generate large files. Even with your black gradient try to export the original image as JPEG instead. The file size should be considerable smaller for all variations including webP files.

Hello, I was originally going to include this as part of my forthcoming AdminStyleChroma module but decided to roll it out as its own module. https://github.com/solonmedia/ImageColorThief Please check out the readme for a deeper explanation - but the short version here for now: This module adds two new methods to the Pageimage class, allowing you to extract the main dominant color or a palette of prevalent colors from an image. You can use the entire image to evaluate color dominance, or you can use a select swatch from the image based on inset rectangles from the edges, blocks at each corner, or a swatch centered on the focus point if you choose to use it. You can also select the granularity of the quantization to get more accurate color results. This is not an eyedropper algorithm - the colors are close approximates. Great if you have color schemes you'd like to coordinate with the headliner or seasonal images, or if you'd like to be able to sort a gallery of images by dominant color, etc. Looks real nice, for example if you are running a ken burns style image fade background and the images are sorted by a channel, etc. How to sort them? Ugh that's something I haven't tackled - yet: https://www.alanzucconi.com/2015/09/30/colour-sorting/ It works on JPG, GIF, PNG and WEBP images. It outputs RGB, HEX, RGB Integer, raw Array with R, G, B elements or an object. Once I've got myself registered and whatnot I'll submit it to the Modules Directory. Installs from zip for now: https://github.com/solonmedia/ImageColorThief/archive/refs/heads/main.zip I'd consider it Beta - the underlying libraries are pretty stable but I'd like to run a few more tests on input. Let me know if you have any questions/thoughts.

Its copied on the bottom because its an example of a feature not finished on another (not really) WIP module. it does what you are talking about. Copy image from another field, or from a screenshot, it doesnt matter, I understood you was talking about « clipboard ». The specific reason is as you are limited on mimetypes when working with the clipboard write api, in the example above it render the blob in a canvas, on différent format, including webp. Voila 🙂

I would expect it to contain only images with the exact dimensions I specified, like this: <picture> <source srcset="FILENAME.800x400-srcset.webp 800w, FILENAME.1600x800-srcset.webp 1600w" sizes="(max-width: 900px) 100vw, ((min-width: 901px) and (max-width: 1200px)) 67vw, ((min-width: 1201px) and (min-width: 1201px)) 50vw" type="image/webp"> <source srcset="FILENAME.800x400-srcset.jpg 800w, FILENAME.1600x800-srcset.jpg 1600w" sizes="(max-width: 900px) 100vw, ((min-width: 901px) and (max-width: 1200px)) 67vw, ((min-width: 1201px) and (min-width: 1201px)) 50vw" type="image/jpeg"> <img src="FILENAME.800x400.jpg" alt="..." class="hero-img" width="800" height="400" loading="lazy"> </picture> Instead of the 1600x800 variants I get the original image URL again. Disabling upscaling does not change it. Of course I could resize the image before rendering as in your example, but shouldn't it be possible to pass an array for the srcset and get exactly the values you specified? This is a fix of course, but feels more like a hack than a solution. Cheers, Flo

@nbcommunication I have to correct: The update fixed it in one specific case. I still have the problem in another place: $img->render( [ 'picture' => true, 'srcset' => [ 'rules' => ['800x400', '1600x800'], 'options' => [ 'upscaling' => true, ], ], 'allSets' => true, 'sizes' => '(max-width: 900px) 100vw, ((min-width: 901px) and (max-width: 1200px)) 67vw, ((min-width: 1201px) and (min-width: 1201px)) 50vw', 'class' => 'hero-img', 'alt' => "...", 'markup' => "<img src='".$img->size(800, 400)->url."' alt='{alt}' class='{class}' width='".$img->size(800, 400)->width."' height='".$img->size(800, 400)->height."'>", ] ) leads to this markup: <picture> <source srcset="FILENAME.800x400-srcset.webp 800w, FILENAME.webp 1600w" sizes="(max-width: 900px) 100vw, ((min-width: 901px) and (max-width: 1200px)) 67vw, ((min-width: 1201px) and (min-width: 1201px)) 50vw" type="image/webp"> <source srcset="FILENAME.800x400-srcset.jpg 800w, FILENAME.jpg 1600w" sizes="(max-width: 900px) 100vw, ((min-width: 901px) and (max-width: 1200px)) 67vw, ((min-width: 1201px) and (min-width: 1201px)) 50vw" type="image/jpeg"> <img src="FILENAME.800x400.jpg" alt="..." class="hero-img" width="800" height="400" loading="lazy"> </picture> The intrinsic dimensions of the image are 1080x721. I am really curious why the update worked in one place and not in the other. Do you need more information to investigate?

From a cursory search on the feasibility of this request: AVIF support does appear to be possible, but there would be more checks required to verify the server configuration meets the minimum requirements... ImageMagick supports AVIF as of v7.0.25 or later. PHP's GD library - as of PHP version 8.1 - supports AVIF when compiled with AVIF support, and also requires support via the libavif module. The libavif module must be version 0.8.2 or greater. At this point there might need to be a decision to determine how to handle image processing: Does a PNG get uploaded and processed and converted to both AVIF and WEBP, and then the smallest of the three options is what is served - or does the site admin decide one or the other (despite gains or losses)? Add in any variations and that's a lot of processing just for a single image.

Hello, everyone, I have been experiencing an issues with PW ImageResizer. It usually works quite well but for images with lots of dark areas it seems to degrade the image. Looking through the forum and trying out different settings I came close to what I need but the colours are still off... Here is the issue: Original: Converted by ImageResizer to JPG and WebP (WebP is slightly worse): The settings I have are those: array('upscaling' => false, 'cropping' => false, 'quality' => 100, 'hidpiQuality' => 90, 'sharpening' => 'none', 'defaultGamma' => -1); I have also tried: – Changing the color space to RGB from sRGB in the ImageSizerEngineMagick.php but this didn't work as expected after I read more about it. – Converted successfully, without any loss in quality, with my local imageMagick. Probably it's a newer version? Anyways, my question is is this known issue, can something be done about it and if not—can I just use the original image and add a toggle switch on the client side?

@horst as the image guru here, how feasible is it? I find that the lack of native AVIF support is an increasing performance issue for me. After more time using this new format, the compression gains are really quite amazing, and consistent (versus Webp). PW-powered sites — especially those that use lots of images such as photography / travel sites — could be much leaner and faster.

@netcarver Using PW 3.0.210 and nothing special in .htaccess other than ProCache directives, https only and <IfModule mod_mime.c> AddType image/webp .webp </IfModule> Strange that it only happens on small images. No problem at all on larger image file sizes. I changed the default image quality from 90% to 100% in case that made the file invalid but no difference. All PHP image processing modules seem OK. As for ModSecurity, yes it's on a shared host that has ModSecurity. That's been a nightmare on many occasions for other things. I have the web host on speed dial. Good call to check that one.

Hello, We've recently been researching how to use ProcessWire in a horizontal scaling environment (multiple server instances using a load balanced, read replica databases), and ran an experiment using AWS Elastic Beanstalk. Getting read replica databases up and running was easy - it's built in to the core: https://processwire.com/blog/posts/pw-3.0.175/#how-to-use-it-in-processwire Using multiple server instances throws up one big problem: how to keep the filesystem on multiple instances in sync given that ProcessWire doesn't currently support using an external service (like s3 or EFS) as the filesystem. The solution that we came up with is to use various Cloudflare services (R2, Stream, Images) to serve file assets, and we've built a module to facilitate this: We're not using this in production yet, but our tests on EB were successful, and we're confident this will solve the main part of this problem. However the Cloudflare Images service is still quite new and there's still features to be rolled out (e.g. webP for flexible variants) so it can't be considered a complete solution yet. Additionally, we use ProCache and this presents an additional multi-instance problem - if the cache is cleared on one, how can we clear it on all? Our solution is to log clears in the database and use this to sync up clearing. We built another module: Again this worked well in our test, but isn't yet being used in production. The main purpose of this thread, aside from sharing these potential solutions, is to ask for and discuss other experiences of hosting ProcessWire in a horizontal scaling environment. What solutions did you come up with (if you want to share them) and are there other potential issues we maybe haven't thought about? Cheers, Chris

I'm developing a site using HTMX to swap images in a gallery (it uses 'picture' element and 'srcset' so I didn't want to load all the markup at once) alongside PW regions and it works great. I haven't really encountered any problems or gymnastics -- but maybe my use-case is simple enough? <?php namespace ProcessWire; $imgMarkup = ''; $thumbMarkup = ''; $imgNum = 0; /** Build the gallery fragment (the bit that changes via HTMX) before output */ if ($page->gallery && $page->gallery->count() > 0) { $imgNum = $input->get('img', 'int', 0); // get image index number from GET var (AJAX and no-JS) $galleryImg = $page->gallery->eq($imgNum); // get the image from index // The image markup (actually rendered from a custom page class) $imgMarkup = '<picture> <source type="image/webp" srcset="..."> <img src="..." width=".." height="..." alt="..." srcset="..." sizes="..."> </picture>'; // If it is a ajax (HTMX) request, just echo the image markup and stop PW processing tyhe rest of the template. if ($config->ajax) { echo $imgMarkup; return $this->halt(); } /* When doing HTMX ajax swap, the rest of this template won't be rendered */ // Build the clickable thumbnails that do the swapping (simplified) foreach ($page->gallery as $item) { $thumbMarkup .= '<li><a href="..." hx-get="..."><img src="..." width="..." height="..." alt="..."></a></li>'; } } ?> <!-- The markup regions --> <pw-region pw-id="imageViewer"> <div class="image-wrapper"> <figure class="image-main-wrapper" id="mainImg"> <?=$imgMarkup?> </figure> <div class="image-thumbs-wrapper"> <!-- where the HTMX magic happens -- note the additional hx-headers, which allows PW's $config->ajax to work --> <ul class="image-thumbs" hx-trigger="click" hx-target="#mainImg" hx-swap="innerHTML" hx-headers='{"X-Requested-With": "XMLHttpRequest"}' > <?=$thumbMarkup?> </ul> </div> </div> </pw-region> <pw-region pw-id="pageContent" class="content-left">....</pw-region> <pw-region id="sidebarContent">...</pw-region> It just works... no need to faff with cancelling prepend/append templates etc, just rember to add the extra hx-header (also, you can do it once on a parent element), you don't need to add it to every call. I haven't ever tried, so I'm not 100%, but there might be a way to automatically add the header to every HTMX call with a bit of javascript in the header/footer. I feel all the tools are probably already there, but if there is an even easier way, though, that would be great.

When generating a WebP image from the originally uploaded file (not as a result of using the 'size()' method), I see the following file error in the logs: unlink: Given filename is not a file or link: /site/assets/cache/WireTempDir/.PFM0.24368300T1680350648RozEvGgLCG8JdZGUwLM/0/cookies.960x0.png-tmp.png Note that the actual original filename is 'cookies.png' -- but the error message appears to show PW has attempted to use a (non-existant) variation. The simplified code I'm using in the template (it will eventually be a srcset, hence the small 'width' to large file): // Cut code fetching the $img itself echo '<img src="' . $img->webp->url . ' " width="300">'; The strange this is, that the correct WebP image *is* generated and subsequently served ('cookies.webp'), it just throws a hissy fit while doing it (once generated no error is shown). This error does not occur when generating WebP images from variations. Is this a known issue, should I submit an issue on Github?

For those who just want to let users upload WEBP format and are looking for a workaround, here is a simple module that converts WEBP to JPG on upload: I wonder though... how is it that the user acquired the WEBP image in the first place? Surely they didn't just pinch it off somebody else's website... 🤔

WebP to JPG Converts WebP images to JPG format on upload. This allows the converted image to be used in ProcessWire image fields, seeing as WebP is not supported as a source image format. Config You can set the quality (0 – 100) to be used for the JPG conversion in the module config. Usage You must set your image fields to allow the webp file extension, otherwise the upload of WebP images will be blocked before this module has a chance to convert the images to JPG format. https://github.com/Toutouwai/WebpToJpg https://processwire.com/modules/webp-to-jpg/

I have more and more customers complaining that they can't upload webp images. I understand that webp is not the ideal master image format, but neither is jpeg. The webp browser support is also so good now that it would not be necessary to generate jpeg/png versions from webp.

I want to show you a project that I started developing in summer of 2022 and that went online in january 2023. Kulturhaus Wilster ("Arts Centre Wilster") https://www.kulturhauswilster.de The Kulturhaus Wilster - also called "Wilster's living room" by many visitors - is a socio-cultural center in the heart of Wilster. Wilster is a small City located north from Hamburg, germany. Despite the fact that this is a small venue they offer large amount of events. The events range all the way from concerts to theatre and everything inbetween! The old version of the site was a super simple WordPress website in a black-and-white only color scheme. In my opinion it did no justice to the very colorful program that the Kulturhaus offers so I tried my best to bring some color into the game. The whole website should have a shabby-chique look combined with clean, modern elements. The Homepage offers a preview of the next 8 upcoming events. A blog section is also included and the latest post is displayed next to the event calendar book as PDF download. The event pages offer a quick-reservation form (tickets are not sold online) and a quick look to the next upcoming events in the sidebar. The website features a large event calendar. It was a really nice exercise in using ProcessWires very own paging and selector features. Events can be searched and filtered by type (and month), too. All with a few lines of code only. For example "Look for events that take place in the future in a specific category" $events = $pages->find("select_event_cat.title~|%=$c, template=event, date_event>=today, sort=date_event, sort=time_from, limit=6"); Besides that the website features some colorful content pages with large images, galleries, textboxes and some teaser elements. The editors of the website are able to display all facets of the Kulturhaus this way. Tech Talk: Frontend Framework is Bootstrap 4.6 ProcessWire Modules used on this one are: - WireMail: SMTP (https://processwire.com/modules/wire-mail-smtp/) - SEO Maestro (https://processwire.com/modules/seo-maestro/) - All in one minify for asses (https://processwire.com/modules/all-in-one-minify/) - PageImageSource for webp image srcsets (https://processwire.com/modules/pageimage-source/) - JkPublishPages is used for time-controlled publishing of the blog posts. Please check out this module! Thanks @Juergen - @bernhards great RockFrontend was also used. In this particular project only the autorefresh feature (because this module was brandnew back then and development of the page was almost done). But even "only" using autorefresh makes it worth using it! Please have a look:

With method 2 htaccess should rewrite it from webp to jpg shouldn't it? Assuming that is what you're expecting it to do, I found the example htaccess code didn't work for me. But I found that the code below did work (of course YMMV). RewriteCond %{HTTP_ACCEPT} !image/webp RewriteRule (.+)\.webp$ $1.jpg [T=image/jpeg,E=REQUEST_image]

Hi, i have implemented htaccess rewrite to our htaccess within section 8. i've followed this instructions and used method 2: https://processwire.com/blog/posts/webp-images-and-more/ I also added a hook to ready.php. The webp format is created and i can hardcode it into our main file. but our htaccess doesnt rewrite the url from png,jpg to webp? Does anyone have an idea?

When creating image variations, is there a way to suppress the creation of the variations in the original image format and only create the webp format? I can currently see (in PW 3.0.210) that a call to $image->width($width)->webp first creates a variation in the original file format. Is this a necessity? I only really need the webp variations, and creating unnecessary variations is time-consuming and takes up disk space.

If you actually want to upload an image using curl, you can do this: curl "https://example.com/my/page/upload" -F mypic=@"C:\temp\guy.brush" -F tells curl to make a multipart/form-data request (the full switch is --form). “mypic” is the name of the POST parameter, so that’s what we’ll be looking for on our server. ProcessWire code: <?php namespace ProcessWire; //return a bad status if anything weird happens http_response_code(500); //let’s pretend the POST request goes to the page to which we want to add the image //here you would check if the request is allowed etc. $page->of(false); //use ProcessWire’s tempDir feature to generate a temporary directory which will receive the image //the temporary directory will be destroyed after one hour $upload_dir = files()->tempDir('', 3600); //here’s the name “mypic” from the curl command again. $u = new WireUpload('mypic'); //here you could put some more settings for WireUpload, such as setMaxFileSize() or setOverwrite() $u->setMaxFiles(1); $u->setDestinationPath($upload_dir); $u->setValidExtensions([ 'jpg', 'jpeg', 'png', 'gif', 'webp', 'brush' ]); //read the file from the request into $upload_dir and receive an array of filenames $uploadedFiles = $u->execute(); //handle errors $uploadErrors = $u->getErrors(); if ($uploadErrors) die(var_dump($uploadErrors)); //the image is still in the temp dir. If everything went well, //we now need to move it to our page and save the page. $path = $upload_dir . $uploadedFiles[0]; $pageimage = $page->images->add($path)->last(); //delete the file from the temporary directory unlink($path); $page->save(); http_response_code(200); die('wow thanks for the pic, it’s very nice'); //this will show up in the curl command line

@bernhard Imho modifiers like 2x should not be necessary at all. It took me quite some time and testing to wrap my head around responsive images and my experiments with the current browsers showed that whenever my sizes attribute was accurate, the browser chose the closest image resolution from the sourceset taking pixel density of the screen into account automatically. This is a (rather complex) example for my usage of PageimageSource on a page with a masonry style layout that can have from 1 to 5 columns and the sizes also take padding etc. into account (which might be overkill): $img_markup = $img->render([ 'picture' => true, 'srcset' => ['360', '480', '640', '800'], 'sizes' => '(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))', 'class' => 'teaser-img proportional', 'alt' => $img->description, 'markup' => "<img src='{$img->width(480)->url}' alt='{alt}' class='{class}' width='".$img->width(480)->width."' height='".$img->width(480)->height."'>" ]); Output: <picture> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.webp 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.webp 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.webp 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.webp 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/webp"> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.jpg 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.jpg 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.jpg 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.jpg 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/jpeg"> <img src="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0.jpg" alt="Klimanagepasster Wohnunsgbau" class="teaser-img proportional" width="480" height="282" loading="lazy"> </picture> @nbcommunication Great module, I like it a lot! Nevertheless my example also shows a little incovenience I experienced when using PageimageSource: I need to output width and height attributes for my img tag and using the markup option (as shown above) was the only way to accomplish this. Using the height and width options of the render method rendered the srcset useless (all the same sizes). Maybe you could implement an option that outputs the size of the first entry from the srcset as width and height attributes of the img? Especially when using lazyloading the width and height attributes serve as proportional placeholders and prevent layout shifts. Cheers, Flo

Hello there! I recently updated my own website - I am a frontend developer living in the northern part of germany. https://www.thumann-media.de The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features. It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread). The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll). Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers: I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle? The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one. Tech Talk: Some of the things I used: - ProFields used for this one (repeater matrix, combo) - Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think... - https://github.com/nbcommunication/PageimageSource for image srcsets with webp support - Ajax driven contact form with bootstraps frontend validation - AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify - SEO Maestro - WireMail SMTP AOS.js vs GSAP Which animation library you should use? I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable. Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb. AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try. So that's all for now. I wish all of you a great weekend!

If using server side resize, a webp version of the uploaded image is automatically created (at least if the uploaded image is larger than the field's max dimensions). But when using client side resize this doesn't happen. Is it possible to have a webp version automatically created while using client side resize (without resorting to creating a variation)?