I'm curious to know how everyone manages image optimization in their development processes. Specifically, I want to hear about how you prepare images for production, including tasks like resizing, compressing, converting to WebP, and setting up responsive breakpoints. Do you prefer doing this manually using tools like Photoshop, or have you implemented an automated build step? I currently find myself spending a lot of time converting images using various websites, and I'm tempted to create my own tool, but I feel like there's probably something already available that I'm just not aware of. Looking forward to your insights!
7 Answers
Your approach might differ based on your tech stack. For example, in my custom PHP setup, I have two options: generate and store multiple sizes in the CMS up front or save just the original image and generate additional sizes on demand. While adding sizes dynamically can increase flexibility, it risks overwhelming your server with requests if not managed properly. It’s crucial to balance convenience with safety, especially if you notice potential vulnerabilities in how images are accessed.
I've been in that same boat! What really worked for me was automating everything in the build process. I use Sharp (a Node.js tool) to resize and convert to WebP or AVIF, and Imagemin for compression. Once you set it up, it takes care of everything during deployment. Plus, for responsive breakpoints, I define them in code and use the `` tag with `srcset` to handle the rest. Highly recommend automation—it saves so much time!
If you're using Next.js, image size optimization is built in—it automatically serves the correct image sizes for each device and converts images to WebP. Check out their image optimization docs for more info.
I use Paint.net and find it works well for converting to WebP images without a hassle.
For converting images, check out Squoosh.app! It's super handy, and you can also install their app if you prefer working offline.
We developed a custom npm tool for our 11ty static site generator. It automatically detects the `` element with an `` tag, retrieves image dimensions at three breakpoints, converts to WebP and AVIF formats, and compresses everything. It literally takes about 30 seconds to optimize all website images across all pages and breakpoints—it saves us tons of time!
It really depends on your tech stack. For instance, if you're using Vite, it automates all image optimization during the build, so you won't have to worry about it at all!
Absolutely love that app!