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 CompressWebUtils 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 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 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 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.
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 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.
Squoosh is designed by the Chrome Labs team. The web app is limited to a single image, but it includes several options for reducing size, color palette, choosing a compression method, compression quality level, along with a slew of other advanced settings. The engine that powers this tool is also available as an API or CLI for bulk processing.
SVGOMG is specifically for reducing the size of SVG graphics. It’s a GUI for SVGO, a Node.js-based tool. SVG optimizers are useful because many programs that produce SVG include redundant and useless info in the SVG code that produces the 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 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 5000x5000 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 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:
- SVGO is the popular SVG optimization tool that’s the core behind the previously mentioned SVGOMG;
- libSquoosh is the Squoosh API, allowing you to build JavaScript programs that optimize images on the fly;
- Squoosh CLI is a command-line tool for using the engine that runs Squoosh;
- pngquant is a command-line utility specifically for optimizing PNG images;
- esbuild-squoosh;
- imagemin is an older unmaintained JavaScript project that lets you optimize images programmatically.
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:
- rollup-plugin-imagemin is a plugin for Rollup that uses imagemin to automatically optimize images in your Rollup builds;
- parcel-plugin-imagemin is another plugin that uses imagemin, this time for your Parcel builds;
- grunt-contrib-imagemin is yet another imagemin plugin for those still using Grunt, an older task runner tool;
- gulp-imagemin also uses imagemin, this time with your Gulp builds;
- ImageMinimizerWebpackPlugin is another imagemin plugin, this time for use with webpack, the popular JavaScript bundler;
- snowpack-plugin-imagemin is an imagemin plugin for use with Snowpack, a modern front-end build tool.
Finally, if you’re building native apps that require image processing and optimizing on the fly, here are some C programming language options:
- MozJPEG is a program for optimizing JPEG images, intended for use as a library in graphics programs, image processing tools, and similar apps;
- jpegoptim is a utility to optimize JPEG files;
- libvips is a library for processing images.
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.
- QOI
The Quite OK Image Format is an image format that losslessly compresses images to a similar size to PNG while offering 20x-50x faster encoding and 3x-4x faster decoding. - JXL
Not a tool but a community website centered around the JPEG XL image format. - UPNG.js
This is the PNG engine behind the popular Photopea app, an advanced PNG/APNG decoder and encoder that offers lossy and lossless optimization. - Optimus
A native desktop app that allows you to compress, optimize, and convert images with support for JPEG, PNG, and WebP formats. - ImageOptim
A Mac app and Sketch plugin for reducing image file sizes. - pngcrush
A legacy image compression tool that can be used via the command line. - Trimage
A native cross-platform app and command-line interface to optimize JPEG and PNG images. - PNGGauntlet
An older configurable native app for Windows, Mac, and Linux that optimizes PNG and converts various formats to PNG. - Pngyu
Another native app that uses pngquant for PNG optimization.
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.
from Articles on Smashing Magazine — For Web Designers And Developers https://ift.tt/LpMwAD8
