An img is worth a thousand words
-
Upload
eitan-peer -
Category
Technology
-
view
262 -
download
2
Transcript of An img is worth a thousand words
An <img> is worth a 1000 wordsFebruary [email protected]
Images weight
Source: httparchive.org
But wait, there’s more
Source: httparchive.org
Why is the image transfer size increasing?
2004Apple Cinema HD Display
30”
2560x1600 pixels
101.6 pixel density (PPI)
Then and now
2017Apple iPhone 6 Plus & 7 Plus
5.5”
1080x1920 pixels
401 pixel density
Scaling screen resolutions
The higher the pixel density, the more pixels an image needs in order to look good
So we can simply create higher quality images, right?
The range of screen sizes is getting wider
What’s going on?
Screen density is on the rise
High variance in screen sizes and DPR
How do we cater these needs?
What we did in 67
<img src="max-resolution.jpg" style="max-width: 100%">
Waste not, want not
Viewport width Wasted image bytes
1920px 42%
760px 53%
360px 72%
https://timkadlec.com/2013/06/why-we-need-responsive-images/
The cost of waste
33% of the average web page size are wasted image bytes!
Responsive images
Tools of the trade
The srcset and sizes attributes
The <picture> element
HTTP Client Hints header
http://usecases.responsiveimages.org/#proposed-solutions
Enhancing <img>
HTML5 spec introduced 2 new <img> attributes
● srcset
● sizes
Srcset & sizes
The srcset attribute provides a list of possible image sources and the width or pixel density of each image file.
The sizes attribute specify the intended display size of the image.
Srcset & sizes
<img sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
srcset="low-res.jpg 320w, medium-res.jpg 480w, hi-res.jpg 800w" src="hi-res.jpg" alt="a11y">
Image file width in pixels
Size allocated for the image per viewport
Fallback for older browsers
Choosing the right image
The browser chooses the image to render!
if a supporting browser with a viewport width of 480px loads the page, the (max-width: 480px) media condition will be true, therefore the 440px slot will be chosen, so the medium-res.jpg will be loaded, as its inherent width (480w) is the closest to 440px.
Demo
<picture>
The <picture> element is a container used to specify multiple <source> elements for a specific <img> contained in it.
It provides fine-grained control through media queries for choosing the applicable source or the image type to use.
<picture> & media
<picture> <source srcset="cloudinary-logo-wide.png" media="(min-width: 600px)"> <img src="cloudinary-logo-narrow.png" alt="Cloudinary"></picture>
Media attribute is a directive, not a suggestion
<picture> & type
<picture> <source srcset="cloudinary-logo.svg" type="image/svg+xml"> <source srcset="cloudinary-logo.svg" type="image/webp"> <img src="cloudinary-logo.png" alt="Cloudinary"></picture>
The type attribute allows you to declare different image types that the browser can choose from.
Demo
<img> or <picture>?
Use <picture> when you need explicit control for art direction
Otherwise use <img> with srcset and sizes.
Client hints
<meta http-equiv="Accept-CH"
content="DPR, Viewport-Width, Width">
Experimental draft, supported by Chrome and Operahttp://httpwg.org/http-extensions/client-hints.html
Yikes!
Cloudinary
Features
Cloudinary offers an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation and delivery.
Let’s focus on how it helps with responsive images
Cloudinary
<img srcset="https://res.cloudinary.com/demo/w_425/car_lady_dog.jpg 425w, https://res.cloudinary.com/demo/w_992/car_lady_dog.jpg 992w, https://res.cloudinary.com/demo/w_1984/car_lady_dog.jpg 1984w"
sizes="(max-width: 500px) 425px, (max-width: 800px) 750px, 100vw"src="https://res.cloudinary.com/demo/w_1984/car_lady_dog.jpg"
</img>
Demo
Cloudinary
<cl-image public-id="car_lady_dog.jpg" cloud-name="demo" responsive>
</cl-image>
https://plnkr.co/edit/Tvrwxt2AW8K5DEhuTKhB?p=preview
Demo
Cloudinary Angular SDK
Blog - https://goo.gl/oQFwua
Github - https://github.com/cloudinary/cloudinary_angular/tree/angular_next
●Use srcset and sizes attributes for responsive images○ Let the browser do the heavy lifting
○ Breakpoint by file size
●Use <picture> for art-direction
●An image service can take away the pain
●https://github.com/eitanp461/angular-meetup
Summary