the high resolution web
DESCRIPTION
Designing for the modern web might be complicated. This presentation covers the techniques of today and tomorrow and is important for both designers, content managers and developers. Patric Lanhed works for the Malmö office at LBi as a Front-end developer, and is always exited about experimenting with new technology.TRANSCRIPT
The web
Lat55 meetup, Malmö, Sweden. October 3:rd, 2013, Foo Café.
Who am I
Patric Lanhed LBi Malmö @flashpatric [email protected] +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
Thank you