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.

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

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.

23. WEBFONTS
Use webfonts
where appliciable

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

26. QUESTIONS
@flashpatric
flashpatric@gmail.com

27. Thank you