Web graphics:

past, present and future

Maxim Salnikov

Web UI developer

Meetups organizer

Rock star

Web UI graphics

GIF era

PNG

Transparency with alpha-channel

Loseless compression

Raster format

IE...

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

PNG

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

PNG 2x

Looks almost perfect on HD (2x) displays

 

Still distorted while scaling down

What about 3x, 4x, Xx?

https://preview.c9.io/webmax/webgraphics/step2-png_sprite_retina/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 sprites

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

Font Icons

Vector!

Support coloring and effects

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

Font Icons

Rendered as a text

Extremely hard to position

line-height, vertical-align, letter-spacing, word-spacing

CORS issues

Semantics

Accessibility

Strange bugs

Not supported in some browsers and devices

 

 

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

SVG era

Solves almost all fonticon problems

Multi-colouring

Support for data:image (use with care!)

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

Tools

Tools

<thankyou howmuch="verymuch" />

Maxim Salnikov

salnikov@gmail.com

no.linkedin.com/webmax

@webmaxru