image-optimization

aj-geddes/useful-ai-prompts · skills/image-optimization/SKILL.md

Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading.

Design & CreativeNo license★ 324⑂ 51commit 3f5182c

Install skillView source on GitHub

What this skill does

Image Optimization

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.

When to Use

Website optimization
Responsive image implementation
Performance improvement
Mobile experience enhancement
Before deployment

Quick Start

Minimal working example:

Format Selection:

JPEG:
  Best for: Photographs, complex images
  Compression: Lossy (quality 70-85)
  Size: ~50-70% reduction
  Tools: ImageMagick, TinyJPEG
  Command: convert image.jpg -quality 75 optimized.jpg

PNG:
  Best for: Icons, screenshots, transparent images
  Compression: Lossless
  Size: 10-30% reduction
  Tools: PNGQuant, OptiPNG
  Command: optipng -o3 image.png

WebP:
  Best for: Modern browsers (90% support)
  Compression: 25-35% better than JPEG/PNG
  Fallback: Use <picture> element
  Tools: cwebp
  Command: cwebp -q 75 image.jpg -o image.webp

SVG:
  Best for: Icons, logos, simple graphics
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | Image Compression & Formats | Image Compression & Formats | | Responsive Images | Responsive Images | | Optimization Process | Optimization Process | | Monitoring & Best Practices | Monitoring & Best Practices |

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/image-optimization · pinned to the source commit

# Run from your project root
git clone https://github.com/aj-geddes/useful-ai-prompts.git .skillboard-tmp
git -C .skillboard-tmp checkout 3f5182cfd739fc113f4af5244a1cf342ad7f7911
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/image-optimization" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/aj-geddes/useful-ai-prompts.git .skillboard-tmp
git -C .skillboard-tmp checkout 3f5182cfd739fc113f4af5244a1cf342ad7f7911
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/image-optimization" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/image-optimization

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so image-optimization is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 3f5182cfd739. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

image-optimization

aj-geddes/useful-ai-prompts · skills/image-optimization/SKILL.md

Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading.

Design & CreativeNo license★ 324⑂ 51commit 3f5182c

What this skill does

Image Optimization

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.

When to Use

Website optimization
Responsive image implementation
Performance improvement
Mobile experience enhancement
Before deployment

Quick Start

Minimal working example:

Format Selection:

JPEG:
  Best for: Photographs, complex images
  Compression: Lossy (quality 70-85)
  Size: ~50-70% reduction
  Tools: ImageMagick, TinyJPEG
  Command: convert image.jpg -quality 75 optimized.jpg

PNG:
  Best for: Icons, screenshots, transparent images
  Compression: Lossless
  Size: 10-30% reduction
  Tools: PNGQuant, OptiPNG
  Command: optipng -o3 image.png

WebP:
  Best for: Modern browsers (90% support)
  Compression: 25-35% better than JPEG/PNG
  Fallback: Use <picture> element
  Tools: cwebp
  Command: cwebp -q 75 image.jpg -o image.webp

SVG:
  Best for: Icons, logos, simple graphics
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/image-optimization · pinned to the source commit

# Run from your project root
git clone https://github.com/aj-geddes/useful-ai-prompts.git .skillboard-tmp
git -C .skillboard-tmp checkout 3f5182cfd739fc113f4af5244a1cf342ad7f7911
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/image-optimization" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/aj-geddes/useful-ai-prompts.git .skillboard-tmp
git -C .skillboard-tmp checkout 3f5182cfd739fc113f4af5244a1cf342ad7f7911
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/image-optimization" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/image-optimization

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so image-optimization is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 3f5182cfd739. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

image-optimization

What this skill does

Image Optimization

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

image-optimization

What this skill does

Image Optimization

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits