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.

Transcript

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>
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
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
29. 3. Copy uploaded image url, apply desired transformation parameters or use the edit option.
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>
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();
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