Optimize Your Images for a Faster Website

Optimize Your Images for a Faster Website

When it comes to pimples, electricity bills and the size of your website images, bigger is definitely not better. In fact, there’s nothing like big, fat website images to turn your site into a digital slow-poke.

As a graphic designer with a love for large, high-resolution files, I learned this lesson the hard way. The beautiful PNG files I uploaded (with sizes in the 700 -1000KB range) were making this site slow-as-molasses to load.

My “testers” (I always recruit website testers whenever I build a new site) were grumbling that they were being made to wait. And by wait, I don’t mean for a few minutes or even just one. I’m talking more like 10 seconds. YUP! In the online world even 10 seconds is like 8 seconds too long.

Not that I blame them. I don’t like waiting. Your probably don’t like waiting. And our visitors sure as heck don’t like waiting. We expect information to load instantly (or as close to it as possible). If it doesn’t, it’s hasta la vista, baby! And off they go, without so much as a second thought.

Sad, right? So here’s what you need to do to make sure your site stays in the fast-track:

Step #1

Go to Google’s PageSpeed Insights tool and enter your URL (your home page URL is a good place to start because it analyzes on a page-by-page basis).  Based on the feedback you get, you’ll know if it’s important to make changes (look for the red “!”) or just “consider” making changes.

Since this post is specifically about images, look for “optimize images” in the suggestions summary.  FYI, you’ll actually get two sets of feedback – one for websites and one for mobile devices. I don’t stress too much about mobile devices so long as the website side is getting great scores. If you see “optimize images” in the summary, click on “show how to fix” and Google will let you know exactly which ones need to be addressed.

Here’s a snapshot of my homepage. Four of the six image issues are with plugins I use (and there’s nothing I can do about those, unless I want to disable them…which I don’t). The other two images have been optimized as much as I possibly could, without compromising their quality.


Page insights


Step #2

The next thing you need to do is get into your WordPress media dashboard and click on some of the images Google listed as being too big. Look on the right hand side of the panel and see what their sizes are. Nothing should be over 200KB – unless a specific image looks really crappy at that size. If that’s the case go as big as you absolutely have to go. Ideally, most of your images should be far less than 200KB.

Step #3

Now for the optimizing part…you can install one of several free image optimization plugins. The one I use that seems to work well is EWWW Image Optimizer. Another popular one is WP Smush.it (this one didn’t work as well for me). Before you do this, make sure you BACK UP YOUR SITE – just in case the technology gremlins come out to play!

Once the plugin of your choice is installed, it should optimize/smush all new images upon upload. You’ll need to manually optimize all of the images you already have in your library.

If optimizing your your images in WordPress doesn’t make a big enough difference, you need to re-save your images through your image editor. YUP, a big pain in the you-know-what BUT this is your website, aka your online business workhorse. Do yourself a favor and build it right! (Plus, you’ll get the geeky satisfaction of seeing your Google Insights score go up.)

Step #4

For all new images (and if you have to re-save your images), here are some ways to save on size:

1)      The resolution of your website images does not need to be higher than 72dpi.

2)      The size of your canvas should (ideally) be no larger than the actual display size. So, for instance, you shouldn’t upload a 5000 x 5000 pixel file if it will only be shown as a 250 x 250 pixel image on your website. If you’re like me and you like working with a large, high-resolution image (which then gives you the option of using it in various sizes), that’s cool. Just save a version in the actual size (or as close to it) that you will be displaying and upload THAT version, not the super-duper big one, onto your website.

3)      JPEG files are smaller than PNG files. Try to use this format for larger images UNLESS you need a transparent background.

4)      Speaking of JPEG files, you will get an option to save it as a maximum, high, medium or low quality file. Keep it as high as possible while paying attention to the file size. Remember, no more than 200KB (unless quality is significantly compromised) – preferably less. One thing that drives me nuts about JPEG files is how crappy they can look, even at medium sizes. PNG files, on the other hand, are lossless which means they are always better in quality.  Whenever I can get away with using a PNG file (especially if it’s under 100mb), I often chose this option.

5)      If you’re using Photoshop, save your files using the “save for web and devices” option. You’ll get a preview of the size and quality of your file and you can choose the option that’s best by taking both into account. Make no mistake, quality is extremely important, too…especially for headers, portfolio images etc. that are supposed to look sharp and beautiful.

Step #5

Lastly, you can download a free app called ImageOptim 2. Drop  your images into this app to compress them, right before you upload them into your WordPress media library. Then, once your optimized images are on your posts and pages, always check your site on multiple devices to make sure your images look like they should. No use saving on size if they look horribly blurry or pixilated!

Once you’ve gone though these shenanigans, re-check Google PageSpeed Insights. You should notice a marked improvement in your scores and insights regarding images. If your site is STILL slow due to other factors, here are some additional ninja tricks you can use to speed it up.

Oh, and there is one more thing…please don’t go nuts trying to get a 100/100 score (you may need a team of geeks and a mental health specialist for that). If your website score is color-coded green, it’s probably good enough!

Pin It on Pinterest