Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
I love images.
● BA in Art History
● Worked at a stock image company
(RIP Veer)
● Front End Developer for 7 years and
now ...
GOAL.
Excellent visual experience
across all devices.
Big images.
● Designers love huge, impactful images
● Image-heavy sites aren’t going
anywhere
● Comes at a cost - $17,658....
High quality across
devices.
● Variety of devices to consider
● Users no longer only use desktop to
shop/ work
● Some peop...
Reduced load times.
● Images are not render-blocking but still
impact user experience
● Non-resized images will drain data...
HOW? 3 things to keep in mind.
*Source
FAST.
Let’s get things moving.
Your go-to image types.
● JPG
● PNG
● SVG
● GIF
● Test out various image types and see
what works best - the smaller the i...
The future is cool.
● Hundreds of image file types? What?
● BPG will work (but only with some JS)
● WEBP works in Chrome a...
Get some help.
● CDN is your global team
● Deploy your images as fast as possible
● Optimize your images before adding to
...
Save it for later.
● Cache your images
● Change the request headers of your
resources to use caching*
● Edit your .htacces...
Do you really need that
many images?
● Yes. (or maybe not)
GOOD.
Couture-quality.
Resize our images.
● Need to have different sizes of our
images
● CMS will often provide options for
different image dimen...
Image sizes.
● kitten-large.jpg (1024 x 768)
● kitten-medium.jpg (640 x 480)
● kitten-small.jpg (320 x 240)
Some new friends.
● srcset (new attribute for img)
● sizes (new attribute for img)
● picture (new element)
Browser support - srcset
● So much can change in a year
● IE and Opera Mini are still a problem, but
we’ll address that in...
srcset
● Attribute that is added to the img
element
● Allows us to add comma-separated list
of images with info about thei...
sizes
● sizes="(min-width: 769px) 25vw, 100vw"
● Translates to "If the viewport is wider
than 769px, then this image will ...
Browser support - picture
● We’re getting there!
● Greater control over which image is
displayed, but less popular
2015
20...
picture
● Wraps around the img element
● Append classes to img element (or
figure)
● Allows for progressive enhancement -
...
Art direction.
● kitten-large.jpg (1024 x 768)
● kitten-medium.jpg (640 x 480)
● kitten-small.jpg (320 x 240)
CHEAP.
(results may vary)
Time = money.
● Automate tasks
● Use small amount of JS to make life
easier
● Cross-browser support
Automate resizing.
● User-uploaded images resized on the fly
http://adaptive-images.com/ or http:
//squeezr.it/
● Task run...
IE/ Opera Mini
● First… huzzah for Edge!! Totally
supports srcset, sizes and picture
● Alas, IE11 and below/ Opera mini
● ...
Responsive images with
a little help from
JavaScript.
● https://github.com/kvendrik/responsive-
images.js
● https://github...
LazySizes
● https://github.com/aFarkas/lazysizes
● Combines cross-browser support of
srcset and sizes with lazy loading
● ...
Final thoughts.
● Educate client on side-effects of large
images
● Don’t let yourself be constrained to text
only!
● Start...
More Rescources.
● Lynda.com Responsive Images
● Responsive images 101
● Picture Element
● Responsive Images overview
● Im...
Thanks for listening!
Anne Thomas
@AlfalfaAnne
Out of the Sandbox
Deliver Perfect Images At Any Size
Upcoming SlideShare
Loading in …5
×

Deliver Perfect Images At Any Size

273 views

Published on

Deliver Perfect Images At Any Size
with Anne Thomas
Out of the Sandbox

Overview

One of the most difficult aspects of developing for different screen sizes is the need to serve high quality images without slowing down the browsing experience. Websites are becoming more image heavy every year and with the popularity of content management systems growing, we don’t always have the luxury of complete control over the image sizes that are uploaded. Anne will be sharing some of the tricks that she has learned over the years to achieve the ideal combination for responsive images – fast, good and cheap.

Objective

Help you build sites that deliver high-quality images regardless of screen size with modern techniques (and even support Internet Explorer!)

Five Things Audience Members Will Learn

Alternatives to JPGs and the pros and cons
How to speed up load times for images
Modern methods to display images beyond the usual img element
How to generate correct image size for every device
Handy comparison of JS libraries to support older browsers

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Deliver Perfect Images At Any Size

  1. 1. I love images. ● BA in Art History ● Worked at a stock image company (RIP Veer) ● Front End Developer for 7 years and now work on Shopify themes *Source
  2. 2. GOAL. Excellent visual experience across all devices.
  3. 3. Big images. ● Designers love huge, impactful images ● Image-heavy sites aren’t going anywhere ● Comes at a cost - $17,658.62 to run Unsplash for a month* *Source
  4. 4. High quality across devices. ● Variety of devices to consider ● Users no longer only use desktop to shop/ work ● Some people only have access to mobile phone
  5. 5. Reduced load times. ● Images are not render-blocking but still impact user experience ● Non-resized images will drain data plans ● Is it necessary to load that massive image?
  6. 6. HOW? 3 things to keep in mind.
  7. 7. *Source
  8. 8. FAST. Let’s get things moving.
  9. 9. Your go-to image types. ● JPG ● PNG ● SVG ● GIF ● Test out various image types and see what works best - the smaller the image size, the faster it will download to the browser
  10. 10. The future is cool. ● Hundreds of image file types? What? ● BPG will work (but only with some JS) ● WEBP works in Chrome and Opera ● Keep an eye on these, but they aren’t there quite yet (sadly)
  11. 11. Get some help. ● CDN is your global team ● Deploy your images as fast as possible ● Optimize your images before adding to server (not always possible with content management systems) ● MaxCDN, CloudFlare, Rackspace Cloud Files, CacheFly, AWS and so on
  12. 12. Save it for later. ● Cache your images ● Change the request headers of your resources to use caching* ● Edit your .htaccess file (depending on your set-up) ● Be aggressive, be, be aggressive! *Source
  13. 13. Do you really need that many images? ● Yes. (or maybe not)
  14. 14. GOOD. Couture-quality.
  15. 15. Resize our images. ● Need to have different sizes of our images ● CMS will often provide options for different image dimensions
  16. 16. Image sizes. ● kitten-large.jpg (1024 x 768) ● kitten-medium.jpg (640 x 480) ● kitten-small.jpg (320 x 240)
  17. 17. Some new friends. ● srcset (new attribute for img) ● sizes (new attribute for img) ● picture (new element)
  18. 18. Browser support - srcset ● So much can change in a year ● IE and Opera Mini are still a problem, but we’ll address that in a bit 2015 2016
  19. 19. srcset ● Attribute that is added to the img element ● Allows us to add comma-separated list of images with info about their dimensions ● Possible to specify width of image in relation to the browser window or pixel density Pixel density Width
  20. 20. sizes ● sizes="(min-width: 769px) 25vw, 100vw" ● Translates to "If the viewport is wider than 769px, then this image will take up a quarter of the viewport. Otherwise, it will take up the full-width (100%) of the viewport."
  21. 21. Browser support - picture ● We’re getting there! ● Greater control over which image is displayed, but less popular 2015 2016
  22. 22. picture ● Wraps around the img element ● Append classes to img element (or figure) ● Allows for progressive enhancement - eg. if webp is supported, use it instead
  23. 23. Art direction. ● kitten-large.jpg (1024 x 768) ● kitten-medium.jpg (640 x 480) ● kitten-small.jpg (320 x 240)
  24. 24. CHEAP. (results may vary)
  25. 25. Time = money. ● Automate tasks ● Use small amount of JS to make life easier ● Cross-browser support
  26. 26. Automate resizing. ● User-uploaded images resized on the fly http://adaptive-images.com/ or http: //squeezr.it/ ● Task runners to automate your image- resizing: https://github. com/andismith/grunt-responsive-images, https://github.com/mahnunchik/gulp- responsive
  27. 27. IE/ Opera Mini ● First… huzzah for Edge!! Totally supports srcset, sizes and picture ● Alas, IE11 and below/ Opera mini ● Picturefill to the rescue! ● https://github.com/scottjehl/picturefill ● We’ll get there eventually.
  28. 28. Responsive images with a little help from JavaScript. ● https://github.com/kvendrik/responsive- images.js ● https://github.com/wentin/ResponsifyJS/ ● http://www.imgix.com/imgix-js ($$$) ● https://github.com/scottjehl/picturefill
  29. 29. LazySizes ● https://github.com/aFarkas/lazysizes ● Combines cross-browser support of srcset and sizes with lazy loading ● Have to use polyfill for IE (https://github. com/aFarkas/lazysizes/tree/gh- pages/plugins/respimg)
  30. 30. Final thoughts. ● Educate client on side-effects of large images ● Don’t let yourself be constrained to text only! ● Start using srcset, sizes and picture today - the more they are used, the quicker browsers will implement the desired functionality ● Fast, good and cheap.
  31. 31. More Rescources. ● Lynda.com Responsive Images ● Responsive images 101 ● Picture Element ● Responsive Images overview ● Importance of page speed
  32. 32. Thanks for listening! Anne Thomas @AlfalfaAnne Out of the Sandbox

×