In this week’s article, I’m going to share a little trick for image optimization with Gtmetrix on your site. This trick for how to compress images works after a page is live. Better practice would be to always perform image optimization before build or update. But, if you’re like most of us, even though your intentions are good, the demand for getting your content to market supersedes getting nitpicky about compressing images.
So, what you do is, go to http://gtmetrix.com/ and paste in the URL to your page and click Go! The resulting page will look like this:
I happened to run this example on the last HostingPerformance.guru article at http://hostingperformance.guru/2014/03/add-expires-headers/
Okay, I got an F on Optimize images. Click “Optimize images” to see what exactly is not optimized and to get a link to a fully optimized version. In my case, here’s the list:
- Losslessly compressing http://hostingperformance.guru/wp-content/uploads/2014/03/browser-cache-misses.png could save 16.4KiB (58% reduction). See optimized version
- Losslessly compressing http://hostingperformance.guru/wp-content/uploads/2014/03/wpt-content-type.pngcould save 7.1KiB (40% reduction). See optimized version
- Losslessly compressing http://hostingperformance.guru/wp-content/uploads/2014/03/wpt-cache-static21.pngcould save 4.3KiB (43% reduction). See optimized version
- Losslessly compressing http://hostingperformance.guru/wp-content/uploads/2014/03/wpt-grades2.png could save 1.6KiB (41% reduction). See optimized version
- Losslessly compressing http://hostingperformance.guru/wp-content/uploads/2014/03/wpt-grades.png could save 1.4KiB (31% reduction). See optimized version
- Losslessly compressing http://hostingperformance.guru/wp-content/themes/alexandria/images/single_np_prev.png could save 159B (17% reduction). See optimized version
It says “Optimizing the following images could reduce their size by 30.9KiB (48% reduction).” Considering the Total page size was 745KB, by following the procedure that follows, it’ll be reduced to 714KB. That’s only a 4% reduction in total page size, so this time I’m not going to get a HUGE win, but don’t be surprised if you see much larger improvements on your site. It’s very common for images to be FAR less optimized than my starting point in this example.
How To Compress Images
So, what you do is click “optimized version” for each image and save the resulting image to your workstation.
- I right click and “open link in new tab” on each one after another. This way I can get them all open fast.
- Then I go to each tab, right click and “Save image as…” and save each on. I save the image name of each to a text editor as I go. Notice the resulting images have long cryptic filesnames, like browser-cache-misses_52acf442cc78654835ae9defc6e59a3c.png. That’s okay, keep it this way. It’s important for the filename to change from original, to avoid any caching issues. In this case, I decided not to grab the single_np_prev.png one, b/c it’s part of my WordPress theme and for only saving 159 bytes, it’s not worth the trouble.
- Next I upload the new images. Since they were all WordPress uploads, I can do this in the “Upload New Media” section of my WordPress Admin area. Depending on the kind of site you’re running, you may need to FTP your new images or use another upload method.
- Finally, edit the HTML of your page and change the filenames to the new long cryptic filenames, like browser-cache-misses_52acf442cc78654835ae9defc6e59a3c.png
Here are the before and after image optimization snapshots. Since they’re too wide to fit side by side, I’m displaying them smaller here. Click to see the full image. Compare them visually. Is the optimized version less appealing? Only rarely will you detect any visual difference on screen.
|Before Image||After Image|
I hope this trick for how to compress images makes your website even faster.