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.

1. Olawale Oladunni
& Mini Kurhansource image www.flickr.com/photos/lord-jim/5315334550

2. Hello!
Mini Kurhan
Principal, User Experience
Walmart.com
@minikurhan
Olawale Oladunni
Principal, User Experience
Walmart Grocery
@doubleola

3. Walmart starts moving
to Responsive Web
Design in 2014

4. What’s a hero image?

5. Hero images
are usually
large promo
images

6. photo +
whole lotta text
aspect
ratio?
so
tiny!

7. How did we get started?
photo credit: www.flickr.com/photos/ian_munroe/3598706185/

12. Large Device Width Small Device WidthMedium Device Width

13. Large Device Width Small Device WidthMedium 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

14. Cross-functional team is onboard.
photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg

15. A few weeks later…

16. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg

18. Normal Pixel density @1× High Pixel density @2×Normal Pixel density @1×

19. 3:1
2.4:1
2:1

21. Denver, COSan Jose , CA

22. 3 image breakpoints

23. 6 Images to support
retina displays

24. 24 total images in
a carousel with 4
unique images

25. And if you have to 20 different markets.

26. 480 total images are needed

28. Creation Upload
Design workflow

29. Creation Asset Management Trafficking Publishing
Actual Workflow

30. How can we minimize team effort and
reduce number of high quality images
needed, without sacrificing site
performance on any device?

31. Use only retina images.
Idea 1

32. Large Device Width Small Device WidthMedium Device Width
@1× - Normal pixel density images
@2× - Retina pixel density images

33. WTfudge performance?

34. @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

35. @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

36. @1× resolution images @2× resolution images
Dimensions: 1080 × 460 pixels Dimensions: 1080 × 460 pixels

39. Perceived quality
photo credit: www.flickr.com/photos/mccun934/6220542849/

40. Reduce the number of
breakpoints.
Idea 2

41. Large Device Width Small Device WidthMedium 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

42. Large + Medium Device Width Small Device Width
@2× - Retina pixel density images

43. Idea 3
Standardize aspect ratios.

44. 3:1
2.4:1
2:1

45. Art Direction - One layout scaled down for smallest image breakpoint
3:1
3:1

46. Art Direction - Different layout for smallest image breakpoint (optional)
3:1
3:1

47. 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

48. 480
images
Before
20 markets
160
images
After
20 markets

49. This time for real!
photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg

51. photo credit: allthingsd.com/files/2013/03/WalmartHQ.jpg

52. Adaptive Desktop Separate mWeb

53. Adaptive Desktop Separate mWeb

54. Adaptive Fully Responsive Desktop
? ? ?

55. We’re going responsive
in 4 months.

56. Jump right in.
photo credit: www.flickr.com/photos/pmorgan/2829133525/

57. What is currently
being done?

58. Home Page Department Page

59. Heros
Banners
Home Page Department Page

64. photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg

66. more than
600 stories

67. How can we manage the smallest amount
of files, minimize the workload for all the
people involved, while on a short timeline?

68. My idea
Just use one image.

69. Banners!

70. CropSafeCropSafe

71. CropSafeCropSafe

76. Seeing is believing.

77. Home Page (Breakpoint A)

78. Home Page (Breakpoint A)

79. Home Page (Breakpoint A)

80. Home Page (Breakpoint A)

81. Home Page (Breakpoint A)
Department Page (Breakpoint A)

82. Home Page (Breakpoint A)
Department Page (Breakpoint A)
(Breakpoint D)
(Breakpoint E)

84. Seeing is believing.

86. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg

91. Heroes!

92. 1. Vector 2. Guide Image 3. Sample Graphic

93. SafeCrop Crop

94. SafeCrop Crop

95. SafeCrop Crop

96. 5,500
images
Before
2.25 breakpoints
10,000
images
1:1 Desktop & mWeb
3 breakpoints
Desktop
mWeb

97. 4,200
images
Responsive
5 breakpoints
Everywhere

99. What we learned

100. It’s not only about
the technology

101. The teams impacted by
responsive design aren’t
always obvious

102. It’s a partnership
between UX and
Creative

103. Validate ideas through
prototyping

104. Scale is actually not
about size

105. Thanks!
Mini Kurhan
Principal, User Experience
Walmart.com
@minikurhan
Olawale Oladunni
Principal, User Experience
Walmart Grocery
@doubleola