Search the Community

If you enable WebP, it creates variants for all images. However, Ryan's .htaccess code is from here: https://processwire.com/blog/posts/webp-images-and-more/#webp-image-strategies-in-processwire Doesn't rewrite GIFs, I presume this is because they can be animated. RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.(jpe?g|png)(.*)$ /$1$2$3/$4.webp [L] Given this, it seems inefficient to create a webp variants for GIFs. Does the core have an inbuilt way to disable this, or is it by design that this isn't offered/done automatically?

Hey thanks for the link. Neat module. Was there a technical or philosophical issue with support for webp as input source image?

Did you check https://processwire.com/modules/webp-to-jpg/ ?

Hi, I have a question regarding WebP support that I would like to clarify. I added WebP to my allowed image extensions, and while uploads work fine and the original images display correctly, I'm seeing "not a supported image type" errors when ProcessWire tries to generate thumbnails or variations from WebP source files. After some digging, I found Ryan's blog post from 2019 which says: > "WEBP is purely an output format, not an input format... PNG and/or JPG images should still be the standard for any images you upload to your site." So it sounds like this is expected behaviour - WebP is designed for output (converting JPG/PNG → WebP for delivery) rather than input (uploading WebP and resizing it). Just wanted to confirm: Is this still the case in 2026? Is there any plan to support WebP as a source format in the future? For those who do allow WebP uploads - do you just accept that variations won't be generated? For now, I'm working around it by skipping resize attempts on WebP source images and using the originals, which works fine but results in larger file transfers for thumbnails. Thanks! Peter

Looks great. New to PW here and have been scanning the forums for best practices on including images on static pages (no image fields). A media library seems to be the way... I wanted to understand how I might use the PageImageSource module to render webp srcsets on the fly for static images but was disappointed to learn that it can only be used with PageImage images. https://github.com/nbcommunication/PageimageSource I think ProcessWire would be a hard sell to many clients without some a full-featured image library solution, which is a great pity. The UI looks well done.

Hi @elabx Thanks for your post. Your code looks clean but I'd like a little more flexibility ideally for my use case. I'd like the option to choose any image from my projects (not just the first). Also, sometimes I'll need to pick more than one image from the same project for display on the masonry gallery. For this reason, I'm thinking image tags might be the way to go but then the question is, how do I wrap that image in a link to its respective project page.. Page references seem like the way to go, but I'm still trying to wrap my head around how these work tbh. Custom image fields could also work but I'm trying to keep things as simple as possible. I also don't want to screw up alt fields for SEO and I'm looking to use PageimageSource to manage srcset and webp automatically (maybe I'm looking to learn too much at once for my first PW site 😂) https://github.com/nbcommunication/PageimageSource Assuming all image fields are image arrays with tags enabled in admin, could I do this?: // "sections" is the repeater on my projects pages that contain images and content. // "project_header" is a repeater in project template that contains project title and info. // Can I can use find() to get repeaters with template=repeater_repeaterName, like this? $projSections = $pages->find("template=repeater_sections, images.tags=gallery"); foreach ($projSections as $section) { $projectPage = $section->getForPage(); $title = $projectPage->project_header->first()->project_title; foreach ($section->images->findTag("gallery") as $img) { echo "<a href='{$projectPage->url}' title='{$title}'>"; echo $img->render(); echo "</a>"; } } It seems inefficient to me to have to parse through all project content repeaters for tagged images like this but maybe with caching it wouldn't be a problem? In my setup project title and description text is in one repeater, and all images are in another - not sure if that complicates things. I would like to wrap each image in a <a> that links to the respective project page.

We recently launched the digital home for the TECH.LAND Xperience, a cross-border innovation festival. The project required a robust system capable of handling complex schedules and providing a seamless, app-like user experience. Technical Stack & Advanced Techniques: ProcessWire CMS & RockMigrations: The flexible backbone for managing dynamic content. We used RockMigrations for a completely code-driven development workflow, ensuring that all fields, templates, and configurations are version-controlled and easily deployable. Modern Frontend Workflow: Built with RockFrontend and Vite, we utilized the Latte template engine for clean, secure, and maintainable markup. This setup allowed us to use a modern build pipeline with HMR (Hot Module Replacement) during development. Tailwind CSS & DaisyUI: For a rapid, modern, and futuristic UI. DaisyUI provided the foundation for complex UI components like the Side-Panel drawers. AJAX, Fetch API & HTMX Integration: To keep the user experience fluid, we implemented a decoupled approach for session and speaker details. Instead of traditional page reloads, content is fetched dynamically from dedicated ProcessWire endpoints (/ajax/speaker/, /ajax/event/). Interactivity with Alpine.js: We leveraged Alpine.js for lightweight frontend logic, managing the state of the program filters and the dynamic drawer UI without the overhead of a heavy framework. Dynamic Drawer UI: Speaker biographies and session details are presented in a modern Side-Panel component. This allows visitors to explore details without losing their position on the interactive timeline. Hash-URLs & Deep Linking: We implemented Hash-based URLs for the drawers. This ensures that every session and speaker has a unique, shareable link that opens the corresponding drawer automatically on page load, while also supporting the browser's "back" button functionality. Interactive Program Timeline: A high-performance schedule with four parallel stages. Modular Content with RockPageBuilder: For editorial flexibility, we used RockPageBuilder, allowing the team to create complex landing pages with modular, reusable components. Performance Optimization: Fast loading times were achieved through WebP delivery, lazy loading are integrated into our Vite build process (custom module). Key Modules used: RockMigrations: Code-first field and template management. RockFrontend: Vite integration and Latte support. RockPageBuilder: Modular content blocks for editors. SeoMaestro: Comprehensive SEO management. TracyDebugger: Indispensable for rapid development and debugging. Key Success Metrics: 5,000+ Visits shortly after launch. High Engagement: Seamless navigation through complex datasets with zero layout shifts. Editorial Efficiency: Automatic session-to-speaker assignment and drag-and-drop scheduling. complete case-study in german: Explosives Wachstum: Über 5.000 Besucher für die TECH.LAND Xperience kurz nach Launch Visit our website for more insights: dotnetic.de techland-xperience-dotnetic-referenz.mp4

Hi everyone, This module completely replaces the default ProcessWire image sizing engine with the powerful Intervention Image v3 library. The goal was to modernize how we handle images in ProcessWire, bringing in features like AVIF support, superior resizing quality, and strict aspect-ratio handling, while keeping the API compatible with what you already know. 🚀 What does it do? Replacement: It hooks into Pageimage. You can keep using $image->width(300), $image->size(800, 600), or $image->crop(...) just like you always have. Modern Formats: Automatically handles WebP and AVIF generation. Smart Responsive Images: It introduces a configuration-based approach where you define Breakpoints, Grid Columns, and Resizing Factors. The module uses these settings to automatically calculate and generate the perfect srcset for your layouts. ✨ New Methods: render() and attrs() While standard methods work as expected, I’ve added/updated methods to handle modern HTML output: 1. $image->render(string $preset, array $options) This outputs the complete HTML tag. It automatically handles: The <img> tag with srcset and sizes. The <picture> tag with <source> elements if you have enabled extra formats (like AVIF/WebP) in the settings. Lazy Loading & LQIP: It automatically generates a Low Quality Image Placeholder (pixelated/blur effect) and applies a base64 background to the image tag for a smooth loading experience. // Example: Render a 'landscape' preset defined in module settings echo $page->image->render('landscape', ['class' => 'my-image']); 2. $image->attrs(string $preset, array $options) Perfect for developers who use template engines like Twig or Latte, or prefer full control over their HTML. This returns an array of attributes instead of an HTML string. $data = $page->image->attrs('landscape'); // Returns array like: // [ // 'src' => '...', // 'width' => 1200, // 'height' => 675, // 'srcset' => '...', // 'sources' => [ ... ], // Array for picture tag sources // 'style' => 'background-image: url(data:image...);', // LQIP Base64 // 'class' => 'iv-lazy ...' // ] ⚙️ Configuration Strategy Instead of hardcoding sizes in your templates, you configure your design tokens in the module settings: Breakpoints (e.g., 1200px) Aspect Ratios (e.g., 16:9) Grid Columns (e.g., 1-1, 1-2, 1-3) Factors (e.g., 0.5, 1, 1.5, 2 for Retina support) The module calculates the necessary image dimensions based on these combinations. If you request a specific aspect ratio, it ensures strict adherence to it, preventing 1px rounding errors. 📝 A Note on Documentation I wanted to get this into your hands as soon as possible, but due to a heavy workload, I haven't finished writing the detailed README.md yet. Currently, you can grab the code from GitHub (link below). I will submit this to the official ProcessWire Modules Directory after add some other features and after update readme.md Download / GitHub: GitHub Repo I’d love to hear your feedback and suggestions!

Hi everyone! 👋 I'd like to share SquareImages - a simple module that creates perfect square images from any source format. Born from a real-world need: displaying vertical product images (like Coca-Cola bottles) uniformly in galleries and grids without distortion or awkward sizing. The Problem // Traditional methods don't work well for mixed aspect ratios: $image->width(300); // Too narrow for vertical images $image->height(300); // Too wide $image->size(300, 300); // Distorted The Solution // One simple method - smart cropping, perfect squares: $square = $image->square(300); Key Features 🎯 Smart Cropping - Automatically centers on longer dimension 📦 Format Preservation - Maintains original format (JPG/PNG/GIF) 🌐 WebP Support - Chain with ->webp() for compression ⚡ Performance - Fast URL generation 💾 Automatic Caching - Built on PW's image engine Quick Example <div class="product-grid"> <?php foreach ($page->products as $product): ?> <?php $thumb = $product->photo->square(300); ?> <img src="<?= $thumb->url ?>" alt="<?= $product->title ?>"> <?php endforeach; ?> </div> Perfect uniform squares, regardless of source dimensions! API Methods $image->square(400); // Main method $image->squareWidth(500); // Based on width $image->squareHeight(600); // Based on height $image->getSquareURL(300); // Direct URL (faster) // WebP conversion $image->square(500)->webp(); // 25-65% smaller files Installation GitHub: https://github.com/mxmsmnv/SquareImages cd site/modules/ git clone https://github.com/mxmsmnv/SquareImages.git Or download ZIP and extract to /site/modules/SquareImages/ Then refresh modules in admin and install. Use Cases E-commerce product galleries Team member avatars Blog thumbnails Social media previews Instagram-style grids

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

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.

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