$30 off During Our Annual Pro Sale. View details »

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. Automating Responsive Images in HTML

  2. Linda Ikechukwu @_MsLinda

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

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

    the web with devices of different screen sizes, resolutions and capabilities.
  5. Responsive Images Dimension Switching Art Direction

  6. Imagine resizing this image to fit a mobile screen, the

    child which is our focus will be almost non-existent.
  7. The Solution ? 1. “srcset”+ “sizes” 2. <picture> + <source>

  8. srcset = “url imagesize, url imagesize” sizes = “(media condition)

    layout size”
  9. 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” >
  10. Dog looses its focus when just scaled down. Art direction

    to the rescue,
  11. <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>
  12. None
  13. Another Challenge ! Manually creating and editing the images

  14. The Solution ? Cloudinary’s Responsive Image Breakpoint Generator. https://www.responsivebreakpoints.com/

  15. 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
  16. None
  17. None
  18. None
  19. Yet Another Challenge !! Manually doing that for all the

    numerous images on our site and downloading ….
  20. Yet Another Solution! Cloudinary again

  21. 1. Sign up for a free account on cloudinary.com

  22. 2. Upload all images.

  23. Dynamic Image Transformation URL’S (Perfect for art direction) Case 1:

  24. https://res.cloudinary.com/<cloud_name>/i mage/upload/<transformations>/<version>/< public_id>.<format> A Typical Cloudinary Image URL

  25. https://res.cloudinary.com/linda dxk/image/upload/c_scale,w_501/v 1579492625/obama_kqbid4.jpg

  26. 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
  27. None
  28. None
  29. 3. Copy uploaded image url, apply desired transformation parameters or

    use the edit option.
  30. None
  31. None
  32. 4. Include resulting url’s into code

  33. <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>
  34. None
  35. Dynamic Image Resizing using Cloudinary’s JavaScript Library. (Perfect for dimension

    switching) Case 2:
  36. 3. Add cloudinary library to html <script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-c ore/2.3.0/cloudinary-core-shrinkwrap.min.js"> </script>

  37. 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" >
  38. 5. Initialize the script in Js and call it //

    Initialize var cl = cloudinary.Cloudinary.new({ cloud_name: 'lindadxk' }); // Call cl.responsive();
  39. None
  40. None
  41. PictureFill https://scottjehl.github.io/picturefill/ Is there a Polyfill?

  42. https://cloudinary.com/docu mentation/image_transform ation_reference Important Links https://cloudinary.com/docu mentation/image_transform ations

  43. THE END