Good practices when designing images for the responsive web.

1. RESPONSIVE
IMAGES AND WEB ICON DESIGN
/Olga Voskoboinikova @dVosk

2. A lot of variability (screen sizes and densities).

3. CHALLENGES
Adapt appropriately for each device.
Render neatly in different screens.
Load fast(er).

4. ADAPTIVE IMAGES
Letting the browser scale images is a bad idea.

5. If you can support the mobile web,
you can support anything.
From by Brad FrostMobile First Responsive Web Design

6. ART DIRECTION
Adapt appropriately for each device.
From by Jason GrigsbyMobile First Responsive Design

7. ART DIRECTION & TEXT
From by Jason GrigsbyMobile First Responsive Design

8. Whenever possible,
USE SVG.

9. WTF IS SVG?
It's made of vectors, baby!
Stays crisp and sharp at any resolution.
It's light and allows image sprites.
XML text file that can be created in Sketch.
with JS and CSS.Animated and interactive

10. Want to control every pixel?
JUST REMEMBER
match the low-res pixel grid.

11. SVG BASICS DEMO
http://people.opera.com/andreasb/demos/demos_svgopen2009

12. EXTRA SVG DEMO
http://people.opera.com/andreasb/demos/demos_svgopen2009

13. EXTRA SVG DEMO
1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000
0
500
1000
1500
2000
2500
3000
World production (tons/year)
http://people.opera.com/andreasb/demos/demos_svgopen2009

14. IMG TIPS & TRICKS
Use multiples of 6px. Pixel density matters.
Compress whenever possible.
Don’t include unnecessary data.
Combine image formats.
Design responsively!