If you’ve been following us since the early days of 3 months ago, or have gone through our archives, you may remember us covering a hot topic back in episode 13. Where’s The Turbo Button was all about speeding up your website. Tons of actionable advice came from this hangout and it could have been easy to get overwhelmed. We covered everything from caching, CDNs, minifying, CSS sprites, and yes, optimizing photos. Optimizing photos has been one that has been a deep, dark issue among many bloggers and WordPress users. Who doesn’t want great, high quality photos on their sites?
Prior to that hangout, I got into a rather deep conversation with some of the commenters over at WPMU’s post on trying to score a 95 on Google PageSpeed Insights. One such conversation left the blog completely and went to email conversations dealing with the blogger’s personal situation. She had a photo blog where she did some incredible work, but her page was ranking horribly on all of the various speed tests. Her photos were HUGE!
She was running on a similar server to mine, her theme was some what minimalistic. It was all about her photos. The good thing was that she too was running on a Mac and I was in a position to help. So today we’re going to get into how to optimize photos for your website using programs available for Mac. Some of these programs will apply to PC as well, but this is especially for Mac users.
Optimizing Photos on a Mac
I’m certainly no professional photographer, but for an example I’m going to be using a photo I took. It is of a crystal butterfly in Manizales, Colombia. It was probably one of my most shared and liked photos and I wouldn’t want it showing up looking like doggy doo either. This photo was taken in RAW mode (that’s crazy editable for those who don’t know) and exceeded 21 MBs in it’s original state. RAW photos require photo specific software and cannot be displayed in browsers, so you will need to convert to something like .JPG or .PNG to display on your site.
This 311 KB photo is completely optimized to look it’s best on our website.
Step one: Adjusting size and PPI
If you’re new to digital photography, it may come as a surprise that computers use a lower PPI (pixels per inch) than does print. Even with the incredible advancements of late, a computer monitor still measures PPI at less than half of what a standard home photo-ready printer does. Professional printers use 300 PPI, while your web browser uses only 72. That’s a lot of pixels.
There are tons of ways to edit this. I’m going to cover two that I use.
- Set DPI (AKA PPI) to 72.
- Set height and width as appropriate.
- Set quality as appropriate.
- Set as a preset by clicking the + button.
- Image Size
- Check Resample
- Set to use pixels
- Set resolution to 72
- Change size as necessary
You can use other programs but very few others give you the same level of control. iPhoto for example, will let you optimize your size, but not set the PPI.
Step Two: Lossless Compression
Here I am going to recommend one simple tool, ImageOptim. ImageOptim performs a simultaneous lossless compression and, when appropriate, make the images progressive. Lossless images maintain their quality but the process removes unnecessary data and color schemes that the photo does not need. This can drastically reduce file sizes. I normally get anywhere from a 5% to a 40% reductions in size. In the competitive world of speeding up your website, even that 5% can help. If you are not a perfectionist when it comes to your photos, feel free to bring the quality down in Aperture or Photoshop or use a “lossy” program that will compress images even further, but at a loss of quality.
Progressive images are ones that come in as an entire blurry image and then sharpen. This technology seems to have gone by the wayside for some time and is making a comeback. In the days of dial-up, this was a critical way of getting photos to the end user at a bearable speed. As broadband Internet became the norm, progressive photos drifted away. But since Google has include site speed as an SEO factor, people are back to trying to optimize that speed any way they can to beat out the competition and progressive images may just give you that competitive edge.
For the Extreme Photographer
There are two things you should know if you want your best images on the web. First, if want your photos to be shared in a way that can be printed out at great quality, allow someone to download them instead of putting print quality images on the web itself. If you’re selling your images, this is a no-brainer. But even if you just want to share them, give a download option instead of forcing every page to load huge photos.
Second, WordPress has an automatic function built in to reduce image quality by 10%. If you want your images to stay nice and crisp on your WordPress website, try adding this code into your own plugin:
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
Not big on coding? It’s not my favorite either. Go ahead and download this simple plugin that will keep your images looking their best on your WordPress website.
By the way, do you want the full size version of that butterfly? You can get it here.