images

Automates Next.js Image patterns for responsive sizing, accessibility, and optimization.

Updated Aug 27, 2026

Search Tags:#optimization #image #nextjs #responsive #placeholder #lcp #loader

Ready to run

npx skills add https://github.com/perimetre/ai-toolkit --skill images

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: images
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-apps/skills/images
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill images

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplifies implementing Next.js Image patterns to ensure fast, accessible, and correctly sized images across devices, reducing layout shifts and manual boilerplate.

Core Features & Use Cases

Correct sizing and responsive loading: enforce width/height for static images, proper use of fill for responsive containers, and explicit sizes for efficient loading.
Image optimization and accessibility: priority loading for LCP, blur placeholders, and accessible alt text handling with i18n-friendly approaches.
Practical use cases: hero banners with fill and responsive sizing, grid galleries with consistent aspect ratios, and remote images with safe loaders and remotePatterns configuration.

Quick Start

Implement the recommended Next.js Image patterns in your project to replace ad-hoc image usage with a robust, optimized workflow.

Frequently Asked Questions about images

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

FAQPage Schema

How do I optimize Next.js images to reduce layout shift and improve LCP?▼

Next.js image optimization requires setting explicit width and height for static images or using fill for responsive containers to prevent layout shift. Apply priority loading to LCP elements and specify responsive sizes to ensure efficient loading across devices.

What is the best way to handle responsive images with fill in Next.js?▼

The best way to handle responsive Next.js images with fill is to pair the fill property with explicit sizes attributes on a relatively positioned parent container. This allows the image to scale correctly across breakpoints while maintaining proper aspect ratios.

How do I add blur placeholders for Next.js images?▼

You add blur placeholders for Next.js images by leveraging built-in placeholder properties for static imports or configuring blurDataURL for remote images. This provides a low-resolution preview while the full image loads, improving perceived performance.

How do I configure next.config.js for remote images with custom loaders?▼

You configure next.config.js for remote images by defining remotePatterns to safely whitelist external domains and specifying a custom loader function. This setup ensures images are properly optimized and served through your chosen content delivery network.

Does Next.js image optimization work with internationalized alt text?▼

Yes, Next.js image optimization works with internationalized alt text by passing translated strings directly into the alt attribute. This approach maintains accessibility standards while supporting multi-language workflows.