Presented by Lindsey Norman
There are a lot of arguments and it is very complicated.
Scenario
Large retail client with a lot of imagery
Big Lesson #1: Responsive may seem old hat already, but it’s still new in a lot of organizations.
Responsive Web Design podcast
Big Lesson #2: Style Guides = awesome
Keeps everyone on the same page and is a reference point for changes.
Retina Revolution
- Create image at 1.5 to 2 times larger than necessary and export at high compression
Percentage Crop
- Full size for desktop, but crop for mobile
- Involves moving the viewable area of image for smaller viewports
- Addresses art direction use case
- fast solution
- easy to understand with minimal code
Creative team wanted more control with more crop sizes so created a Sass function
<picture> element allows to rearrange elements and show different sizes