How To Compress Images; For Faster Site; Gtmetrix Trick

Image optimization

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:

Compress Images With Gtmetrix Trick

I happened to run this example on the last HostingPerformance.guru article at http://hostingperformance.guru/2014/03/add-expires-headers/

Optimize Images

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:

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.

  1. I right click and “open link in new tab” on each one after another. This way I can get them all open fast.
  2. 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.
  3. 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.
  4. 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 ImageAfter Image
browser-cache-missesbrowser-cache-misses_52acf442cc78654835ae9defc6e59a3c
wpt-content-typewpt-content-type_3e9ffe8ec37399a4cc4b00babf09efd9
wpt-cache-static2wpt-cache-static21_b4938fd9e20a9c9fbd5453924fcfc93b
wpt-grades2wpt-grades2_2ba01d599f098ae7f86a3a78bd55a83e
wpt-gradeswpt-grades_fb8b30ed661a5c6bf5c1feed3601ea83

I hope this trick for how to compress images makes your website even faster.

Written By at .

Leave a Reply

Your email address will not be published. Required fields are marked *