React in the Responsive World

Simen Brekken (@simenbrekken)

Daniel Mahal (@danielmahal)

github.com/unfoldoslo

The Challenge

• 50.000+ images
• Ever increasing pixel density
• Bandwidth restrictions
• Varying source material
• Limited human resources
• Optimal quality

Existing Solutions

• PictureFill
  • <img  srcset={...} sizes={...} />
  • <picture /> & <source />
• HiSRC
  • jQuery
• max-width: 100%; height: auto

Our Solution

• Generate images on the fly based on context
• Detect pixel density and bandwidth
• Image transformations and filters
• No humans allowed
• Optimal quality

Images on the fly

• Cloudinary, Imgix, ReSRC etc.
• Roll your own with GraphicsMagick and S3

cloudinary.com/e_trim/w_500,h_250/e_unsharp_mask/jacket.jpg

Trim whitespace

Resize

Filter

Live Demo

Simen Brekken (@simenbrekken)

Daniel Mahal (@danielmahal)

github.com/unfold/react-in-the-responsive-world