Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Breaking down Responsive design in Cloudinary

Breaking down Responsive design in Cloudinary

A talk on responsive design at the unStack GitHub Watch Party at Techpoint.africa

Shodipo Ayomide

December 16, 2019
Tweet

More Decks by Shodipo Ayomide

Other Decks in Technology

Transcript

  1. Beau Soleil Banner Lorem ipsum dolor sit Lorem ipsum dolor

    sit Lorem ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Menu Menu Menu Menu Menu Beau Soleil Banner Lorem ipsum dolor Lorem ipsum dolor sit amet, consectet sit amet, consectet adipiscing elit. adipiscing elit. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectet sit amet, consectet adipiscing elit. adipiscing elit. Menu Menu Menu Menu Menu BS Banner Lorem ipsum dolor sit amet, consectetur adipiscing elit. For a full width banner
  2. Viewport width: 360px Screen density: 3 Ideal image width =

    viewport * density = 360 * 3 = 1080px Available images: 320, 800, 1200, 1600
  3. Banner Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem

    ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Menu Menu Menu Menu Menu Beau Soleil Beau Soleil Banner Lorem ipsum dolor Lorem ipsum dolor sit amet, consectet sit amet, consectet adipiscing elit. adipiscing elit. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectet sit amet, consectet adipiscing elit. adipiscing elit. Menu Menu Menu Menu Menu BS Banner Lorem ipsum dolor sit amet, consectetur adipiscing elit. For a variable width thumbnail 480px 800px full width one half one third
  4. The HTML: <img src="fallback.jpg" srcset="small.jpg 320w, medium.jpg 800w, large.jpg 1200w"

    sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 33vw">
  5. Viewport = 1200px CSS size = 33vw ≈ Viewport width:

    1200px Screen density: 2 Beau Soleil Banner Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur adipiscing elit. adipiscing elit. adipiscing elit. Menu Menu Menu Menu Menu Beau Soleil Banner Lorem ipsum dolor Lorem ipsum dolor sit amet, consectet sit amet, consectet adipiscing elit. adipiscing elit. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectet sit amet, consectet adipiscing elit. adipiscing elit. Menu Menu Menu Menu Menu BS Banner Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  6. Ideal image width = CSS size * density = 400

    * 2 = 800px Available images: 320, 800, 1200 Viewport width: 1200px Screen density: 2
  7. Your image name: master.jpg The final image URL: /<transformations>/master.jp g

    = Cloudinary URL API access point = https://res.cloudinary.com/<account>/image/upload/
  8. You need: -the master image -a Cloudinary account -no local

    image processing -less computing power -less storage capacity -less bandwidth
  9. 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!
  10. The HTML: /w_600,f_auto/master.jpg " <img src=" sizes="…" srcset=" /w_320,f_auto/master.jpg 320w,

    /w_800,f_auto/master.jpg 800w, /w_1200,f_auto/master.jpg 1200w">
  11. 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.
  12. Default way to add an image: ![alternative text](image.jpg) Generates standard

    image HTML: <img src="image.jpg" alt="alternative text">
  13. An image with the jekyll-cloudinary plugin: {% cloudinary <preset> image.jpg

    alt="…" %} Generates responsive image HTML with <img> and srcset. You just have to define presets for: - The minimum and maximum widths - The number of sizes to generate - The layout with the sizes attribute
  14. Cloudinary is not limited to responsive images It also allows

    multiple image manipulations. I use it to generate my open graph images, for better sharing on social networks.
  15. Thank you! Follow cloudinary on Twitter @cloudinary Follow me on

    Twitter @developerayo and GitHub @developerayo Questions?