Question for all the image optimization nerds out there: when you add image files to your project, is it better to pre-optimize them or just upload a high-quality file?
-
Question for all the image optimization nerds out there: when you add image files to your project, is it better to pre-optimize them or just upload a high-quality file? e.g. say I have a 1,280 pixel wide image that is 900kb. Should I upload that to my project as-is, or use e.g. Gimp to create a 1,280 px wide file that is about 300kb? What is the norm among the #11ty community? Or others, e.g. #WordPress ?
-
Richard MacManusreplied to Richard MacManus last edited by [email protected]
Some background: yesterday I had a PNG lead image just over 700kb, created in Gimp. That resulted in a 565kb file for the user, after WordPress optimization. Then I ran my Gimp PNG through tinypng.com, which resulted in a 211kb image. However when I used that, our WP publishing system “optimized” it into a 903kb image — larger than my original gimp image! So clearly in that case it's better to use the original 700kb image.
-
Christian Alderreplied to Richard MacManus last edited by
I've not explored this as much as I should yet, others will reply with more knowledge, just my two cents.
I used to chuck the images through a compressor tool like ImageOptim (macOS) or TinyPNG (website); but since leaning on Eleventy Image more I've not been doing that and will just have the transform step (11ty 3.0+) process it to different widths and/or fileformats (.AVIF has some amazing size reduction)
-
Richard MacManusreplied to Christian Alder last edited by
@christian Thanks Christian, good to know! So e.g. you have a 900kb image, you just upload that and don't worry about pre-optimizing it down a bit?
-
Christian Alderreplied to Richard MacManus last edited by
@ricmac Oh yeah that's no good huh. Are you able to look into the WP settings that are handling that optimization step? or perhaps you can turn it off on a case-by-case basis where it's not helping you as you're serving it pre-optimized files
-
Jens Oliver Meiertreplied to Richard MacManus last edited by
@ricmac, can’t speak for the community but here’s how I do it:
1. Optimize every image losslessly, regardless where it’s used. Using ImageOptim with aggressive settings for manual, and Imagemin Guard for automated optimization.
2. Make special optimizations for key images (logos, icons, those getting accessed a lot). This is a manual process where I play with different formats, use different tools, &c. (and compress, too, sure).
Reliable process that allows me to stay close to the output.
-
Christian Alderreplied to Richard MacManus last edited by
@ricmac Yep, basically that. I've checked a recent project I'm working on to give an example here,
Input: 4032x3024, 2.8 MB
Output:
- 320x240, 23 KB (.jpeg)
- 320x240, 21 KB (.webp)
- 1024x768, 172 KB (.jpeg)
- 1024x768, 139 KB (.webp)I am either mis-remembering or I decided .webp was better than .avif? Or I configured it wrong lol - but yep, I let the Eleventy Image do its thing and create the sizes (widths) I need. (No point serving a 4032 as a thumbnail for example)
-
Christian Alderreplied to Christian Alder last edited by
@ricmac I could of course maintain the resolution too (Which I figure you might be wanting) , but I'd still see gains running it this way to either compress a .jpeg or offer up a file format that might be even smaller in file size.
It's pretty nifty
I mean really, I guess I could pre-optimise it still, I just haven't been feeling the need to do that since offloading the task to the plugin.
It'd make for some interesting testing though! I should check one day.
-
Richard MacManusreplied to Christian Alder last edited by
@christian that's very helpful, thank-you! If it produces files in the 100 kb range from a 4MB file, that seems like a great result and no need to mess with it
-
Richard MacManusreplied to Jens Oliver Meiert last edited by
@j9t thanks Jens, I hadn't yet come across ImageOptim, so have downloaded that now.
-
Richard MacManusreplied to Christian Alder last edited by
@christian this is for my work, and our DevOps folks are looking into it now. Could just be a PNG-specific problem.