The high resolution web


Published on

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
  • 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

No notes for slide

The high resolution web

  1. 1. The web Lat55 meetup, Malmö, Sweden. October 3:rd, 2013, Foo Café.
  2. 2. Who am I Patric Lanhed LBi Malmö @flashpatric +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. 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. 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. 6. •  Server-side solution or as a cloud service acting proxy •  Serve the client with adapted images •  Example of services/ tools: Adaptive Images § Image service §  Adaptive Images
  7. 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. 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. 9. image-set() •  image-set() works like the srcset attribute, but in CSS in addition to the background-image property
  10. 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. 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. 12. Scalable Vector Graphics •  XML-based, can be used for animation •  Good browser support •  No need to vectorize bitmap images
  13. 13. Icon fonts •  Use instead of icon images •  Accessibility issues •  Example of services: §  IcoMoon §  Pictos §  Font Squirrel §  Symbolset
  14. 14. Media queries •  Media queries actually works very well •  You can’t control inline images with it
  15. 15. Trust in cellular network optimizations 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://­‐compression-­‐results/  
  16. 16. The simple solution –”Don’t bother”.
  17. 17. DIRECTION Where are we heading?! •  Telia Mobil Total Mellan 4G dataplan •  3Gb free data traffic •  4k movie ~100Gb •  Cost: 4800 SEK
  18. 18. CONCLUSION
  19. 19. THECHILDHOOD Growing up is never easy
  20. 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. 21. WEBFONTS Use webfonts where appliciable
  22. 22. MEDIAQUERIES Use media queries to target high dpi screens for hero images
  23. 23. Writings on the topic, could be relevant to one or more parts adaptive-images-in-responsive-web-design/ responsive-images/ displays-new-ipadiphone4/ Screen casts on the topic, could be relevant to one or more parts Presentations WebFonts <picture>, srcset, image-set() with-the-srcset-image-attribute/ SVG CSS retina-images/ Tools/scripts for Adaptive images key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0!/guide/src Device pixel ratio List of displays by pixel density WebP Image optimization images-for-retina Sources
  24. 24. QUESTIONS @flashpatric
  25. 25. Thank you