Skip to content

Responsive Design Best Practices

Peakhour provides a comprehensive image optimization API that delivers high-quality, performance-optimized images across all devices. This guide covers best practices for responsive design using Peakhour's advanced image processing capabilities.

Responsive design ensures your website adapts to different screen sizes, resolutions, and device capabilities. Images are often the largest assets on web pages, making proper optimization crucial for performance and user experience.

Essential Responsive Techniques

Use Intelligent Fitting

Choose the right fit parameter for your use case:

<!-- Hero images: maintain aspect ratio -->
<img src="hero.jpg?w=1200&h=600&fit=clip" alt="Hero">

<!-- Profile pictures: crop to exact dimensions -->  
<img src="avatar.jpg?w=150&h=150&fit=crop&crop=faces" alt="Profile">

<!-- Product images: fill container with padding -->
<img src="product.jpg?w=400&h=400&fit=fill&bg=white" alt="Product">

Leverage Auto Optimization

Use auto=optimize,format for automatic format selection and quality optimization:

<!-- Automatically serve WebP/AVIF to supporting browsers -->
<img src="image.jpg?w=800&auto=optimize,format" alt="Optimized image">

Implement Device Pixel Ratio Support

Serve high-resolution images for retina displays while optimizing quality:

<!-- Standard resolution -->
<img src="image.jpg?w=400&q=85&auto=format" alt="Standard">

<!-- High DPR with quality adjustment -->
<img src="image.jpg?w=400&dpr=2&q=75&auto=format" alt="Retina">

Advanced Responsive Strategies

Client Hints Integration

Enable browser-native responsive delivery:

<!-- Enable client hints -->
<meta http-equiv="Accept-CH" content="Width,DPR,Save-Data">

<!-- Use with client hints parameters -->
<img src="image.jpg?ch=width,dpr,savedata&auto=format" alt="Client hints">

Performance-Aware Processing

Combine visual enhancements with optimization:

<!-- Enhanced images with performance optimization -->
<img src="photo.jpg?w=800&brightness=5&contrast=15&usm=1.2&auto=optimize,format&q=85" 
     alt="Enhanced photo">

Responsive Image Sets

Create comprehensive srcset implementations:

<img src="image.jpg?w=800&auto=format" 
     srcset="image.jpg?w=400&auto=format 400w,
             image.jpg?w=800&auto=format 800w,
             image.jpg?w=1200&auto=format 1200w,
             image.jpg?w=1600&auto=format 1600w"
     sizes="(max-width: 400px) 400px,
            (max-width: 800px) 800px,
            (max-width: 1200px) 1200px,
            1600px"
     alt="Responsive image">

Content-Aware Optimization

Smart Cropping for Different Ratios

<!-- Mobile: square crop with face detection -->
<source media="(max-width: 768px)" 
        srcset="portrait.jpg?w=300&h=300&fit=crop&crop=faces&auto=format">

<!-- Desktop: landscape crop -->  
<source media="(min-width: 769px)" 
        srcset="portrait.jpg?w=600&h=400&fit=crop&crop=centre&auto=format">

<img src="portrait.jpg?w=600&h=400&auto=format" alt="Portrait">

Contextual Image Enhancement

<!-- Hero images: subtle enhancement -->
<img src="hero.jpg?w=1920&h=1080&brightness=8&contrast=12&saturation=10&auto=format" 
     alt="Hero">

<!-- Thumbnails: increased sharpening for clarity -->
<img src="thumb.jpg?w=200&h=200&fit=crop&sharp=25&auto=format" alt="Thumbnail">

Modern Responsive Patterns

CSS-in-JS Integration

// Generate responsive image URLs
const getResponsiveImage = (src, width, options = {}) => {
  const params = new URLSearchParams({
    w: width,
    auto: 'optimize,format',
    ...options
  });
  return `${src}?${params}`;
};

// Usage
const heroUrl = getResponsiveImage('hero.jpg', 1200, { 
  brightness: 10, 
  contrast: 15, 
  q: 85 
});

Progressive Loading

<!-- Low-quality placeholder -->
<img src="image.jpg?w=40&blur=5&q=20" 
     data-src="image.jpg?w=800&auto=format" 
     class="lazy-load" 
     alt="Progressive image">

Art Direction with Effects

<picture>
  <!-- Mobile: square with vintage effect -->
  <source media="(max-width: 768px)" 
          srcset="photo.jpg?w=400&h=400&fit=crop&sepia=30&brightness=-5&auto=format">

  <!-- Tablet: rounded corners -->
  <source media="(max-width: 1024px)" 
          srcset="photo.jpg?w=800&h=600&mask=corners&corner_radius=20&auto=format">

  <!-- Desktop: full enhancement -->
  <img src="photo.jpg?w=1200&h=800&brightness=8&contrast=15&usm=1.5&auto=format" 
       alt="Art directed photo">
</picture>

Performance Optimization

Bandwidth-Aware Delivery

<!-- High-quality for fast connections -->
<img src="image.jpg?w=800&q=90&auto=format" 
     data-save-data-src="image.jpg?w=600&q=70&auto=format" 
     alt="Bandwidth-aware">

Format-Specific Optimization

<!-- WebP with specific optimization -->
<source type="image/webp" 
        srcset="image.jpg?fm=webp&w=800&q=85&lossless=false">

<!-- AVIF with maximum compression -->
<source type="image/avif" 
        srcset="image.jpg?fm=avif&w=800&q=75">

<!-- Fallback JPEG -->
<img src="image.jpg?w=800&q=85" alt="Optimized fallback">

Cache-Friendly URLs

<!-- Consistent parameter order for better caching -->
<img src="image.jpg?auto=format&fit=crop&h=600&w=800" alt="Cached">

Testing and Monitoring

Performance Validation

// Monitor image performance
const measureImageLoad = (img) => {
  const startTime = performance.now();
  img.onload = () => {
    const loadTime = performance.now() - startTime;
    console.log(`Image loaded in ${loadTime}ms`);
  };
};

Quality Assessment

Test different quality settings for your content: - Portraits: q=85 with usm=1.2 - Landscapes: q=80 with brightness=5&contrast=12 - Graphics: q=90 with sharp=20 - Thumbnails: q=75 with sharp=30

Best Practices Summary

  1. Always use auto=optimize,format for modern browser optimization
  2. Implement proper srcset with multiple breakpoints
  3. Use DPR-aware quality settings (reduce quality for high-DPR)
  4. Apply content-appropriate enhancements (faces detection, sharpening)
  5. Test across devices to ensure quality and performance
  6. Monitor Core Web Vitals impact of image optimizations
  7. Use client hints where supported for automatic optimization
  8. Implement progressive loading for better perceived performance
  9. Choose appropriate fit modes based on content and layout needs
  10. Cache-optimize by using consistent parameter ordering

By following these practices, you'll deliver fast, high-quality images that adapt perfectly to any device while maintaining optimal performance and user experience.