skills.rest
dev-khoi
dev-khoiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-image-art-direction

Serve breakpoint-specific image variants in Next.js using getImageProps and picture elements.

Updated Apr 29, 2026
Search Tags:#image#nextjs#responsive#breakpoints#picture#art-direction#getImageProps
One-click install
npx skills add https://github.com/dev-khoi/conHack-2026 --skill nextjs-image-art-direction-dev-khoi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-image-art-direction
Source: https://github.com/dev-khoi/conHack-2026/tree/main/.opencode/skills/nextjs-image-art-direction
Command: npx skills add https://github.com/dev-khoi/conHack-2026 --skill nextjs-image-art-direction-dev-khoi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Art direction for Next.js images based on viewport size.

Core Features & Use Cases

  • Art-directed image variants for different breakpoints using getImageProps().
  • Use with <picture> and multiple <source> elements to swap assets by viewport.
  • Real-world use: homepage banners that switch from mobile crops to desktop compositions.

Quick Start

Create an art-directed image component that serves desktop and mobile assets using getImageProps() and a <picture> element.

Frequently Asked Questions about nextjs-image-art-direction

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

FAQPage Schema
How do I serve different image crops for mobile and desktop breakpoints in Next.js?▼

Serve art-directed Next.js images by generating breakpoint-specific image content using getImageProps and rendering the variants via a <picture> element with multiple <source> tags.

What is the best way to swap hero image assets based on viewport size in Next.js?▼

Art-directed image delivery swaps hero assets based on viewport by applying getImageProps to generate optimized srcSet variants, rendering them inside a <picture> element for responsive layouts.

When should I use a picture element instead of responsive resizing for Next.js images?▼

Use a <picture> element for art direction when mobile and desktop visuals require different crops or compositions, rather than simply resizing the same image across breakpoints.

Does Next.js getImageProps support art direction for responsive layouts?▼

Yes, Next.js getImageProps supports art direction by generating optimized srcSet variants for different breakpoints, which you render using multiple <source> elements within a <picture> tag.

How do I create an art-directed image component for a Next.js carousel?▼

Create an art-directed image component for carousels by using getImageProps to generate breakpoint-specific variants and rendering them through a <picture> element with multiple <source> tags.

Can I use picture and source elements to change image compositions per breakpoint in Next.js?▼

Yes, you can use <picture> and multiple <source> elements to change image compositions per breakpoint, applying getImageProps to serve art-directed visual variants for different viewport sizes.

Related Skills

Explore More Design & Creative Skills→
Likas07Likas07

ux-architect

Generate CSS design systems and layout frameworks for web development projects.

Community
Advanced
tech-leads-clubtech-leads-club
5.0k

perf-web-optimization

Audit Core Web Vitals and implement image, caching, and code-splitting fixes.

Official
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
imkdwimkdw
1

Frontend Responsive

Implement Tailwind CSS v3 breakpoint-driven responsive UI layouts for Next.js applications.

Community
Intermediate