I've always been drawn to working with images, and when responsive images came onto the scene, I dove deep into learning everything I could about them.
I've written extensively about Responsive images if you need a refresher, but today, let's focus on modern image formats. In particular, WebP.

WebP

WebP is a modern image format developed by Google that provides superior compression and quality compared to traditional formats like JPEG and PNG. It supports both lossy and lossless compression, transparency, and animation, making it a versatile choice for web images. WebP helps improve website performance by reducing file sizes, which leads to faster loading times and better user experience.

Is WebP widely supported?

Since 2020, all major browsers support WebP. (Check caniuse for details). My site, this site, uses WebP exclusively for most images and although it is not a big site, I still see performance improvements.

Updating Drupal to use WebP

You would think that a big upgrade like this would be a complex task but you'll be surprised to learn that enabling WebP for new and existing images in Drupal is straightforward. Let's quickly go over the steps.

1. Edit each of your image styles and add the Convert effect.
   

   Fig. 1: Selecting the Convert effect for an image style.

2. Select and add the WebP format to the image style.
   

   Fig. 2: Adding the WebP format to an image style.

That's it!

Fun fact!: WebP support was introduced to Drupal core in Drupal 9.2.0, which was released on June 16, 2021. Before this core integration, WebP support in Drupal was only available through contributed modules or custom code. The inclusion in core made the format's benefits available to all Drupal 9.2+ sites without requiring additional modules.

Demo

I did a quick and simple test to show the difference in file size when adding a typical JPEG image to an article, then converting it to WebP using the steps above. The test was done in Drupal 10.x.

First: Using a JPEG image

Using a JPEG image on an article node, shows a file size of 289kb.

Fig. 3: Example shows using a JPEG format.

Then: Using a WebP image

After converting the imag eto Webp by updating the image style of that image, the file size was reduced to 76kb. That's about 60% file size reduction.

Fig. 3: Example shows using a WebP format.

NOTE: This was a pretty basic comparison test. File size reduction will vary depending on original file zize, format, and other preferences on your site.

What about other formats like Avif?

The Avif image format is also a great option with many benefits. The browser support is really good at the time of this post (See caniuse), and it's worth looking into it as an alternative to WebP, or even combining the two depending on your media needs.

In closing

It's all about the small wins. This one is pretty simple but can provide significant performance benefits. Give it a try!

Resources

• Google's page on WebP
• WebP files explained
• Mozilla's Image file type formats guide

Ask Freelock: Do I need a Web Application Firewall?

Craig asks,

Ask Freelock

Drupal is more than just a content management system; it’s a gateway to innovation, creativity, and endless possibilities. Before stepping into the Drupal world, I saw CMS platforms as rigid structures with predefined functionalities. But Drupal? It completely changed my perception. It’s not just a tool, it’s a playground for developers, where ideas come to life, solutions evolve, and digital experiences are redefined.

As I began my journey with Drupal, I quickly realised that it’s more than just a platform, it's an ecosystem. From its modular architecture to a thriving open-source community, Drupal offers something for everyone, whether you’re a beginner like I was or an experienced developer looking to push boundaries. The more I explored, the more I realised that Drupal isn’t just about building websites, it's about creating dynamic, scalable, and future-proof digital experiences.

TL;DR: DDEV was a huge force multiplier, enabling me to focus on writing a WordPress plugin to export WordPress content for use in Grav CMS. More information on the plugin can be found at the GitHub repository wp2grav_exporter.

Popular content managment systems like WordPress and Drupal store content in databases (MySQL/ PostgreSQL/ etc.). Grav CMS stores content and configuration in local files (Markdown and YAML respectively). Grav's simpler flat-file storage mechanism is one of the things that drew me to start dabbling with it.

Why consider leaving WordPress?

While the recent shenanigans from Automattic's CEO accelerated my work, it wasn't the primary reason I developed this content exporter. I fell in love with Grav development back in 2018 when I first started writing a Drupal 7 exporter, and I wanted to port something similar over to WordPress. I value data portability, empowering the end user to control where their content is used! In the end, it's about giving options.

Why DDEV?

DDEV is a fantastic tool, and it is perfect for my PHP development workflow. It made spinning up two local developlment sites a breeze. I normally relish building and configuring my own automated environments, but DDEV makes it so simple to configure local environments. Additionally, DDEV comes with many "quickstart" configurations, meaning that popular CMS's like Drupal and WordPress work out of the box with nearly all settings ready to go.

Development setup

I made two different directories, one for WordPress and the other for Grav. After running ddev config on each respective directory, ddev start on each starts serving the content.

I installed DemoPress in the WordPress environment to help generate random test content and users to export.

Xdebug

Step debugging is imperative while trying to inspect content in-flight. Xdebug needed to listen on two different ports to avoid collisions between the two sites, and the DDEV docs are informative on how to configure this. I personally use VSCode, but other IDE's should work just as well, too. Step debugging was crucial to finding appropriate data structures and information I needed my converter plugin to use in a Grav site.

Wp2grav_exporter WordPress plugin

The wp2grav_exporter plugin is the resultant labor of love. It automatically exports:

• Users and assigned roles
• Post Types, including custom types
• Posts and associated custom fields, including ACF fields
• File attachments
• Site metadata

Additional screenshots of example content exports can be found at the plugin's GitHub page.

After running the export, content was drag-dropped between my two DDEV directories, and I could immediately test how content looked. The exported post configurations are encompassed in a Grav plugin, so the end user is free to use whatever theme they want!

Final thoughts

DDEV has saved me countless hours with its easy setup and dependability. If you haven't yet taken it for a test spin, I can't recommend it enough!

Find an issue with my exporter? Submissions are welcome at the project's issue queue!

The European Accessibility Act (EAA) introduces new EU-wide rules to ensure digital products and services are accessible to everyone, including people with disabilities. By June 28, 2025, all businesses and organizations that offer digital…

Hi there! What is the best way to improve Drupal development and encourage teamwork among development groups? This question is important for many developers, especially as remote teams and complex projects become more common. Setting up and maintaining traditional Drupal development environments can take a lot of time, often leading to problems and delays. In this article, your Drupal development company will look at how devcontainers can improve your Drupal cloud development process for the better.

Doesn't exist.

I don't know if this was ever common knowledge, but it's certainly not a new idea. Free software, per the Free Software Foundation, is only free if people are free to redistribute it commercially without having to pay the author. In a sense, every time you build a Drupal site for someone else for a fee, you are charging to distribute free software to them that was authored by other people while providing additional services to tailor it to their needs.

If I had to guess, the more mainstream open source as a development methodology became, the more people adopted it without understanding or appreciating its philosophical origins. Open source as a growth strategy became inevitable while simultaneously kicking against the goads of the four essential freedoms of the movement that birthed it, even though these freedoms are what enabled multi-billion dollar ecosystems like Drupal's to grow.