I've converted all my images to webp format using a Python script that processes everything in the "images_raw" folder and outputs them into an "images" folder. However, I want to ensure that the images are resized to the specific dimensions required by my webpage, rather than keeping their original sizes. I don't want to manually resize each one, especially since the responsive design of my site might require different sizes to avoid pixelation or low resolution.
Is there a simple one-line script or import that can help with this, preferably free? While compression isn't my main concern, I just need the images to look good. I know Cloudflare offers something similar, but it's not the most intuitive solution for me.
2 Answers
What tech stack are you using for your site? The approach may differ based on that. I’ve often created a wrapper function that generates the HTML, which takes the required size (usually one dimension is fine). It checks if the resized image exists, and if not, it produces it from the original when the page loads. That’s been pretty effective for me.
If you’re using Nginx, the image_filter module could be your best bet. With it, you can resize images on-the-fly. There’s a decent explanation on how to set this up [here](https://zaiste.net/network/nginx/howtos/howto-resize-on-the-fly-cache-images-nginx/) and you can also check the official documentation [here](https://nginx.org/en/docs/http/ngx_http_image_filter_module.html).
I'm using just plain HTML, CSS, and JS – no frameworks like React or anything complicated! Just straight web development.