I got another speeding ticket a few weeks ago, my second one this year. This one added to my collection, making Ohio the fourth state that I’ve gotten a ticket in. The others are Pennsylvania (my first ticket, as a teen), West Virgnia, and Indiana (the other one this year). Obviously, I like to go fast.
So when it comes to my Web sites I like them to move fast too! I want to deliver a great experience and part of that means that a user on a mobile device doesn’t have to wait while resources load. One of the biggest bottlenecks for speed? Images.
Magic Sauce
As I get towards the end of the design process—which is usually done in the code with a little Photoshop or Sketch—I run my images through a couple of apps that compress them. And when I say “compress them” I’m talking about significant filesize savings.
Image Optim is a free, Mac-only app that compresses both JPG and PNG file types. I believe that it also has an option to run it as part of a GruntJS task but I haven’t dipped my toes into those waters yet.
JPEG Mini is a paid app (~$19.99) that is available for Mac and Windows. This beauty makes JPGs very, very small. They have a server version but at $199/month, I haven’t tested it. (I’m sure it is awesome.)
Example
The image below is the original image and weighs in at 347kb.
The image below has gone through JPEG Mini and ImageOptim and is now 250kb! Much, much smaller with no loss of quality!
What I’d Like To Do
The apps listed above work out great except that they involve me (or someone on the team) to touch every image. What I’d like to see done is something added to sites—a Drupal module?—to run images through these compression tools.
Perhaps I’ll look into that someday.