I’ve been writing content for my blog for all of 2022 so far and I add a lot of images to my posts. I find it makes them more engaging. I found a better way to prepare images for the web and hopefully this post helps you too.

This post assumes you’re using a Macbook, which is what I’ve used reliably since 2006. So let’s jump into it. When adding images to your post you may think to just take a screen shot and drag it into the editor.

While this is the easiest way to do it, there’s often performance issues. If you have a post with a lot of images, all 2MB+ then you’ll be sending a lot of data and your page will load slowly.

What’s the trick?

The way I’d do it, if I was doing a screenshot of my calendar for example, I’d use the screenshot tool and take a full sized screenshot. I’d then open it in Preview, resize it to 1200 wide and hit save.

Then I’d drag it into ImageOptim which would cut the image down further in size without losing quality.

This took a while to do each time, so I thought there must be a quicker way….

Here’s THE quicker way

I took a look into Automator for the Macbook. This lets you create actions which show up on right click.

Step 1: Create a Quick Action

Step 2: Add in your process

So this is saying:-

• Receive current images
• Copy them to folder mikestottuk (where I keep my blog images)
• Scale the image to 1200 pixels wide
• Then open them with ImageOptim (which will optimize them for the web)

So if I have a massive image, it’ll save a ton of size, and I can do it with a quick right click.

Old Process

• Take a screenshot
• Open in Preview
• Tools -> Adjust Size
• Make it 1200px wide
• Save
• Drag to ImageOptim
• Upload

New Process

• Take a screenshot
• Right click -> Process for Web
• Upload

Much quicker with the new process.

Wait, some limitations

The main limitations I’m finding with this are that:

1. It doesn’t delete the original image once its been processed (so I’ll have a ton of images on my desktop which I’ll periodically delete).
2. If the screenshot is smaller than 1200px wide – (and it’s not 1200px tall) it’ll make the image bigger up to 1200px.

If I hit the second situation, I can right click and choose “ImageOptimize” which will make the image better quality for the web, without scaling it up to 1200px.