Slide 1
Slide 1 text
Automating
Responsive Images
in HTML
Slide 2
Slide 2 text
Linda Ikechukwu
@_MsLinda
Slide 3
Slide 3 text
Responsive images adapts (visually
and dimensionally) and retains
their quality on varying devices
without having an unpleasant
impact on performance.
Slide 4
Slide 4 text
The Challenge ?
Technology has evolved. People view
and access the web with devices of
different screen sizes, resolutions
and capabilities.
Slide 5
Slide 5 text
Responsive Images
Dimension Switching Art Direction
Slide 6
Slide 6 text
Imagine resizing this image to
fit a mobile screen, the child
which is our focus will be
almost non-existent.
Slide 7
Slide 7 text
The Solution ?
1. “srcset”+ “sizes”
2. +
Slide 8
Slide 8 text
srcset = “url imagesize, url imagesize”
sizes = “(media condition) layout size”
Slide 9
Slide 9 text
Putting it all together !
Slide 10
Slide 10 text
Dog looses its focus
when just scaled
down. Art direction
to the rescue,
Slide 11
Slide 11 text
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Another Challenge !
Manually creating and editing
the images
Slide 14
Slide 14 text
The Solution ?
Cloudinary’s Responsive Image
Breakpoint Generator.
https://www.responsivebreakpoints.com/
Slide 15
Slide 15 text
1. Go to responsivebreakpoints.com
2. Upload your image
3. Adjust settings
4. Download images and copy code
5. Include in your project and voila
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Yet Another Challenge !!
Manually doing that for all the numerous
images on our site and downloading ….
Slide 20
Slide 20 text
Yet Another Solution!
Cloudinary again
Slide 21
Slide 21 text
1. Sign up for a free account on
cloudinary.com
Slide 22
Slide 22 text
2. Upload all images.
Slide 23
Slide 23 text
Dynamic Image Transformation URL’S
(Perfect for art direction)
Case 1:
Slide 24
Slide 24 text
https://res.cloudinary.com//i
mage/upload///<
public_id>.
A Typical Cloudinary Image URL
Slide 25
Slide 25 text
https://res.cloudinary.com/linda
dxk/image/upload/c_scale,w_501/v
1579492625/obama_kqbid4.jpg
Slide 26
Slide 26 text
Syntax : Parameter_value
1. w for width; (w_150 , w_0.5)
2. c for crop; (c_crop, c_fill, c_thumb)
3. g for gravity; (g_auto, g_face, g_faces, g_auto:dog)
Cloudinary Transformations
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
3. Copy uploaded image url, apply
desired transformation parameters or
use the edit option.
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
4. Include resulting url’s into code
Slide 33
Slide 33 text
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Dynamic Image Resizing using
Cloudinary’s JavaScript Library.
(Perfect for dimension switching)
Case 2:
Slide 36
Slide 36 text
3. Add cloudinary library to html
Slide 37
Slide 37 text
4. Copy image url and set img parameters
![Tower of paris]()
Slide 38
Slide 38 text
5. Initialize the script in Js and call it
// Initialize
var cl = cloudinary.Cloudinary.new({ cloud_name:
'lindadxk' });
// Call
cl.responsive();
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
PictureFill
https://scottjehl.github.io/picturefill/
Is there a Polyfill?
Slide 42
Slide 42 text
https://cloudinary.com/docu
mentation/image_transform
ation_reference
Important Links
https://cloudinary.com/docu
mentation/image_transform
ations
Slide 43
Slide 43 text
THE END