Responsive 1 images 2 have been keeping us on our toes for quite some time, and now that they are getting traction in browsers 3 , they come with a scary problem: the need to efficiently resize all our image assets . The way responsive images work is that an appropriately sized image is sent to each user — small versions for users on small screens, big versions for users on big screens. It’s fantastic for web performance, but we have to face the grim reality that serving different sizes of images to different users means that we first need to create all of those different files, and that can be a huge pain 4 . Many tools out there automate image resizing, but too often they create large files that cancel out the performance benefits that responsive images are supposed to deliver. In this article, we’ll see how we can use ImageMagick 14 5 — an open-source command-line graphics editor — to quickly resize your images, while maintaining great visual quality and really tiny file sizes. Big Images == Big Problem The average web page is about 2 MB 6 in size, and about two thirds of that weight is from images. At the same time, millions of people are accessing the Internet on 3G-or-worse connections that make a 2 MB website a horror show to use. Even on a fast connection, a 2 MB website can wreak havoc on your users’ data plans and cost them real money 7
↧