About The Author
Louis is a front-end developer, writer, and author based in Toronto, Canada. He curates the newsletters Web Tools Weekly and Tech Productivity and blogs about …
More about
Louis ↬
Email Newsletter
Quick summary ↬
Optimizing the size of images can have a bigger impact on performance than all other areas combined. In this article, Louis Lazaris covers different tools available for reducing the size of images.
In recent years, the web development community has rightfully spread the message widely that images are often the largest resource on any given web page. While many developers spend time optimizing other areas of a web page’s performance, reducing the size of images can have a bigger impact on performance than all other areas combined.
You might already know that Smashing Magazine has published the book Image Optimization by Addy Osmani, which covers this topic in full detail. But consider this post a compliment to the book, as this will focus purely on different tools available for reducing the size of images.
WebUtils Bulk Image Compress
WebUtils Bulk Image Compress allows you to compress images and convert them to WebP, JPG, PNG, AVIF, and JXL. There doesn’t seem to be an indication of limitations on file size or the number of files, but it is a slow process if you try to do a bulk conversion. You can also adjust quality and size, and everything is done client-side.
Compressor.io
Compressor.io lets you optimize JPEG, PNG, SVG, GIF, and WebP using lossy or lossless compression up to 10MB per file. If you want to customize the compression or use larger files, you’ll have to get the Premium plan. The compression, in this case, seems to be on the server side, so you’ll get much faster results.
Imagecompresser.com
Imagecompresser.com lets you upload up to 10 files simultaneously and supports PNG, JPEG, WebP, JPG, and GIF formats. There doesn’t seem to be any limit on the file size per image, so this would likely work well for large files of 10 or fewer.
AnyWebP is specifically for converting images in WebP format, and you can output to JPEG, PNG, or ICO. You can customize by file size or quality. You also have the option to convert just about any file format (TIFF, PSD, BMP, etc.) to WebP. This tool also offers offline native apps for Mac and Windows that let you bulk convert. In any case, none of the files get uploaded to the server.
Compressimage.io
Compressimage.io allows fully offline image optimization with no limits on file size or the number of files. The only limitation this seems to have is that you can only compress JPEG and PNG. The custom options allow you to adjust the compression level, image size, and if you want to convert to WebP. You can also add a custom suffix to the file name.
More after jump! Continue reading below ↓“TypeScript in 50 Lessons”, our shiny new guide to TypeScript. With detailed
code walkthroughs, hands-on examples and common gotchas — all broken down into short, manageable lessons. For developers who know enough
JavaScript to be dangerous.
Jump to table of contents ↬
Meet “TypeScript in 50 Lessons”, our shiny new guide to TypeScript. With detailed code walkthroughs, hands-on examples and common gotchas — all broken down into short, manageable lessons. For developers who know enough JavaScript to be dangerous.
JPEG.rocks, as the name suggests, is a privacy-friendly JPEG image optimizer, fully client-side and open-source. There doesn’t seem to be a limit to the file size or number of files, and you can customize the output file quality.
Compressor.js
Compressor.js is quite different from the other tools in this list. It includes about a dozen different settings that let you customize the image quality, size, mime type, and more. The only big limitation is that you have to do one file at a time. So this wouldn’t be a good option for bulk resizing but is effective for specific optimizations you want to perform on a particular image.
Optimizilla uses lossy compression to reduce the size of JPEG, GIF, and PNG images. You can upload up to 20 images, and you have the option to customize the compression level and quality for each of the images before downloading.
Shrink Me
Shrink Me lets you bulk optimize JPEG, PNG, WebP, or SVG images with no discernible quality loss. There is no limit on the number of files or file sizes, but larger files will mean a slower compression process.
JPEG Stripper optimizes JPEG files by stripping out unnecessary data. Allows only a single image uploaded at a time, so this would only be useful for a few images in JPEG format.
Shrink Media lets you optimize PNG, JPEG, and WebP images up to 5000×5000 resolution, and it’s also available as a mobile app for iOS or Android. Use the interactive sliders to change the quality level and the photo dimensions. You can also paste a URL to an image, but this tool only allows you to optimize one image at a time.
OptimizeImages lets you reduce the size of SVG, PNG, JPEG, WebP, GIF, and AVIF while also giving you the option to convert to WebP or AVIF. Optimize up to 30 images and choose a compression quality option (recommended, medium, or ultra).
ImagesTool.com includes a number of different image manipulation tools. You can adjust the size, convert, compress images, and more. Supports JPEG, WebP, SVG, GIF, and APNG. All done client-side, and you can choose between lossless and custom compression. No limit to the number of files you can optimize, and you can also upload by folder or paste in your images.
AVPress is a little different as it is specifically for optimizing video files and GIF animations. It allows a single video or GIF to be processed at once and includes several customizations and output settings you can apply to your chosen file.
AVIF Converter
AVIF Converter lets you convert just about any image format to AVIF, a next-generation file format that purports to have better compression than WebP, JPEG, PNG, and GIF. This app doesn’t seem to have any limitations on the number of files or file sizes, but note that the AVIF format is not yet supported in all modern browsers.
TinyPNG is an older tool that optimizes WebP, PNG, or JPEG files. You can upload up to 20 at a time and up to 5MB in size each.
The tools I’ve listed up to this point are good options for manual batch processing or optimizing a few images at a time. But in the context of a large project, you’ll want to consider using different tools that are designed to be incorporated as part of an ongoing workflow or build process. Here are some options you can consider:
Depending on what build tool or task runner you’re using, the aforementioned imagemin is likely available as a plugin for your tool of choice. Here are some imagemin plugins for different build tools:
Finally, if you’re building native apps that require image processing and optimizing on the fly, here are some C programming language options:
You might want to check out other tools and resources for image optimization. These don’t necessarily fall under the above categories, but they might fit one of your specific use cases.
If you know of another tool for optimizing different image formats for web, native, or mobile apps, feel free to let us know in the comments. In the meantime, I hope this list of tools will suffice to provide whatever you need to fill your image optimization requirements.
(vf, yk, il)
This content was originally published here.
