The high resolution web
0 likes•1,580 views
The document discusses techniques for high resolution images on the web, including adaptive images, srcset attribute, <picture> element, and browser scaling. It provides examples of client-side and server-side solutions for serving adaptive images, such as libraries and services. Guidelines are given for when to use techniques like SVG, icon fonts, and media queries to control images. The document concludes that bandwidth will limit downloading high resolution images over slower networks and to trust cellular optimizations.
The high resolution web
- 1. The web Lat55 meetup, Malmö, Sweden. October 3:rd, 2013, Foo Café.
- 2. 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
- 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. RETINA, RESPONSIVE IMAGES, XHDPI, ADAPTIVE IMAGES, UHDMI,@2X
- 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
- 20. CONCLUSION
- 21. THECHILDHOOD Growing up is never easy
- 22. BANDWIDTH Downloading a hi- res image over an Edge/2G network will take forever! Use the browser scaling technique to avoid heavy downloads.
- 24. MEDIAQUERIES Use media queries to target high dpi screens for hero images
- 25. 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
- 27. Thank you