Tools for image optimization. As we saw a few weeks ago, the weight of an average web page is now almost 1.5MB (median ~1MB), with > 50% of this being images.
It’s a harsh reminder that many of our pages on the web are still quite fat, a big concern for slower mobile data connections. BigQuery calculated medians for a HTTP Archive run thanks to Ilya Grigorik There have been plenty of well documented cases of page weight being heavy, with the Oakley site Brad Frost mentioned in April clocking in at ~ 25MB worth of images alone. Insanity. Just think of this on mobile: slower data, CPU, GPU..and it’s just ONE page. Images are a non-trivial problem to solve because they occasionally need to be high-res, but at the same time small enough to not kill your users mobile data cap. The page cost of using images on the web is however not a new problem but we’re at least moving beyond blaming scripts as the main culprit.
Tools As a general rule run lossy optimizers first, then lossless. Grunt tasks Individual tools PNG Quantizer. Imagemin. Minify images Minify images seamlessly Install $ npm install --save imagemin Usage var Imagemin = require'imagemin'; src'images/*. dest'build/images' useImageminjpegtranprogressive: true; run console.logfiles0; You can use gulp-rename to rename your files: var rename = require'gulp-rename'; src'images/foo.png' userename'bar.png'; new Imagemin() Creates a new Imagemin instance. .src(file) Type: array, buffer or string Set the files to be optimized. .dest(folder) Type: string Set the destination folder to where your files will be written. .use(plugin) Type: function Add a plugin to the middleware stack. .run(callback) Optimize your files with the given settings. callback(err, files) The callback will return an array of vinyl files in files.
Plugins The following plugins are bundled with imagemin: WebKit Has Implemented srcset, And It's A Good Thing. WebKit has made some serious news by finally implementing the srcset attribute1.
The 18 best image file compression tools. When you're looking to boost your website's performance, some would recommend you jump straight into a detailed analysis of each page: the HTTP requests you're making, any redirects involved, the position of scripts and style sheets, and more.
But while there's no doubt that examining these issues can help, it's important to consider the basics first. In particular, are you sure that any graphics you're using are fully optimised for the web? Don't miss this! You've probably already made sure to choose the appropriate format for each image as well as keeping its size (in pixels) to a minimum. Maybe you've reduced the JPEG quality setting as much as you can. The unfortunate reality is that, no matter how carefully you design your images, the graphics tool you're using will not save the finished files in the most efficient way. Exactly how much you can save is tricky to say for sure as it depends very much on your source graphics. Testing Which programs are the best, then? The programs.