The high resolution web

The web

Lat55 meetup, Malmö, Sweden. October 3:rd, 2013, Foo Café.

Who am I

Patric Lanhed LBi Malmö @flashpatric flashpatric@gmail.com +46709412883

Curious and creative developer who loves to experiment with new technology

Front-end developer at LBi in Malmö

User group manager of Lat55

Workout and bicycle addict

Target audience

Developers

Good to know about the different techniques. What to expect to work now and in the future

Designers

Knowing where to require high resolution images, and where not to!

Content managers

Knowing the requirements in advance will secure the work flow where CMS will fail

RETINA, RESPONSIVE IMAGES, XHDPI,

ADAPTIVE IMAGES, UHDMI,@2X

High resolution techniques

Full control

Adaptive images

Lo-res images load first, hi-res loads if needed

srcset-attribute / image-set()

<picture>-element

Browser scaling high dpi images

Partial control

SVG

Icon fonts

Media queries for background images

No control

Trust in cellular network optimizations

Don't bother

•  Server-side solution or as a cloud service acting proxy

•  Serve the client with adapted images

•  Example of services/tools:

Adaptive Images

§  Sencha.io Image service

§  Adaptive Images

•  Client-side solution

•  Client asks for a hi-res image if it support higher resolutions

•  Needs to do two requests

•  Example of libs/tools

Lo-res images load first, hi-res loads if needed

§  Retina.js

§  Retina Images

srcset-attribute

•  Serves the client with a picture based on resolution and viewport

•  Can have several different descriptors

•  A descriptor can be either a pixel value of maximum viewport width or height of CSS pixels, described as ex 100w or 100h, or with a modifier such as 2x

image-set()

•  image-set() works like the srcset attribute, but in CSS in addition to the background-image property

<picture>-element

•  Serves the client with a picture based on media tests

•  Can also be used with the srcset-attribute

•  Fallbacks to <img> if not supported

•  Currently no support in any browser, but there's polyfills

Browser scaling high dpi images

•  % is spent in bandwidth downloading images

•  Smaller file sizes, more crisp and better quality

•  Time consuming

•  WebP image format

•  The CSS image() notation

Jpg compression 80/13kb Jpg compression 40/13 kb (the same size as the base)

Jpg compression 80/30 kb Jpg compression 31/30 kb (the same size as the base)

60

Scalable Vector Graphics

•  XML-based, can be used for animation

•  Good browser support

•  No need to vectorize bitmap images

Icon fonts

•  Use instead of icon images

•  Accessibility issues

•  Example of services:

§  IcoMoon

§  Pictos

§  Font Squirrel

§  Symbolset

Media queries

•  Media queries actually works very well

•  You can’t control inline images with it

Trust in cellular network optimizations

http://flashpatric.com/image-compression-results/asdfasdf

•  Cellular network operator compress the hell out of the images

•  Not being done by the operators in Sweden

•  Opera Mini has a “Turbo” option, compressing images in favor for fast pageloads

h"p://flashpatric.com/image-­‐compression-­‐results/  

The simple solution

–”Don’t bother”.

DIR

EC

TIO

N

Where are we heading?!

•  Telia Mobil Total Mellan 4G dataplan

•  3Gb free data traffic

•  4k movie ~100Gb

•  Cost: 4800 SEK

CONCLUSION

TH

E C

HIL

DH

OO

D

Growing up is never easy

BA

ND

WID

TH

Downloading a hi-res image over an Edge/2G network will take forever!

Use the browser scaling technique to avoid heavy downloads.

WE

B F

ON

TS

Use webfonts where appliciable

ME

DIA

QU

ER

IES

Use media queries to target high dpi screens for hero images

Writings on the topic, could be relevant to one or more parts http://alistapart.com/article/mo-pixels-mo-problems http://daverupert.com/2013/06/ughck-images/ http://dbushell.com/2013/06/03/the-raster-image-paradox/ http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/ http://boagworld.com/dev/how-should-we-handle-responsive-images/ http://www.renaissance-design.net/outrunning-the-bear-the-problem-with-responsive-images/ http://blog.netvlies.nl/design-interactie/retina-revolutie-follow-up/ http://www.html5rocks.com/en/mobile/easy-high-dpi-images/ http://filamentgroup.com/lab/rwd_img_compression/ http://www.html5rocks.com/en/mobile/high-dpi/ http://www.bypeople.com/web-design-trends-2013/ http://borismus.github.io/image-zoom/ http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/ http://html5doctor.com/html5-adaptive-images-end-of-round-one/ http://manyangl.es/2013/02/implementing-retina-ready-images-on-the-web Screen casts on the topic, could be relevant to one or more parts http://tv.adobe.com/watch/max-2013/web-graphics-and-the-creative-professional/ https://experts.adobeconnect.com/_a204547676/p54d4dwyr6v/

Presentations https://speakerdeck.com/ddemaree/designing-the-hi-dpi-web https://speakerdeck.com/davatron5000/mo-pixels-mo-problems

WebFonts http://vimeo.com/33154573 http://icomoon.io/app/ http://pictos.cc/ http://www.fontsquirrel.com/ http://symbolset.com/ http://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/

<picture>, srcset, image-set() http://www.w3.org/TR/html-picture-element/#the-picture-element http://www.webmonkey.com/2012/11/preview-the-proposed-html-picture-element/ http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ http://responsiveimagescg.github.io/picture-refimp/demo/ https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

SVG http://www.w3.org/TR/2013/WD-filter-effects-20130523/ http://docs.webplatform.org/wiki/svg http://caniuse.com/#search=svg

CSS http://css-tricks.com/snippets/css/retina-display-media-query/ http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/ http://www.w3.org/TR/css3-images/#image-notation

Tools/scripts for Adaptive images https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 http://retinajs.com/ http://adaptive-images.com/ http://retina-images.complexcompulsions.com/ http://docs.sencha.io/current/index.html#!/guide/src http://mcilvena.com/articles/jquery-retina/ https://github.com/scottjehl/picturefill https://github.com/teleject/hisrc http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/

Device pixel ratio http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html List of displays by pixel density http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density http://screensiz.es/

WebP http://caniuse.com/#feat=webp

Image optimization http://imageoptim.com/ http://x128.ho.ua/color-quantizer.html http://mistermorris.tumblr.com/post/20002250192/upscaling-raster-bitmap-images-for-retina http://www.opera.com/turbo

So

urce

s

QUESTIONS @flashpatric

flashpatric@gmail.com

Thank you