Streamlining Ghost Blog Feature Images: A Developer’s Guide to Bash & ImageMagick

As a developer, I believe every part of a project—including a personal blog—deserves a solid build pipeline. When I started my Ghost blog, I noticed a recurring pain point: Feature Image inconsistency.

Images came in different sizes, some had uneven margins, and others were in heavy PNG formats that hurt my Largest Contentful Paint (LCP) scores. To solve this, I built a custom automation tool called gopt (Ghost Optimizer).

The Problem: The “Messy” Feature Image

When managing a Ghost blog on a self-hosted environment like a Synology NAS, maintaining a clean UI is crucial. Inconsistent aspect ratios lead to:

• Broken Card UI: Blog post cards on the main page look misaligned.
• Poor SEO: Non-optimized images slow down page loading, affecting search rankings.
• Social Media Clipping: Images get cropped awkwardly when shared on LinkedIn or Twitter.

---

The Solution: A “Trim & Composite” Strategy

Instead of just resizing, I implemented a more robust logic using ImageMagick. The goal was to take any logo or screenshot and force it into a perfect 1600x900 (16:9) WebP container with perfect centering.

Key Technical Decisions:

1. Auto-Background Detection: The script samples the pixel at (0,0) to detect the original background color, ensuring the extended canvas looks seamless.
2. The -trim Command: This removes any uneven whitespace or margins from the source image, leaving only the “essence” of the logo.
3. Pixel Art Preservation: Using -filter point ensures that blocky, pixel-style logos (like the Claude Code logo) stay crisp and don’t get blurred during upscaling.
4. WebP Conversion for SEO & Performance: Switching from PNG to WebP reduces file size by ~30-50% without visible quality loss, improving Largest Contentful Paint (LCP), a key metric for page speed and search ranking.

Tip for Non-Developers: convert is a command-line tool from ImageMagick that lets you edit images via terminal commands—think of it like using Photoshop, but in code form.

---

The Script: optimize_ghost.sh

Here is the final version of the script I use on my Ubuntu machine:

#!/bin/bash

# 1. Configuration
OUTPUT_DIR="/home/jason/picture/blog"
TARGET_RES="1600x900"            # Standard 16:9 ratio for Ghost
INNER_RES="1440x810"             # 90% scale to ensure safe margins
QUALITY=85

mkdir -p "$OUTPUT_DIR"

if [ $# -eq 0 ]; then
    echo "❌ Usage: $0 <image_file1> [image_file2] ..."
    exit 1
fi

echo "🚀 Starting Ghost Feature Image optimization..."

for file in "$@"; do
    if [ ! -f "$file" ]; then
        echo "⚠️ File not found: $file"
        continue
    fi

    filename=$(basename -- "$file")
    filename_noext="${filename%.*}"

    # Detect background color from the top-left pixel
    DETECTED_BG=$(convert "$file" -format "%[pixel:p{0,0}]" info:)

    echo "🔍 Processing: $file (Background: $DETECTED_BG)"

    # The Magic: Create canvas -> Trim original -> Resize -> Composite at center
    convert -size "${TARGET_RES}" xc:"$DETECTED_BG" \
        \( "$file" -filter point -trim +repage -resize "${INNER_RES}" \) \
        -gravity center -composite \
        -strip -quality "$QUALITY" \
        "$OUTPUT_DIR/${filename_noext}.webp"

    echo "✅ Generated: $OUTPUT_DIR/${filename_noext}.webp"
done

echo "✨ Optimization complete. Files moved to $OUTPUT_DIR"

---

Deployment & Workflow

To make this truly seamless, I registered the script as a global command. Now, I can optimize any image directly from my terminal in seconds.

# Register as a global command
chmod +x optimize_ghost.sh
sudo cp optimize_ghost.sh /usr/local/bin/gopt

# Usage
gopt logo_to_upload.png

Tip for Non-Developers: You don’t need to know all ImageMagick commands—just run gopt <filename> and your image is automatically trimmed, resized, and converted to WebP.

---

Final Thoughts

By spending an hour on this automation, I’ve eliminated “image-prep fatigue.” Every post now features a perfectly centered, high-performance image that looks great on any device.

For a developer—or even a tech-savvy blogger—your blog is an extension of your professional image. Details like image optimization and LCP scores demonstrate your commitment to quality and user experience.