Develop comprehensive responsive image strategies for web performance optimization
Develop a responsive image strategy for [WEBSITE/APPLICATION]. Project Context: - Site type: [E-COMMERCE/BLOG/PORTFOLIO/APP] - Traffic profile: [MOBILE %/DESKTOP %] - Performance target: [LCP TARGET] - CMS/platform: [PLATFORM] - CDN: [CDN PROVIDER OR NONE] Create a comprehensive image strategy: **1. Image Audit Categories** | Category | Examples | Typical Sizes | Format Priority | |----------|----------|---------------|----------------| | Hero images | | | | | Product images | | | | | Thumbnails | | | | | Icons | | | | | User content | | | | | Backgrounds | | | | **2. Format Strategy** *Primary Formats:* - WebP: Browser support, when to use - AVIF: Browser support, when to use - JPEG: Fallback scenarios - PNG: When required (transparency) - SVG: Icon and illustration usage *Format Selection Matrix:* | Image Type | Primary | Fallback | Reasoning | |------------|---------|----------|------------| **3. Responsive Breakpoints** *Viewport-based srcset:* ```html <img srcset=" image-320.webp 320w, image-640.webp 640w, image-1024.webp 1024w, image-1920.webp 1920w" sizes="..."> ``` *Sizes Attribute Patterns:* | Layout Type | Sizes Value | Explanation | |-------------|-------------|-------------| | Full width | | | | Container width | | | | Grid item | | | **4. Art Direction Strategy** When to use `<picture>` element: - Aspect ratio changes - Crop variations - Content-aware cropping **5. Lazy Loading Strategy** - Above-the-fold: eager loading - Below-the-fold: lazy loading - Native lazy loading implementation - Placeholder strategies (blur, LQIP, solid color) **6. Performance Optimization** *Compression Targets:* | Image Type | Quality Setting | Target File Size | |------------|-----------------|------------------| *Loading Priority:* - fetchpriority usage - Preload critical images - Defer non-critical images **7. Implementation Patterns** *Hero Image:* ```html [Code pattern] ``` *Product Grid:* ```html [Code pattern] ``` *Background Image:* ```css [Code pattern] ``` **8. CMS/Workflow Integration** - Upload guidelines for content editors - Automated processing pipeline - Naming conventions - Alt text requirements **9. CDN Configuration** - Image transformation parameters - Cache policies - On-the-fly optimization settings **10. Monitoring & Validation** - LCP tracking - CLS prevention - Testing checklist
Develop a responsive image strategy for [WEBSITE/APPLICATION]. Project Context: - Site type: [E-COMMERCE/BLOG/PORTFOLIO/APP] - Traffic profile: [MOBILE %/DESKTOP %] - Performance target: [LCP TARGET] - CMS/platform: [PLATFORM] - CDN: [CDN PROVIDER OR NONE] Create a comprehensive image strategy: **1. Image Audit Categories** | Category | Examples | Typical Sizes | Format Priority | |----------|----------|---------------|----------------| | Hero images | | | | | Product images | | | | | Thumbnails | | | | | Icons | | | | | User content | | | | | Backgrounds | | | | **2. Format Strategy** *Primary Formats:* - WebP: Browser support, when to use - AVIF: Browser support, when to use - JPEG: Fallback scenarios - PNG: When required (transparency) - SVG: Icon and illustration usage *Format Selection Matrix:* | Image Type | Primary | Fallback | Reasoning | |------------|---------|----------|------------| **3. Responsive Breakpoints** *Viewport-based srcset:* ```html <img srcset=" image-320.webp 320w, image-640.webp 640w, image-1024.webp 1024w, image-1920.webp 1920w" sizes="..."> ``` *Sizes Attribute Patterns:* | Layout Type | Sizes Value | Explanation | |-------------|-------------|-------------| | Full width | | | | Container width | | | | Grid item | | | **4. Art Direction Strategy** When to use `<picture>` element: - Aspect ratio changes - Crop variations - Content-aware cropping **5. Lazy Loading Strategy** - Above-the-fold: eager loading - Below-the-fold: lazy loading - Native lazy loading implementation - Placeholder strategies (blur, LQIP, solid color) **6. Performance Optimization** *Compression Targets:* | Image Type | Quality Setting | Target File Size | |------------|-----------------|------------------| *Loading Priority:* - fetchpriority usage - Preload critical images - Defer non-critical images **7. Implementation Patterns** *Hero Image:* ```html [Code pattern] ``` *Product Grid:* ```html [Code pattern] ``` *Background Image:* ```css [Code pattern] ``` **8. CMS/Workflow Integration** - Upload guidelines for content editors - Automated processing pipeline - Naming conventions - Alt text requirements **9. CDN Configuration** - Image transformation parameters - Cache policies - On-the-fly optimization settings **10. Monitoring & Validation** - LCP tracking - CLS prevention - Testing checklist
This prompt is released under CC0 (Public Domain). You are free to use it for any purpose without attribution.
Explore similar prompts based on category and tags
Analyze UI layouts for hierarchy, balance, accessibility, and provide actionable improvements
Write comprehensive motion design specifications for consistent, performant animations
Create thorough design system component specifications
Generate color palettes with theory explanations, accessibility compliance, and usage guidelines