Image Optimization Workflow

1
2
3
4

[Background: Dark code editor theme]
+ [Post Title: Large, bold, white text]
+ [Tech logos: GitHub, Docker, etc.]
+ [Optional: Code snippet as texture]

1
2
3
4

[Background: Professional gradient or photo]
+ [Post Title: Clean, readable font]
+ [Company logo or icon]
+ [Subtle pattern or shape]

1
2
3
4

[Background: Warm, inviting photo]
+ [Post Title: Friendly font]
+ [Personal photo or illustration]
+ [Soft overlay for text readability]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 1. Install optimization tools
npm install -g sharp-cli
# or use online tools like tinypng.com, squoosh.app

# 2. Optimize single image
npx sharp -i input.png -o output.jpg --quality 80 --progressive

# 3. Batch optimize all images in a folder
for img in *.{jpg,png}; do
  npx sharp -i "$img" -o "optimized-$img" --quality 85
done

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#!/bin/bash

# Image Optimization Script
# Usage: ./optimize-images.sh path/to/images

INPUT_DIR="${1:-.}"
OUTPUT_DIR="${INPUT_DIR}/optimized"

mkdir -p "$OUTPUT_DIR"

echo "Optimizing images in: $INPUT_DIR"

# Optimize JPGs
find "$INPUT_DIR" -maxdepth 1 -type f \( -name "*.jpg" -o -name "*.jpeg" \) | while read img; do
    filename=$(basename "$img")
    echo "Optimizing: $filename"
    convert "$img" -quality 85 -strip "$OUTPUT_DIR/$filename"
done

# Optimize PNGs
find "$INPUT_DIR" -maxdepth 1 -type f -name "*.png" | while read img; do
    filename=$(basename "$img")
    echo "Optimizing: $filename"
    pngquant --quality=80-90 "$img" --output "$OUTPUT_DIR/$filename"
done

echo "Optimization complete! Check: $OUTPUT_DIR"

1
2
3

featured.jpg              # Default name
featured-dark.jpg         # Dark theme variant
featured-social.jpg       # Social media specific

1
2
3
4

diagram-architecture.png  # Descriptive names
screenshot-dashboard.png
photo-team.jpg
icon-github.svg

1
2
3
4
5
6

content/post/
  └── 2024-10-21-mastering-github-actions-arm/
      ├── index.md
      ├── featured.jpg
      ├── diagram-workflow.png
      └── screenshot-results.png

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

content/post/
  ├── 2024-10-21-mastering-github-actions-arm.md
  └── ...

static/images/
  ├── featured/
  │   ├── 2024-10-21-github-actions-arm.jpg
  │   └── ...
  └── content/
      ├── diagram-workflow.png
      └── screenshot-results.png

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

content/post/
  ├── simple-post.md                    # Text-only posts
  ├── post-with-images/                 # Posts with images
  │   ├── index.md
  │   ├── featured.jpg
  │   └── diagram.png
  └── ...

static/images/shared/                   # Shared resources
  ├── logos/
  ├── icons/
  └── banners/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// generate-featured-image.js
// Generates consistent featured images from templates

const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');

async function generateFeaturedImage(title, category, outputPath) {
  const width = 1200;
  const height = 630;
  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext('2d');

  // Background gradient
  const gradient = ctx.createLinearGradient(0, 0, width, height);
  gradient.addColorStop(0, '#667eea');
  gradient.addColorStop(1, '#764ba2');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);

  // Title text
  ctx.fillStyle = '#ffffff';
  ctx.font = 'bold 60px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(title, width / 2, height / 2);

  // Save
  const buffer = canvas.toBuffer('image/jpeg', { quality: 0.85 });
  fs.writeFileSync(outputPath, buffer);
}

// Usage
generateFeaturedImage(
  'Your Post Title',
  'Technology',
  'content/post/your-post/featured.jpg'
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

#!/bin/bash

# Find all images larger than 200KB and optimize them
find content/post -type f \( -name "*.jpg" -o -name "*.png" \) -size +200k | while read img; do
    echo "Large image found: $img"

    # Backup original
    cp "$img" "$img.backup"

    # Optimize
    if [[ $img == *.jpg ]]; then
        convert "$img" -quality 85 -strip "$img.optimized"
    else
        pngquant --quality=85 "$img" --output "$img.optimized"
    fi

    # Replace if smaller
    if [ -f "$img.optimized" ]; then
        mv "$img.optimized" "$img"
        echo "Optimized: $img"
    fi
done

1
2
3
4
5
6
7
8

#!/bin/bash

# Convert all JPGs to WebP for modern browsers
find content/post -name "*.jpg" | while read img; do
    webp_img="${img%.jpg}.webp"
    cwebp -q 85 "$img" -o "$webp_img"
    echo "Created: $webp_img"
done

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

#!/bin/bash

# Check for large images before commit
large_images=$(find content/post -type f \( -name "*.jpg" -o -name "*.png" \) -size +300k)

if [ ! -z "$large_images" ]; then
    echo "Error: Large images detected (>300KB):"
    echo "$large_images"
    echo ""
    echo "Please optimize before committing:"
    echo "  ./scripts/optimize-images.sh"
    exit 1
fi

1

![GitHub Actions workflow diagram showing build, test, and deploy stages](diagram-workflow.png)

1
2
3
4
5
6
7
8

# Using online tool
1. Visit squoosh.app
2. Upload image
3. Set quality to 80-85
4. Download

# Using command line
convert input.jpg -quality 85 -strip output.jpg

1
2
3

![Description](featured.jpg)
# or with folder structure
![Description](./featured.jpg)