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

Automating Responsive Images In HTML

Automating Responsive Images In HTML

The Web has gone from the era of just text to 60% images.
With more images comes a problem - How to make sure they remain responsive and performant in accordance with the user's device.
One way would be to manually resize and optimize these images with some tools then load them. For this, I'll introduce the picture and source Html elements.
What then happens when we have so many images? Using the previous method would be tiring. I'll introduce how to use Cloudinary to automate responsive images.

Linda Ikechukwu

February 22, 2020

More Decks by Linda Ikechukwu

Other Decks in Technology


  1. Responsive images adapts (visually and dimensionally) and retains their quality

    on varying devices without having an unpleasant impact on performance.
  2. The Challenge ? Technology has evolved. People view and access

    the web with devices of different screen sizes, resolutions and capabilities.
  3. Imagine resizing this image to fit a mobile screen, the

    child which is our focus will be almost non-existent.
  4. Putting it all together ! <img srcset =”largeimage.jpg 1024w, mediumimage.jpg

    512w, smallimage.jpg 256w” sizes =”(min-width: 700px) 700px, 90vw” src =”default-image-url.jpg” >
  5. <picture> <source srcset= ”dog-mobile.png” sizes=”100vw”> <source media=”(min-width: 700px)” srcset= ”

    dog-tablet-portrait.png” sizes=”100vw”> <source media=”(min-width: 1000px)” srcset= ” dog-tablet-landscape.png”sizes=”90vw”> <source media=”(min-width: 1400px)” srcset= ” dog-desktop.png” sizes=”90vw”> <img src=”dog-fallback.png” alt=”Cute grey dog”> </picture>
  6. 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
  7. Yet Another Challenge !! Manually doing that for all the

    numerous images on our site and downloading ….
  8. 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
  9. <picture> <source media="(max-width:500px)" srcset = "https://res.cloudinary.com/lindadxk/image/upload/c_crop,g_face:center,h_250,w_300/v15 79492625/obama_kqbid4.jpg" sizes="95vw"> <source media="(max-width:900px)"

    srcset = "https://res.cloudinary.com/lindadxk/image/upload/c_crop,g_face:center,h_300,w_400/v15 79492625/obama_kqbid4.jpg" sizes="90vw"> <source srcset = "https://res.cloudinary.com/lindadxk/image/upload/v1579492625/obama_kqbid4.jpg" sizes="80vw"> <img src="https://res.cloudinary.com/lindadxk/image/upload/v1579492625/obama_kqbid4.jpg" alt = "President Obama"> </picture>
  10. 4. Copy image url and set img parameters <img data-src="https://res.cloudinary.com/lindadxk/image/upload/w_

    auto,c_scale/v1501761946/petals-photo-457044_etqwsd.jpg" alt="Tower of paris" class="cld-responsive" >
  11. 5. Initialize the script in Js and call it //

    Initialize var cl = cloudinary.Cloudinary.new({ cloud_name: 'lindadxk' }); // Call cl.responsive();