Image Optimization for Websites – Our Quick & Dirty Optimization Process

Guess what friends – if your website is slow, people don’t really want to stick around to let it load (queue the heavy sighs). One of the main reasons your website might be slower than a snail’s southern drawl is the size of your images. Read on for the proven (and stupid simple) process for image optimization for websites!

We know everyone learns differently – if you prefer video, please watch the video tutorial below! If you’re more of a step-by-step person, we’ve written out the steps under the video.

Watch the Tutorial:

How to Optimize Images for Your Website – Step by Step:

1. Source your image and open it in Preview
2. Crop it to your desired shape
3. Adjust the longest dimension to a maximum of 1400px (if it’s a portrait image, this will be the height. If it’s a landscape image, this will be the width).
4. Save the image!
5. Drop your image into the ImageOptim application and let it optimize until you see the green checkmark
6. That’s it – it’s ready to pop into your website, your image is now optimized

Note to Windows Users:

1. You can do this same process of cropping + resizing with Windows Photo Editor (a very similar application to “Preview” on the Mac). Here is a helpful tutorial to walk you through how to crop + resize in Windows Photo Editor.
2. This tutorial shows utilizing the ImageOptim application, you can use this exact program through their web app if you do not have a Mac, or you can utilize their other recommended optimization options!

Bonus Tip:

You should drop ANY image you plan to upload to your website into the ImageOptim software. Even if it is already the size you want!