DEV Community

Jacob Stern
Jacob Stern

Posted on • Updated on

Days 32-34 / 100 Days of Code: Tackling .webp Image Files on macOS

Sat, August 3, 2024

Today I faced a different challenge: Codecademy promotes .webp image format for projects, but my MacBook didn’t recognize any graphics app as .webp capable. Using the first solution I found online with Homebrew to install the webp library resulted in extremely low-quality images. Not wanting to manually convert every image, I looked for an automated solution. I found a workaround using ImageMagick, a script that I adapted, and the mac Automator app to create Quick Actions.

Create a Quick Action to Convert .jpg or .png files to .webp:

  1. Install ImageMagick using Homebrew: brew install imagemagick
  2. Open Automator and select Quick Action
  3. In the sidebar, select Utilities, then Run shell scrip
  4. In the ‘Shell’ dropdown, select /bin/zsh
  5. In the ‘Pass input’ dropdown, select as arguments
  6. Replace the text box content with the script and save as Convert to webp
  7. Use the adapted zsh script from David Coleman’s with modern brew file path
  8. David suggests a quality setting of 70 or 80, which looks good and provides nice compression
  9. Now you can convert images to .webp in Finder from the Quick Actions menu
for f in "$@"
do
    # Extract the file extension and base name
    ext="${f##*.}"
    filename="${f%.*}"
    # Define the output file path with the .webp extension
    outfile="${filename}.webp"
    # Check for specific image file extensions
    if [[ "$ext" == "jpg" || "$ext" == "jpeg" || "$ext" == "bmp" || "$ext" == "gif" || "$ext" == "avif" || "$ext" == "png" || "$ext" == "heif" || "$ext" == "heic" ]]; then
        # Convert the image file to WebP using ImageMagick with specified settings
        /opt/homebrew/bin/magick "$f" -quality 75 -strip "${f%.*}.webp"
Enter fullscreen mode Exit fullscreen mode

Optionally, create a Quick Action to Open .webp Files in GIMP:

  1. Open Automator and select Quick Action
  2. In the ‘Workflow receives current’ dropdown, select image files
  3. In the ‘in’ dropdown, select Finder.app
  4. From the sidebar, select the Finder icon 'Files & Folders', then 'Open Finder items'
  5. Select Other, and choose GIMP
  6. Save the workflow as Open with GIMP
  7. Now, you can select .webp files in Finder and open them in GIMP from the Quick Actions menu

I’ve started on assessments but need to wrap up for today due to home commitments. I’ll follow up with results.

Top comments (0)