An <img> is worth a 1000 wordsFebruary 2017eitan.peer@cloudinary.com

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