1.0Cloudinary Bloghttps://cloudinary.com/blogImage Optimization with Cloudinaryrich600338<blockquote class="wp-embedded-content" data-secret="IQlKqHFRtF"><a href="https://cloudinary.com/blog/guest_post/image-optimization-with-cloudinary/">Image Optimization with Cloudinary</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://cloudinary.com/blog/guest_post/image-optimization-with-cloudinary/embed#?secret=IQlKqHFRtF" width="600" height="338" title="“Image Optimization with Cloudinary” — Cloudinary Blog" data-secret="IQlKqHFRtF" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript">
/* <![CDATA[ */
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
/* ]]> */
</script>
https://res.cloudinary.com/cloudinary-marketing/images/v1681926089/Web_Assets/blog/ea3d89cb34fd09734cb154f171b7b737ac0635bc-1280x720-1_27857cb41e/ea3d89cb34fd09734cb154f171b7b737ac0635bc-1280x720-1_27857cb41e-png?_i=AA1280720In this article, we'll look at how to optimize images for various screen sizes using the srcSet and sizes HTML attributes by building a simple photo album application with React. We will also take advantage of Cloudinary's URL transformation feature to automatically generate images of different sizes without duplicating or modifying the images for each screen size.https://cloudinary.com/blog/author/ifeoma-imohIfeoma Imoh