• Like
The high resolution web
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

The high resolution web


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. …

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.

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. The web Lat55 meetup, Malmö, Sweden. October 3:rd, 2013, Foo Café.
  • 2. 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
  • 3. 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
  • 5. 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
  • 6. •  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
  • 7. •  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
  • 8. 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
  • 9. image-set() •  image-set() works like the srcset attribute, but in CSS in addition to the background-image property
  • 10. <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
  • 11. 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
  • 12. Scalable Vector Graphics •  XML-based, can be used for animation •  Good browser support •  No need to vectorize bitmap images
  • 13. Icon fonts •  Use instead of icon images •  Accessibility issues •  Example of services: §  IcoMoon §  Pictos §  Font Squirrel §  Symbolset
  • 14. Media queries •  Media queries actually works very well •  You can’t control inline images with it
  • 15. 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/  
  • 16. The simple solution –”Don’t bother”.
  • 17. DIRECTION Where are we heading?! •  Telia Mobil Total Mellan 4G dataplan •  3Gb free data traffic •  4k movie ~100Gb •  Cost: 4800 SEK
  • 19. THECHILDHOOD Growing up is never easy
  • 20. BANDWIDTH Downloading a hi- res image over an Edge/2G network will take forever! Use the browser scaling technique to avoid heavy downloads.
  • 21. WEBFONTS Use webfonts where appliciable
  • 22. MEDIAQUERIES Use media queries to target high dpi screens for hero images
  • 23. 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 Sources
  • 24. QUESTIONS @flashpatric flashpatric@gmail.com
  • 25. Thank you