Ultimate Guide to Image Compression

If you aren’t able to create and execute a plan to actually improve (often dramatically) your page speed, then one of three things may happen:

1. You will put it off and forget about it
2. You will try to do it yourself, waste your time, and get incredibly frustrated along the way
3. You will hire an SEO firm for thousands of dollars (depending on who you hire, you may or may not be throwing money out the window)

The point is, you don’t want to end up in any of these scenarios if you can help it. If time is an issue, which for most small business owners is the crown-jewel asset, hiring an agency can be the best option, as long as you can trust they will do the job, and do it right.

For those of you who are just starting out, or who are “do-it-yourselfers”, this guide will help eliminate most of the uncertainty and allow you to simply follow step-by-step until your website is fully optimized with page speed in mind.

Since most websites we work with are WordPress, this guide will be specifically tailored for WordPress-based sites. If you would like me to touch on another platform, such as Shopify or Squarespace, leave a comment down below and I’ll be happy to revise this list to meet your needs.

STEP 1: Run Audit for Before/After Comparison

I would suggest running at least two page speed audits before starting any image compression. Two tools we live by are Google PageSpeed Insights and GT Metrix.

What better way is there to test Google’s preferences then by using its own tool? Running this test will give you a score from 0-100 for both desktop and mobile page speed (both being equally as important, if anything, mobile is far more important these days).

GT Metrix will give you a grade from A – F, and will give similar recommendations as Google PageSpeed Insights. There is one major advantage to using GT Metrix, which we will get into in the following step (you don’t want to skip that one)!

A third test you can run is Pingdom. Pingdom works just like the other two, but may give you some additional information and recommendations to try. The more comparison points you have the better.

Bonus Tip: Saving image files for WEB in Photoshop. If you are building a website, there’s a good chance you will be using Photoshop at some point. If you have to resize and image, or making edits to a photo, you should always follow this path: FILE → EXPORT → SAVE FOR WEB → JPG → Image Quality = 60 (the only exception being if you need the image to have a transparent background, such as for a logo, then you would simply save as a PNG instead of JPG (no quality options).

(Maybe add a screenshot here of what that looks like)

STEP 2: WP Smush

This step will give you a slight boost and will save you some time with the following steps. WP Smush is by far one of the most used and highly rated image compression tools for WordPress. This tool is completely free if you stay with the basic plan (which is recommended). Once you install the plugin, you can “Smush” 50 images at a time by the click of a button. How it works is basically the plugin will do its best to reduce the file sizes as much as possible without having any quality dropoffs. Since plugins such as this are limited in the amount of image they can actually compress, you will only see slight upticks in your page speed (depending on how many images and how large your file sizes are to begin with).

Bonus Tip: If you need to resize multiple images at once to the same dimensions, follow these steps to save yourself time and headache: (Make sure all of your images are contained in one folder on your computer) File → Script → Image Processor → Select Folder → Resize to JPEG Quality 6 → Resize to Fit (your desired dimensions) → Run. Now you should be all set! Go back into that same folder and there should be a new, subfolder created with all of the optimized images!

Step 3: GT Metrix

GT Metrix will instantly become your best friend for image compression. They do all the heavy lifting for you. This platform will tell you exactly which images need to be further compressed on your website, and they go above and beyond by giving you unique URL’s with the images compressed to meet Google’s standards. All you have to do is click each URL, save the image to your computer, and re-upload to WordPress and replace the duplicate image with the new, compressed image.

Make sure that you go back and remove the old images from the Media section of WordPress after the images are replaced and saved!

Bonus Tip: Before uploading your images to your website, make sure the file size, in pixels, is set to the largest possible size you will need it to be on the site, and not any larger. For example, if you are uploading an image that will be outputted at 800px x 500x on the website, there is no need to upload an image that is 2400px x 2100px and obliterating your load time. If the dimensions to scale don’t match up, simply create a new canvas in Photoshop to your desired size, and then use the Transform Controls to resize the image as best as possible to fit inside the canvas.

Step 4: Manual Image Compression

When you’ve exhausted all other options, manual image compression should be your last resort. Depending on how many images you have left to optimize, this could be a painstaking, yet necessary process. As mentioned above, I believe this is easiest to execute with Photoshop, but there are various free alternatives that you kind find by doing a Google search for “image editors” and then finding an online software that allows you to reduce the image size and tweak the quality.

Bonus Tip: Videos need love, and compression, too. If you are uploading a video to the media of your website, it’s vital to reduce the size without losing quality, especially because of the already large file size. Our favorite software to use is Handbrake, an open source video transcoder that is very easy to use, even if you have little to no experience with video editing. It’s ready to use right out of the box, all you have to do is check the box for “Web Optimized” and make sure the file format is correct. And the best part is it’s completely free to download!

Page speed, specifically image optimization, is more important today than it ever has been in the past. Google has stated that it plans on switching to “Mobile-First Indexing” at some point within the next year, meaning your mobile load times and content (opposed to desktop) will be the primary ranking metric for Google to rank your website on search for your keywords.

Optimizing images should not be overlooked on any web design or redesign project. If you are building websites for a client, you will be able to provide maximum value by including the before and after website scans using the tools mentioned above. Image compression is a thankless and often repetitive task, but in order to stay up-to-date with Google’s ever-changing algorithm for ranking your website, and to maximize your website’s SEO potential, it is one of the most rewarding actions that doesn’t cost you a single penny. If you are building a website for your own brand or business, it’s still important to benchmark your ranking improvements over time and find areas where you can make more optimizations.

Contact Momentum Digital with any questions or to discuss how you can improve your website’s speed and performance!