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!

More tips to speed up your WordPress website

More tips to speed up your WordPress website

Did you read my post “Optimize Your Images for a Faster Website?” If so, one gold star for you! If not, don’t worry…you’re not in my bad books. It’s just that if you want a website that moves more like a race car than a tricycle, website images are a good place to start. Or not. You’re the boss lady (or gentleman) so I’ll leave it up to you.

Okay…down to business! Here are more tips to help to satisfy your website visitors’ need for speed. (Remember: ignore the speed of your site and risk loosing your hard-earned traffic!)

To start off, let’s go back to Google’s nifty little PageSpeed Insights tool. Here you’ll want to enter the unique URL of each page on your site that you’ll be testing. It’s good to check scores before you make changes to your website, just so you can see that any changes you make actually produce results.

Now, as I mentioned in my last post, you do NOT need a 100/100 score. A score THAT perfect might result in a nervous breakdown – especially if you’re not technically inclined. What you’re looking for is to get a really good (in the green) grade for the website summary, and not stress too much if the mobile side is just “good”.

Also, the feedback to pay most attention to is anything titled “should fix” – shown with a red exclamation point.

Another site I use, which usually gives me better grades than Google’s tool, is Gtmetrix.com. This site will give you Page Speed and YSlow grades, along with the actual load time for each page in seconds. If you click on each item in the “Breakdown” section, it will let you know what – if anything – is an issue.

Again, do not feel you have to fix each item! For example, there are plenty of things I can “tinker” with and improve on my own site but my speed scores are really good, so I’m going to spend my time and energy on the million other things I need to do.

Okay, now assuming your scores reveal issues you should fix. Here are some really useful plugins to get you started. (Remember to BACK UP YOUR SITE, before you start installing plugins and making changes. Also, upon installation of each plugin, I like to check my score to see if it had an effect. You don’t have to be this obsessive!)

  • W3 Total Cache (the one I use) or WP Super Cache (also popular). These plugins improve overall site speed and performance.
  • WP-Optimize – helps keep your database clean by removing the old post revisions, spam, unapproved comments etc.
  • Use Google Libraries – Allows your site to use common javascript libraries from Google’s AJAX Libraries CDN, rather than from WordPress’s own copies. If all that sounds like gibberish…just know that it works to improve site speed.
  • Revision Control – allows you finer control over revisions. Instead of having dozens of my revisions sit on my database for weeks, I can limit them to any number I want through this plugin.

There are many, many more plugins that can help your site run more efficiently. The ones I’ve mentioned above have helped improve my scores DRAMATICALLY. Like from the 60s on Google and Cs and Ds on Gtmetrix, to the high 80s and 90s and As and Bs.  I shouldn’t forget to also credit the fact that I used Pagespeed Optimizer through the cPanel of my hosting account.

I wish I could find the article that showed me how to configure Pagespeed Optimizer! Fortunately, it’s pretty straight forward…enable all the options except for the ones under the sections “Additional Filters” and “Risky Filters”. This should make a big improvement to your site’s speed, also.

Another significant way to speed your site up is through a Content Delivery Network (CDN), like CloudFlare. CDNs use geographic locations of the user, webpage origin and server to make your site more efficient at delivering content.

Lastly, your hosting service as well as your hosting package can make a big impact on speed. I use A Small Orange, which I’ve been very happy with but I know that WP Engine is a LOT faster, especially since they integrate a CDN for you.

Here is a great article that will help you dig deeper into speeding up your WordPress site. If nothing else, it will show you how to configure W3 Total Cache to its full potential.

Now that my site is fast enough, I think I’ll air my head and go make something pretty. I’ve had more than enough of all this ‘techy’ stuff for now!

P.S. Got any tips of your own? Tell us in the comments below!

Pin It on Pinterest