$30 off During Our Annual Pro Sale. View Details »

Responsive Heroes at Scale

Mini Kurhan
September 25, 2015

Responsive Heroes at Scale

By Olawale Oladunni and Mini Kurhan. Creating images that work across multiple device breakpoints is difficult. As designers at @Walmartlabs, we’ve faced this challenge at an enormous scale. We learned that, beyond technical details, there are a host of factors that determine a successful outcome. We’ll share solutions that helped our teams adapt their current processes to execute quickly.

Mini Kurhan

September 25, 2015
Tweet

Other Decks in Design

Transcript

  1. Large Device Width Small Device Width Medium Device Width @1×

    - Normal pixel density images @2× - Retina pixel density images 3:1 2.4:1 2:1 3:1 2.4:1 2:1
  2. How can we minimize team effort and reduce number of

    high quality images needed, without sacrificing site performance on any device?
  3. Large Device Width Small Device Width Medium Device Width @1×

    - Normal pixel density images @2× - Retina pixel density images
  4. @1× resolution images @2× resolution images Dimensions: 1080 × 460

    pixels JPEG quality: 80% File size: 155 kb Dimensions: 2160 × 920 pixels JPEG quality: 80% File size: 367kb
  5. @1× resolution images @2× resolution images Dimensions: 1080 × 460

    pixels JPEG quality: 80% File size: 155 kb Dimensions: 2160 × 920 pixels JPEG quality: 10% File size: 156 kb
  6. Large Device Width Small Device Width Medium Device Width @2×

    - Retina pixel density images JPEG quality: 10% File size: 156kb JPEG quality: 80% File size: 219 kb JPEG quality: 10% File size: 155 kb
  7. Before After 3:1 2.4:1 2:1 3:1 2.4:1 2:1 3:1 3:1

    @2× - Retina pixel density @2× - Retina pixel density @1× - Normal pixel density
  8. How can we manage the smallest amount of files, minimize

    the workload for all the people involved, while on a short timeline?