background preloader

Image compression

Facebook Twitter

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.

Tools for image optimization

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.

imagemin

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.

WebKit Has Implemented srcset, And It's A Good Thing

As Chair of the W3C’s Responsive Images Community Group, I’ve been alternately hoping for and dreading this moment for some time now. It turns out to be good news for all involved parties—the users browsing the Web, most of all. As with all matters pertaining to “responsive images”: it’s complicated, and it can be hard keeping up with the signal in all the noise. Here’s what you need to know. What Does It Do? As originally proposed, the srcset attribute allowed developers to specify a list of sources for an image attribute, to be delivered based on the pixel density of the user’s display: Not too scary, this markup. “Use low-res.jpg as the source for this img on low-resolution displays, and for any browser that doesn’t understand the srcset attribute. Things were starting to look scary, for a little while there. Can’t We Do That With JavaScript? Can’t We Do That With CSS? “Yes” and “No.” Tools for image optimization.

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.

The 18 best image file compression tools

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.