How does this skill help with SEO?

By significantly reducing image file sizes and improving page load times, it directly improves Core Web Vitals, which is a critical ranking factor for search engines.

What formats does the Image Optimization skill support?

The skill provides patterns and guidance for modern formats including WebP and AVIF, as well as standard formats like JPEG, PNG, and SVG for icons.

Does it support responsive design?

Absolutely. It provides code snippets and best practices for using the element and srcset attributes to serve optimized images based on the user's device resolution.

Can I use this for automated build tasks?

Yes, the skill includes implementation patterns for using the Sharp library in Node.js to automate resizing, compression, and format conversion during your build process.

Image Optimization & Performance

Name: Image Optimization & Performance
Author: secondsky

bysecondsky

•

デザインツール

Optimizes web images using modern formats, responsive techniques, and automated build pipelines to improve page load times and SEO.

This skill empowers Claude to implement industry-standard image optimization strategies, ensuring web applications are fast, responsive, and SEO-friendly. It provides comprehensive guidance on selecting modern formats like WebP and AVIF, implementing complex responsive image syntax with srcset and picture tags, and integrating automated optimization steps using tools like Sharp. Whether you are preparing assets for a production deployment or auditing existing performance, this skill helps reduce page weight and improve Core Web Vitals through structured checklists and proven implementation patterns.

主な機能

01Modern format implementation including WebP and AVIF for superior compression

02Native and custom lazy loading strategies with blur-up placeholders

0311 GitHub stars

04Automated responsive image syntax generation using srcset and picture tags

05Performance benchmarking for hero images, thumbnails, and total page weight

06Sharp-based build pipeline integration for automated asset processing

ユースケース

01Automating image processing workflows within Node.js and CI/CD environments

02Improving Core Web Vitals and Largest Contentful Paint (LCP) scores for production websites

03Migrating legacy JPEG/PNG asset libraries to high-efficiency next-gen formats

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills image-optimization

For use in Claude.ai and ChatGPT

Download Skill