On-the-fly image resizing with Nginx

If you've ever managed a web server that serves images to thousands of users, you've probably run into the problem of serving the right image size to the right context. A 1200x800 hero image looks great on a desktop, but it's pure waste on a mobile screen or a thumbnail grid. The traditional answer to this has been generating multiple image variants at upload time, but that approach gets messy fast. A cleaner and more flexible solution is to resize images directly at the server level, on demand, using nothing more than nginx and its built-in image filter module. This guide walks you through setting that up from scratch, including caching so your server isn't processing the same image twice.

Server level image resizing

Most applications handle image variants at the application layer. Laravel, Django, WordPress and friends all have plugins or libraries that generate thumbnails when an image is uploaded. This works fine until you need a new size that wasn't anticipated, or until your storage fills up with dozens of variants per image that nobody requested.

Handling resizing at the nginx level keeps your application clean and gives you a simple URL-based API for requesting any size you need. A request like /images/photo.png?width=400&height=300 is self-describing, requires no application code, and the result gets cached automatically so the resize only happens once. It's a practical and low-maintenance pattern that works well for blogs, portfolios, CDN setups, and content-heavy sites.

Installing the Image Filter Module

Before touching any configuration, check if the module is already available on your system. Most Debian and Ubuntu nginx packages compile it as a dynamic module:

nginx -V 2>&1 | grep image_filter

If you see --with-http_image_filter_module=dynamic in the output, the module is available but needs to be loaded. If it's absent, install it: