Image Optimization

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

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

Instructions onlyDesign & Creative
AI-generated overview

Guides web image optimization using compression, modern formats, and responsive image techniques.

What it does
This skill provides guidance for optimizing images for the web to reduce file size while preserving quality. It covers format selection (JPEG, PNG, WebP, SVG), compression settings, responsive image implementation, an optimization process, and monitoring best practices. It also includes a component template and reference guides, but ships no scripts.
When to use it
Use it when optimizing a website's images, implementing responsive images, improving page performance, or enhancing mobile experience, including before deployment.
Requirements
No scripts or tools are bundled; it is instructions and reference documents only. Following the guidance may involve external image tools such as ImageMagick, TinyJPEG, PNGQuant, OptiPNG, or cwebp, but none are required to read the skill.

Image Optimization

Table of Contents

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:

yaml
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:

GuideContents
Image Compression & Formats [blocked]Image Compression & Formats
Responsive Images [blocked]Responsive Images
Optimization Process [blocked]Optimization Process
Monitoring & Best Practices [blocked]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

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/image-optimizationat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from aj-geddes/useful-ai-prompts

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

Awaiting classification355updated 7 months ago

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

Awaiting classification355updated 7 months ago

Web Performance Optimization

aj-geddes

Guides web performance optimization through code splitting, lazy loading, caching, compression, and monitoring.

Software Development355updated 7 months ago

Vue Application Structure

aj-geddes

Guides structuring Vue 3 applications with the Composition API, component organization, and TypeScript.

Software Development355updated 7 months ago

Visual Regression Testing

aj-geddes

Guides visual regression testing of UI by comparing screenshots across versions to catch unintended visual changes.

Software Development355updated 7 months ago

User Persona Creation

aj-geddes

Creates research-based user personas to guide product design, prioritization and messaging.

Research & Analysis355updated 7 months ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today