How to Compress Images with xnConvert

This is a quick take on how to optimize your images before uploading them to Webflow. Webflow has excellent image optimization capabilities, including its new AVIF support and long-standing WebP conversion. These features can optimize assets in your site-wide assets or CMS, but it's not an automated system, so as your clients add content over time, unoptimized images may start consuming more bandwidth than you'd like.

Suppose you're bringing in stock photography or, as in this example, some Midjourney-generated artwork. After downloading, you need to prepare the images for Webflow. Let's say you have a directory with a couple of files. These files might be in WebP format or any other format, such as JPEGs, GIFs, or PNGs. While Webflow allows these uploads, their file sizes are often larger than necessary due to excessive dimensions.

To address this, I use a free tool called XnConvert for image conversions. It's a fantastic, fast, efficient, and highly configurable tool. I’m so impressed that I feel compelled to donate to the creators. The process is simple: select the images you want to convert and drop them into XnConvert. The tool immediately provides information about the images, including print size, creation date, and more.

In XnConvert, you have various options. After setting it up, you can click "convert," and it will generate the output based on your profile settings. Profiles in XnConvert allow you to save and load different conversion settings, including file export settings, output locations, and specific settings like resizing options.

For example, you can create a series of actions such as resizing, color corrections, and more. In this case, I’m using a single action to resize the images. I've set the longest side to be under 1600 pixels, which is more than adequate for most site designs while still maintaining high resolution. You can enable or disable these actions easily without deleting them.

For output, I like to save the converted files in a subdirectory to avoid overwriting the original WebP files. This keeps the original files intact as a long-term source. In this case, I'm switching to AVIF because Webflow now supports this format. After selecting the AVIF format, I simply click "convert," and the process is fast.

During conversion, you can see the new file sizes, which are smaller than the originals. However, if they are still larger than expected, it might be due to the dimensions or resolution being too high. To check the results, I view the converted files in Chrome. While AVIF offers better compression than WebP for the same quality, I haven’t fully explored the AVIF settings yet. For now, I’m sticking with WebP because they are significantly smaller.

The WebP images are very compact, around 19 to 23 kilobytes, making them ideal for controlling image quality and size without being excessively large for their intended use. Comparing the WebP to AVIF, I don’t notice a significant drop in image quality, so the bandwidth savings and improved page speed performance make this conversion worthwhile.

I highly recommend using XnConvert for pre-converting images to control quality, preview results, and ensure the sizes are optimized for your needs. This tool has saved me a significant amount of data.