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 ...
Target audience
Developers
Good to know about the
different techniques. What to
expect to work now and in the
future
Desig...
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 ...
•  Server-side solution or as
a cloud service acting
proxy
•  Serve the client with
adapted images
•  Example of services/...
•  Client-side solution
•  Client asks for a hi-res
image if it support higher
resolutions
•  Needs to do two requests
•  ...
srcset-attribute
•  Serves the client with a
picture based on
resolution and viewport
•  Can have several
different descri...
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
•...
Browser scaling
high dpi images
•  % is spent in
bandwidth downloading
images
•  Smaller file sizes, more
crisp and better...
Scalable Vector
Graphics
•  XML-based, can be
used for animation
•  Good browser
support
•  No need to vectorize
bitmap im...
Icon fonts
•  Use instead of icon
images
•  Accessibility issues
•  Example of services:
§  IcoMoon
§  Pictos
§  Font S...
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 ope...
The simple solution
–”Don’t bother”.
DIRECTION
Where are
we heading?!
•  Telia Mobil Total
Mellan 4G dataplan
•  3Gb free data traffic
•  4k movie ~100Gb
•  Co...
CONCLUSION
THECHILDHOOD
Growing up is
never easy
BANDWIDTH
Downloading a hi-
res image over an
Edge/2G network
will take forever!
Use the browser
scaling technique
to avoi...
WEBFONTS
Use webfonts
where appliciable
MEDIAQUERIES
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://d...
QUESTIONS
@flashpatric
flashpatric@gmail.com
Thank you
The high resolution web
The high resolution web
Upcoming SlideShare
Loading in...5
×

The high resolution web

989

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
989
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
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 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. 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
  4. 4. RETINA, RESPONSIVE IMAGES, XHDPI, ADAPTIVE IMAGES, UHDMI,@2X
  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 §  Sencha.io 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 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. 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 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. 24. QUESTIONS @flashpatric flashpatric@gmail.com
  25. 25. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×