With consumers 44 percent more likely to engage with you if you use pictures and images and Google using page load times in their search rankings, it’s more important than ever to optimize images on your website. But beyond Google search considerations, mobile web use is approaching 50 percent and the last thing a mobile user needs is to download large images on their device – it uses up bandwidth and time. So, how can we easily optimize the images on our websites?
At the last Boston WordPress Meetup, I videoed Dave Ross – Senior Web Engineer at 10up – presenting Optimizing Image Files Like a Pro (video below). In the presentation, Dave covered the importance of optimized images for search and mobile and gave several tools to use to optimize images on your site. It’s important to realized that Dave is talking about smaller files, not smaller images. Here are some of the tools he presented.
imageoptim.com – for Mac, Windows & Linux. It’s a really simple interface. The example Dave showed shaved 10% of the file size without any noticeable quality loss.
CodeKit – for Mac only. It’s not as fully function as imageoptim, but is still a really simple interface to use.
JPEGmini – for Mac, Windows & Linux. This program rewrites the jpeg code and claims to reduce file size 5x (80%). Using this program on the same image as before reduced it from 3.1mb to 1.1 mb – a 2.8x reduction.
WordPress Plugin Tools:
These plugins will take care of optimizing images every time you upload an image and in some cases will go back and optimize all the images that are already on the site.
EWWW Image Optimizer – This plugin takes care of optimizing your images right on your server. Just upload your image an this plugin will optimize that image, any thumbnail images created and optimize any edits you make to the image on the site. Additionally you can bulk optimize all the images on your site.
WP Smush.it – Does the same as EWWW but through a web interface and not by uploading binary files to your server.
Scalable Vector Graphics:
Scalable images are great because they have infinite resolution for graphics. This means the image will scale and maintain quality regardless of it’s size. Additionally a svg file can give tremendous file size savings. Most modern browsers can handle svg files.
SVGO – Is an open source command line tool for shrinking svg files.
Here’s the Video: