responsive images under control

R E S P O N S I V E I M A G E S

U N D E R C O N T R O L

@ c h u m i l l a s # d r u p a l m o u n t a i n c a m p

C R I S T I N A C H U M I L L A SD E S I G N E R & D R U P A L F R O N T E N D

@chumil lasckr ina

T H E B A S I C S

R E S P O N S I V E I M A G E S I N D R U P A L

A R T D I R E C T I O N

L A Z Y L O A D I N G

R E S P O N S I V E I M A G E S


P A G E W E I G H TA V E R A G E

2016

2015

2014

2,26Mb

1,95Mb

2,48Mb

+16%

+15%

+10%


6 1 %web traf f ic

A S Y N C H R O N O U Srequest

T O O B I Gfor the de vice

F A C T S


D E L I V E R T H E

H I G H E S T Q U A L I T Y I M A G E S U P P O R T E D

A N D N O T H I N G M O R E .

T H E B A S I C S

Variables known by: AUTHORwhen she’s writing the code?

BROWSERwhen it’s loading the page?

viewport dimensions x YES

image size relative to the viewport YES YES via sizes!

screen density x YES

source files’ dimensions YES YES via srcset!

SOURCE https://ericportis.com/posts/2014/srcset-sizes

S C A L E D I M A G E

https://ericportis.com/posts/2014/srcset-sizes

srcset=“large.jpg 1440w, medium.jpg 960w, small.jpg 480w”

sizes=“(min-width: 36em) 33.3vw, src=“medium.jpg”

alt=“A road”>

100vw”

<img



W I D T H I N P I X E L Sw

(1440px)(960px)(480px)

<img

sizes=“(min-width: 36em) 33.3vw,100vw”

image { width: 100vw; } @media (min-width: 36em) { width: 33.3vw; }


<img

C S S M E D I A Q U E R I E Ssizes



alt=“A road”>

100vw”

<img


S C A L E D I M A G E S

<source srcset=“image-small.jpg 1x, image-small2x.jpg 2x”

<img src=“image-big.jpg 180w” />

media=“(min-width: 0px) and(max-width: 29.99em)”>

<source srcset=“image-big.jpg 1x,

media=”(min-width: 30em)”>

image-big2x.jpg 2x”

</picture>

sizes=”(min-width: 30em) 33vw”>

<picture>


P I C T U R EB R O W S E R S U P P O R T

Same for srcret and sizes


P I C T U R E F I L LB R O W S E R S U P P O R T

A R E S P O N S I V E I M A G E P O L Y F I L L

http://scottjehl.github.io/picturefill/

D R U P A LR E S P O N S I V E I M A G E S I N


R E S P O N S I V E I M A G E S ( P i c t u r e )

B R E A K P O I N T

Image,File,Field

M O D U L E S


Import/create

breakpoints

Create Image styles

Create Responsive

Images

Apply Responsive

Images

1 2 3 4

P R O C E S S


@media all and (min-width:851px) {/*CSS*/}

1B R E A K P O I N T S

W H A T A R E


1W H E R E

T H E M E S M O D U L E S

B R E A K P O I N T S

I M A G E S T Y L E S

By @marcdrummond https://www.youtube.com/watch?v=3BF5WE_NOIU

P L A N

385px

480px+25%

+25%300px385px480px

240px

300px+25%

300px480px385px

240px+25%

240px

385px480px

2

https://www.youtube.com/watch?v=3BF5WE_NOIU


Import/create

breakpoints

Create Image styles

Apply Responsive

Images

1 2

3

4

3

SCALED IMG

PICTURE

R E S P O N S I V E I M A G E SC R E A T E 3




alt=“A road”>

100vw”

<img


https://vimeo.com/204517230




<img src=“image-big.jpg 180w” />

<source srcset=“image-big.jpg 1x,

media=”(min-width: 30em)”>

image-big2x.jpg 2x”

</picture>

sizes=”(min-width: 30em) 33vw”>

<picture>



A R T D I R E C T I O NR E S P O N S I V E I M A G E S

https://www.drupal.org/project/crop

https://www.drupal.org/project/crop


I M A G E W I D G E T C R O P

https://www.drupal.org/project/image_widget_crop

F U L L C O N T R O L


F U L L C O N T R O L

L O N G I M P L E M E N T A T I O N

G I V E S

R E Q U I R E S


https://www.drupal.org/project/focal_point

F O C A L P O I N TA U T O M A T E D


B A S I C A R T D I R E C T I O N

L O W E F F O R T

G I V E S

R E Q U I R E S

( R E A L L Y )

L A Z Y L O A D I N G


https://www.drupal.org/project/lazyloader

I M A G E L A Z Y L O A D E R

https://www.drupal.org/project/lazyloader


video




• Plan your Responsive Images before implementing.

• Use Focal Point if you don’t need full control.

• Remember Lazyloading at home and lists.

C O N C L U S I O N S

T H A N K S !@ c h u m i l l a s

Q U E S T I O N S

responsive images under control

Internet