Web graphics:

past, present and future

GIF era

PNG

Transparency with alpha-channel

Loseless compression

Raster format

https://preview.c9.io/webmax/webgraphics/step1-png/index.html

PNG sprites

Smaller total download size

Less HTTP-requests

Extra calculations

Still raster format :(

https://preview.c9.io/webmax/webgraphics/step2-png_sprite_retina/index.html

PNG 2x

Looks almost perfect on HD (2x) displays

Requires 2 versions of images

What about 3x, 4x, Xx?

https://preview.c9.io/webmax/webgraphics/step2-png_sprite_retina/index.html

Font Icons

Vector!

Support coloring

Not supported in some browsers and devices

Hard to position

No multi-colour support

Looks like a hack :(

https://preview.c9.io/webmax/webgraphics/step3_fonticons/index.html

SVG era

Multi-colouring

Support for data:image

We still have IE8 (almost 3%)

https://preview.c9.io/webmax/webgraphics/step4_svg/index.html

Grunticon

Automation

All possible fallbacks (down to IE6)

Requires a bit of JavaScript

https://preview.c9.io/webmax/webgraphics/step5_grumpicon/index.html

Future [discussion]

Foreground SVG images with interactivity and styleability

Responsive images with <picture> element

<takk antall="tusen" />

Maxim Salnikov

Web-frontend developer

Meetups organizer

salnikov@gmail.com

no.linkedin.com/webmax