A presentation at Cloudinary's Customers Dinner in in London, UK by Nicolas Hoizey
How Cloudinary eases Responsive Web Design …and more Nicolas Hoizey London, October 18th
service agency covering the entire digital production chain
founder and CTO of Clever Age Web projects facilitator RWD and WPO expert Amateur photographer
Let’s talk about Responsive Images
Responsive Images are fluid …
" image.jpg "
width : 100% ; height : auto ; } !
image.jpg "
width : 100% ; height : auto ; } "
You must send different images to each device
Most of the time, you only need several sizes of the same image
Here comes the new responsive images standard!
Beau Soleil Bann er Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Menu Menu Menu Menu Menu Beau Soleil Banner Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu BS Bann er Lorem ipsum dolor sit amet , consectetur adipiscing elit . Lorem ipsum dolor sit amet, consectetur adipiscing elit. For a full width banner
large.jpg 1600w"
1080px Available images: 320, 800, 1200 , 1600 !
Viewport width: 2560 px Screen density: 2 Ideal width = 2560 * 2 = 5120px "
Viewport width: 1200 px Screen density: 2 Ideal width = 1200 * 2 = 2400px
Beau Soleil Bann er Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Menu Menu Menu Menu Menu Beau Soleil Banner Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu BS Bann er Lorem ipsum dolor sit amet , consectetur adipiscing elit . Lorem ipsum dolor sit amet, consectetur adipiscing elit. For a variable width thumbnail 480px 800px full width one half one third
width : 800px) 50vw, 33vw"
Viewport = 1200px CSS size = 33vw ≈
400px Viewport width: 1200 px Screen density: 2 Beau Soleil Bann er Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Me n u Me n u Me n u Me n u Me n u Beau Soleil Banner Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Lorem ipsum dolor sit amet, consectet adipiscing elit. Menu Menu Menu Menu Menu BS Bann er Lor em ipsum dol or sit am et , consectetur adipiscing el i t . Lorem ipsum dolor sit amet, consectetur adipiscing elit.
800px Available images: 320, 800 , 1200 ! Viewport width: 1200 px Screen density: 2
Most of the time, it will be enough !
But how do we get all these images on the server?
Option #1: Do it yourself
You upload the master on your server
Server computes and stores all sizes Master 320 800 1200
Browsers ask the server for specific sizes of the image 320 1200
bandwidth
Option #2:
Upload the master on Cloudinary
Or just ask Cloudinary to fetch it
Cloudinary creates on the fly the sizes the browsers ask for 320 1200
Cloudinary URL API access point = https:// res.cloudinary.com /< account
/image/ upload /
Your image name: master.jpg The final image URL: / w_320 / master.jpg creates a 320px wide image, keeping the aspect ratio
" / w_320 / master.jpg 320w, / w_800 / master.jpg 800w, / w_1200 / master.jpg 1200w"
$
less bandwidth
But sometimes , you need Art Direction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Art Direction BS Bann er Landscape Lorem ipsum dolor sit amet , consectetur Lorem ipsum dolor Beau Soleil Banner Menu Menu Menu Menu Menu Landscape Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Lorem ipsum dolor Beau Soleil Bann er Menu Menu Menu Menu Menu Portrait Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio dui, varius ac enim quis, accumsan porta nulla. Sed laoreet nibh sit amet lobortis porta. Donec sagittis est a tortor varius consectetur. Praesent sit amet sollicitudin mauris, non bibendum ante. Integer imperdiet in magna ac elementum. Sed arcu nibh, mattis ac tortor ultricies, consequat varius odio. Morbi at nunc at dolor auctor imperdiet in sit amet tortor.
The HTML: < picture
"… "
"…"
</ picture
You probably don’t want to upload two masters every time
Automate with Cloudinary /w_320/ portrait.jpg / c_fill ,w_320,h_450/…
Automate with Cloudinary % /w_320/ portrait.jpg / c_fill ,w_320,h_450/ landscape.jpg
Much better , still with Cloudinary /w_320/ portrait.jpg / c_fill ,w_320,h_450, g_face / landscape.jpg
Much better , still with Cloudinary /w_320/ portrait.jpg / c_fill ,w_320,h_450, g_face / landscape.jpg $
You also want to optimize performance
Send the lighter image format image.JPEG : 96KB image.WebP : 27KB Firefox Chrome
The HTML: < picture
"…"
"…"
</ picture
The original JPEG image URL: /w_320/ master.jpg The WebP image URL: / w_320 ,f_webp / master.jpg The image is now WebP
Or…
The original JPEG image URL: /w_320/ master.jpg The better image URL: /w_320 ,f_auto / master.jpg The image is now in the best ( lighter ) format for the browser!
" / w_320,f_auto / master.jpg 320w, / w_800,f_auto / master.jpg 800w, / w_1200,f_auto / master.jpg 1200w"
$
Using Cloudinary with
Jekyll is one of the oldest and most popular static site generators . It takes content written in Markdown format, and uses Liquid templates to generate HTML pages.
"alternative text"
cloudinary /
cloudinary plugin: {% cloudinary <preset> image.jpg alt="…" %} Generates responsive image HTML with < img
The layout with the sizes attribute
One last thing …
Cloudinary is not limited to responsive images It also allows multiple image manipulations. I use it to generate my opengraph images, for better sharing on social networks.
This post
Automatically gets this opengraph image
And here’s the post in Facebook
hoizey.com /asse ts /logos/ cloudinary.png &
age.com @ nhoizey ✉
Thoughts on Responsive Images, the Cloudinary plugin for Jekyll, and more!
From the registration page: "Please join us for a fabulous networking dinner and drinks! You will also get a chance to hear from Nicolas Hoizey web facilitator extraordinaire, Amit Sharon VP Customer Success and a shared use case from one of our very own Cloudinary customers!"
The following resources were mentioned during the presentation or are useful additional information.
jekyll-cloudinary is a Jekyll plugin adding a Liquid tag to ease the use of Cloudinary for responsive images in your Markdown/Kramdown posts.
Here’s what was said about this presentation on Twitter.
Really interesting tips on building high performance websites at @cloudinary event in London ! pic.twitter.com/L0TxXkqHop
— Grant Kemp (@ukdatageek) October 18, 2017
Nicolas Hoizey our co-founder is at the cloudinary's customers dinner to present and talk about reponsive images.#cloudinary pic.twitter.com/T5HKOGeo9f
— Clever Age (@CleverAge) October 18, 2017