skills.rest
MattSenter
MattSenterCOMMUNITY
Explore all skills by this author →
Website𝕏@MattSenterGitHub

senternet-site-image-webp

Convert site images to WebP and wire up responsive image markup.

Updated May 8, 2026
Search Tags:#performance#webp#responsive images#image optimization#sharp#lcp#next/image
One-click install
npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-image-webp-mattsenter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senternet-site-image-webp
Source: https://github.com/MattSenter/senternet-site-skills/tree/main/.claude/skills/senternet-site-image-webp
Command: npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-image-webp-mattsenter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp.

What problem does it solve? Large PNG and JPG assets slow down marketing sites and hurt Core Web Vitals. This Skill converts all site images to WebP with a repeatable script and updates markup so every image reference uses the modern format correctly. ## Core Features & Use Cases - Batch WebP Conversion: A sharp-based Node script converts PNG/JPG files in src/assets and public/images, applying lossy compression to opaque photos and lossless compression to images with alpha channels. - Responsive Markup Rules: Enforces plain <img> with .webp sources, srcset/sizes for responsive variants, and restricts <picture> to art direction only — never format fallbacks. - LCP Optimization: Adds <link rel="preload"> tags for the hero image with stable public URLs so the largest contentful paint loads early. - Next.js Track: Defers to next/image for automatic WebP/AVIF generation, reserving the conversion script for OG images, favicons, and CSS-referenced assets. - Use Case: After scaffolding a Vite marketing site, run the conversion script to shrink a 2MB hero PNG to a fraction of its size, update all markup references, preload the LCP image, and commit the generated assets. ## Quick Start Convert all images in my site to WebP and update the markup to reference them.

Frequently Asked Questions about senternet-site-image-webp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert PNG and JPG images to WebP in a Node.js project?▼

Install sharp as a dev dependency and write a script that reads each image directory, converts files with sharp's .webp() method, and logs size savings. Use quality 82 for lossy conversion of photos and lossless mode for images with transparency.

Should I use lossy or lossless WebP compression?▼

Use lossy compression at quality 82 for opaque photos, screenshots, and illustrations without transparency. Use lossless mode for anything with an alpha channel, such as transparent backgrounds, logos, and icons, to preserve edge quality.

Do I still need PNG fallbacks with the picture element for WebP?▼

No. WebP is supported by all modern browsers, so format-fallback picture elements are unnecessary. Reserve the picture element for art direction, where you serve a different crop or size per breakpoint, and keep every source pointing at .webp files.

Does next/image replace manual WebP conversion in Next.js?▼

Yes. next/image generates WebP/AVIF and responsive srcsets on demand, so a hand-rolled conversion script and picture element are redundant. Keep a script only for images the optimizer never touches, like OG share images, favicons, and CSS-referenced assets.

How do I preload the LCP hero image for better performance?▼

Add a link rel="preload" tag with as="image", fetchpriority="high", and a media query in index.html pointing at the hero .webp file. The preloaded URL must be a stable public path, so place hero images in public/ rather than hashed build assets.

Related Skills

Explore More Software Engineering Skills→
Kitsune-DenKitsune-Den

frontend-design-ultimate

Generate React, Tailwind, and shadcn/ui frontend projects from plain-language prompts.

Official
Advanced
WesleySmitsWesleySmits
6

profiling-performance

Audit web performance with Lighthouse and Core Web Vitals metrics.

Community
Advanced
isacfgisacfg

i-optimize

Analyze Core Web Vitals and optimize loading, rendering, and bundle size.

Community
Advanced
WesleySmitsWesleySmits
6

optimizing-images

Convert images to WebP and AVIF formats with responsive srcset generation.

Community
Advanced