Optimize Images for Website Design

Modern browsers are built to host optimized image formats, like webp, that can massively speed up your website and keep users on the page. In the post, I’ll show Mac developers how they can write an automation to optimize images for their website designs with a single keystroke.

Watch the Tutorial

Optimizing Images with Automator

How do these automations work?

You can simply select any image file(s) in Finder and launch the automation with a custom keyboard shortcut or through the Quick Actions menu:

1. ConvertImages

This is the simpler automation.

With a single keyboard shortcut (we like to use ⌘ + ^ + W), all selected images will be converted to .webp format and stored alongside the original image.

2. ConvertResizeImages

This automation will resize the image before conversion.

There are three use cases:

1. No width is entered—the automation falls back to ConvertImages and converts but, does not resize, the images.

2. A width, but not a height, is entered—the image is resized to the selected width. The height is automatically calculated based on the aspect ratio of the original image.

   In the gif at the top of this post, the height is not entered and the dimensions of the image scale from 6000 x 4000 to 2000 x 1333.

3. A width and a height are entered—the image is scaled according to the object-fit: cover directive in CSS.

With just a single keystroke, you will be able to resize and optimize your web design images in a modern .webp format!

Installation

Below are the instructions for the ConvertImages automation. Simply repeat the steps with the ConvertResizeImages files from our Github to install the second automation.

1. Install the dependencies, node and sharp, on your machine.

   In terminal, enter:

   brew install node
   
   npm i sharp -g
   

2. Open Automator and make a new Quick Action

3. Change the Workflow receives current properties to images files and Finder.

4. Add a Set Value of Variable step. Create a new variable and name it “files”.

5. Add a Run AppleScript step. Paste in the contents of convert-images/convert-images.scpt.

on run {input, parameters}
  -- convert files to comma-delimited list
	set AppleScript's text item delimiters to ","
	set fileList to {}
	repeat with i in input
		set end of fileList to quoted form of POSIX path of (i as text)
	end repeat

  -- replace node path if necessary
	do shell script "/opt/homebrew/bin/node ~/convert-images.js " & fileList as string
	
	return input
end run

6. Name and save your Automation (e.g., ConvertImages).

7. Place the convert-images/convert-images.js file in your /Users/<name>/ folder.

Your automation should now appear in the Quick Actions menu!

8. [Optional]: Map this to a keyboard shortcut by going to System Settings > Keyboard > Keyboard Shortcuts > Services and giving it a unique keyboard shortcut.

Now you can convert images simply by selecting them and clicking ⌘ + ^ + W !

Conclusion

Optimizing images for website design can be a time consuming process. This script-approach to automating image optimization saves us hours as we develop websites for Cedar Rapids small businesses.