{"id":22348,"date":"2021-05-17T13:20:08","date_gmt":"2021-05-17T20:20:08","guid":{"rendered":"http:\/\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021"},"modified":"2024-06-03T12:41:10","modified_gmt":"2024-06-03T19:41:10","slug":"faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","title":{"rendered":"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><strong>tl;dr;<\/strong><\/p>\n<p>Cloudinary conducted a workshop at <a href=\"https:\/\/remote.reactsummit.com\/workshops-3h\">React Summit 2021<\/a> to highlight the effect of media performance on websites by correlating it with Google\u2019s Core Web Vitals and other performance measurements. Also presented were typical optimization techniques along with code samples. Here are the <a href=\"https:\/\/gitnation.zoom.us\/rec\/play\/xHsmXbYv4X5S8K-XzLC6YLoXnTI6LqArtjVqd7pah3nO5UzeGnfLkvIw9Gs8h3tA1Ir_mugjYQfqBw6L.pd34fmMLuSq8eOQN?continueMode=true&amp;_x_zm_rtaid=JxAg5HB2SCeWYsmcMsv_jg.1619024494161.7437cf9f33fe78b274723d664712d862&amp;_x_zm_rhtaid=445\">recording<\/a> and the <a href=\"https:\/\/docs.google.com\/presentation\/d\/1hWtRyLJMHfTqv1TYtYnU6P02VNIXf-Lmz2zlO8Rhzn0\/edit?usp=sharing\">slides<\/a>.<\/p>\n<hr \/>\n<p><a href=\"https:\/\/cloudinary.com\/blog\/react_summit_recap_web_performance_media_optimization_and_core_web_vitals\">React Summit<\/a> \u201cis an annual conference on all things React, gathering thousands of front-end and full-stack engineers from around the world.\u201d This year, <a href=\"https:\/\/cloudinary.com\/blog\/author\/marissa_masangcay\">Marissa<\/a>, <a href=\"https:\/\/www.linkedin.com\/in\/pramodshenoy7\/\">Pramod<\/a>, and I presented at <a href=\"https:\/\/reactsummit.com\/\">React Summit<\/a> on behalf of Cloudinary. Our goal was to build on the foundation that media can help drive engagement and conversions on websites and that, if not optimized, media often causes poor user experience and hurts business revenue. Given that I\u2019d already introduced this concept in my Smashing Magazine article <a href=\"https:\/\/www.smashingmagazine.com\/2021\/03\/boost-media-performance\/\"><em>How To Boost Media Performance On A Budget<\/em><\/a>, our workshop focused on showcasing practical optimization steps through the <a href=\"https:\/\/cloudinary.com\/documentation\/react_integration\">React SDK<\/a>.<\/p>\n<p>Below are four of the common themes we addressed. Read on for the background and the solutions.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/fast_media_four_themes.png\" alt=\"Four themes\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"932\"\/><\/p>\n<h2>Why Optimize?<\/h2>\n<p>The primary focus of developers is on building and delivering functionalities according to the project schedule. In many cases, media optimization takes a back seat in the face of other priorities. Yet, media is increasingly contributing to the overall performance metrics that are being <a href=\"https:\/\/www.searchenginejournal.com\/google-core-web-vitals-ranking-signals\/387142\/\">used as a ranking factor<\/a> for search results. In particular, Google\u2019s new <a href=\"https:\/\/cloudinary.com\/podcasts\/how-googles-core-web-vitals-affect-seo-and-visitor-traffic\">Core Web Vitals<\/a> (CWVs) comprise three performance metrics:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/web.dev\/lcp\/\">Largest Contentful Paint (LCP)<\/a> measures loading performance.<\/li>\n<li>\n<a href=\"https:\/\/web.dev\/fid\/\">First Input Delay (FID)<\/a> measures interactivity.<\/li>\n<li>\n<a href=\"https:\/\/web.dev\/cls\/\">Cumulative Layout Stability (CLS)<\/a> measures visual stability.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/cwv-fast-media.png\" alt=\"CWV\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"932\"\/><\/p>\n<p>On most media-heavy sites like e-commerce, news articles, and blog posts, LCP might be the hero image or even a video. For example, in <a href=\"https:\/\/www.webpagetest.org\/lighthouse.php?test=210426_AiDcK7_37ca7776c147f0b216d9c14e924892ed&amp;run=1\">this test<\/a> for the e-commerce site <a href=\"https:\/\/www.renttherunway.com\/\">Rent the Runway<\/a>, the LCP is a video:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;video class=&quot;rent-my-style__video&quot; id=&quot;rent-my-style__video&quot; preload=&quot;auto&quot; loop=&quot;&quot; autoplay=&quot;&quot; poster=&quot;https:\/\/cdn.rtrcdn.com\/assets\/imgs\/031721_HP_hero.jpg&quot;&gt;\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/031721_HP_hero.jpg\" alt=\"Woman dress\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"648\"\/>\n<a href=\"https:\/\/cdn.rtrcdn.com\/assets\/imgs\/031721_HP_hero.jpg\"><em>Source<\/em><\/a><\/p>\n<p>If the poster image or video is suboptimal, the page would be slow to load, resulting in a janky user experience and a lower Google Lighthouse score. Similarly, when combined with an HTML layout that misses the aspect ratio for images, suboptimal images could cause shifts\u2014a phenomenon that frustrates users in addition to lowering the Lighthouse score.<\/p>\n<p>Thus, not only is media optimization important, but it\u2019s also an integral part of the development and build process. That was a key point highlighted at our workshop.<\/p>\n<h2>What and How to Optimize?<\/h2>\n<p>Optimization of media can be broadly classified into three main categories: format, quality, and size.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/format-quality-size.png\" alt=\"format, quality, and size\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"757\"\/><\/p>\n<h3>Format<\/h3>\n<p>Lara Hogan, formerly an engineering manager at Etsy, authored an excellent article in March 2015 titled <a href=\"https:\/\/speakerdeck.com\/lara\/image-formats-the-nerdy-parts\"><em>Image Formats (The Nerdy Parts)<\/em><\/a> with details of the various image formats and their common usage.<\/p>\n<p>Over the six years since then, newer formats like <a href=\"https:\/\/cloudinary.com\/blog\/how_to_adopt_avif_for_images_with_cloudinary\">AVIF<\/a> and <a href=\"https:\/\/cloudinary.com\/blog\/legacy_and_transition_creating_a_new_universal_image_codec\">JPEG-XL<\/a> have been introduced. With their tight schedules, developers are hard pressed to keep up with the changing landscape. Help is at hand, however: by leveraging Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/blog\/adaptive_browser_based_image_format_delivery\">automatic-format<\/a> (<code>f_auto<\/code>) mechanism for both images and <a href=\"https:\/\/cloudinary.com\/blog\/automatic_video_transcoding\">videos<\/a>, developers can offload to Cloudinary the task of determining the right format, saving bytes by an order of magnitude.<\/p>\n<h3>Quality<\/h3>\n<p>You can compress media resources by reducing their quality. For example, a general rule tools like WebPageTest apply is to lower the quality of a JPEG to 80. However, you can achieve higher compression levels by using perceptual metrics like <a href=\"https:\/\/cloudinary.com\/blog\/detecting_the_psychovisual_impact_of_compression_related_artifacts_using_ssimulacra\">SIMULACRA<\/a>, which identify the correct lossy-compression level so that humans cannot perceive the artifacts in the images or videos. With Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/blog\/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size\">automatic-quality<\/a> (<code>q_auto<\/code>) feature, you can ensure that your media is automatically and compressed just right for the most byte savings.<\/p>\n<p>By combining both <code>f_auto<\/code> and <code>q_auto<\/code>, you can deliver the perfectly compressed image or video in the format that best suits your end-user\u2019s device or browser.<\/p>\n<h3>Size<\/h3>\n<p>It\u2019s better to resize images or videos for the right dimension on the server side than to download them first and then resize them for display on the browser. You can display such dynamically generated images by using responsive elements like HTML5\u2019s image <code>srcset<\/code> attribute and  <code>&lt;picture&gt;<\/code> tag, as well as CSS media queries.<\/p>\n<p>You can resize media in multiple ways based on your use case, for example:<\/p>\n<ul>\n<li>For a standardized image size, say, on the category or product page of an e-commerce site, you could resize to a fixed dimension with the <code>w_<\/code> (width) and <code>h_<\/code> (height) parameters. Alternatively, you could set up <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/360018902952-Developing-and-Using-Named-Transformations-with-Cloudinary-Images-and-Videos\">named transformations<\/a>.<\/li>\n<li>For a responsive layout, you could implement <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images\">responsive images<\/a> by embedding URLs or with JavaScript.<\/li>\n<\/ul>\n<p>For more details, see <a href=\"https:\/\/cloudinary.com\/blog\/author\/eric_portis\">Eric Portis\u2019s<\/a> superb series on <a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_1_what_does_it_mean_for_an_image_to_be_responsive\">responsive images<\/a>, complete with insights on how to architect the right methodology.<\/p>\n<h3>Delivery<\/h3>\n<p>Finally, be sure to deliver media assets as fast as possible with the least amount of latency through a content delivery network (CDN). To achieve optimal efficiency, CDNs can cache content closer to the end-user\u2019s location and avoid repeated requests to your data center or cloud.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/cnd-yes-no.png\" alt=\"CDN\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"932\"\/><\/p>\n<p>With Cloudinary, you can quickly access resources for delivery through <a href=\"https:\/\/cloudinary.com\/blog\/introducing_multi_cdn_media_delivery_solutions_for_optimal_per_user_experience\">multi-CDNs<\/a>\u2014a tremendous convenience and time-saver.<\/p>\n<h2>Why Not Try It Out Yourself?<\/h2>\n<p>Our workshop covered many concepts along with a simple project that I\u2019d put together, which aggregates all the aspects of media optimization. Give the project a try yourself (see below).<\/p>\n<h3>Objective<\/h3>\n<p>Assume that you are the owner of an e-commerce store that sells T-shirts. However, the app, written in React, has media-optimization issues. To fix them, do the followingY:<\/p>\n<ol>\n<li>Take a baseline measurement of your site\u2019s performance and CWVs.<\/li>\n<li>Identify the areas for improvement.<\/li>\n<li>Implement a fix with <a href=\"https:\/\/cloudinary.com\/documentation\/react_integration\">Cloudinary\u2019s React SDK<\/a>.<\/li>\n<li>Measure the performance and gains in CWVs.<\/li>\n<\/ol>\n<h3>Code Samples<\/h3>\n<p>Here\u2019s the code:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/akshay-ranganath\/react-summit-baseline\">Baseline e-commerce store<\/a> in React<\/li>\n<li>\n<a href=\"https:\/\/cld-react-summit-baseline.netlify.app\/\">Application on Netlify<\/a>\n<\/li>\n<\/ul>\n<p>You could start by <a href=\"https:\/\/www.webpagetest.org\/result\/210413_AiDc49_72fd693b9e46e67f1e1392db9a366d7e\/\">measuring the baseline on WebPageTest<\/a> and enabling the Lighthouse score. Alternatively, jump ahead, as in this example:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/akshay-ranganath\/react-summit-optimized\">Optimized React app<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cld-react-summit-pm.netlify.app\/\">Application on Netlify<\/a>\n<\/li>\n<\/ul>\n<p>Here\u2019s the postoptimization measurement on <a href=\"https:\/\/www.webpagetest.org\/result\/210413_AiDcB0_955f321e4f2e48de954860c8926cf811\/2\/details\/#waterfall_view_step1\">WebPageTest<\/a>.<\/p>\n<p>This video shows the homepage loading before and after optimization:<\/p>\n<video controls=\"controls\" muted poster=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/video\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/react_comparison.jpg\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/video\/upload\/f_auto,q_auto\/Web_Assets\/blog\/react_comparison.mp4\">\n<\/video>\n<p><a href=\"https:\/\/www.webpagetest.org\/video\/compare.php?tests=210413_AiDcB0_955f321e4f2e48de954860c8926cf811-e:2.9,210413_AiDc49_72fd693b9e46e67f1e1392db9a366d7e-e:2.9\"><em>Source<\/em><\/a><\/p>\n<h2>What Do You Think?<\/h2>\n<p>Besides the techniques described above, we also discussed other optimization approaches offered by Cloudinary, e.g, <a href=\"https:\/\/cloudinary.com\/products\/programmable_media\">Media Optimizer<\/a>, the <a href=\"https:\/\/demo.cloudinary.com\/product-gallery\/\">Product Gallery widget<\/a>, and the <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\">upload widget<\/a>. Additionally, we described the options for handling responsive media.<\/p>\n<p>Has this topic piqued your interest? If so, do listen to the <a href=\"https:\/\/gitnation.zoom.us\/rec\/play\/xHsmXbYv4X5S8K-XzLC6YLoXnTI6LqArtjVqd7pah3nO5UzeGnfLkvIw9Gs8h3tA1Ir_mugjYQfqBw6L.pd34fmMLuSq8eOQN?continueMode=true&amp;_x_zm_rtaid=JxAg5HB2SCeWYsmcMsv_jg.1619024494161.7437cf9f33fe78b274723d664712d862&amp;_x_zm_rhtaid=445\">recording<\/a> of our workshop at React Summit 2021 and send us your thoughts.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22349,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[49,72,227,246,263,305],"class_list":["post-22348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-cdn","tag-core-web-vitals","tag-performance-optimization","tag-react","tag-sdk","tag-video-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Faster Media, Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021<\/title>\n<meta name=\"description\" content=\"Cloudinary&#039;s workshop at React Summit 2021 explained why faster media leads to faster sites and how to optimize media format, size, and quality.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021\" \/>\n<meta property=\"og:description\" content=\"Cloudinary&#039;s workshop at React Summit 2021 explained why faster media leads to faster sites and how to optimize media format, size, and quality.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-17T20:20:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-03T19:41:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021\",\"datePublished\":\"2021-05-17T20:20:08+00:00\",\"dateModified\":\"2024-06-03T19:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\"},\"wordCount\":13,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA\",\"keywords\":[\"CDN\",\"Core Web Vitals\",\"Performance Optimization\",\"React\",\"SDK\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\",\"url\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\",\"name\":\"Faster Media, Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA\",\"datePublished\":\"2021-05-17T20:20:08+00:00\",\"dateModified\":\"2024-06-03T19:41:10+00:00\",\"description\":\"Cloudinary's workshop at React Summit 2021 explained why faster media leads to faster sites and how to optimize media format, size, and quality.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Faster Media, Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021","description":"Cloudinary's workshop at React Summit 2021 explained why faster media leads to faster sites and how to optimize media format, size, and quality.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","og_locale":"en_US","og_type":"article","og_title":"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021","og_description":"Cloudinary's workshop at React Summit 2021 explained why faster media leads to faster sites and how to optimize media format, size, and quality.","og_url":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","og_site_name":"Cloudinary Blog","article_published_time":"2021-05-17T20:20:08+00:00","article_modified_time":"2024-06-03T19:41:10+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021"},"author":{"name":"","@id":""},"headline":"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021","datePublished":"2021-05-17T20:20:08+00:00","dateModified":"2024-06-03T19:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021"},"wordCount":13,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA","keywords":["CDN","Core Web Vitals","Performance Optimization","React","SDK","Video API"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","url":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","name":"Faster Media, Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA","datePublished":"2021-05-17T20:20:08+00:00","dateModified":"2024-06-03T19:41:10+00:00","description":"Cloudinary's workshop at React Summit 2021 explained why faster media leads to faster sites and how to optimize media format, size, and quality.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"parsely":{"version":"1.1.0","canonical_url":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021","url":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA&w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA"},"articleSection":"Uncategorized","author":[],"creator":[],"publisher":{"@type":"Organization","name":"Cloudinary Blog","logo":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA"},"keywords":["cdn","core web vitals","performance optimization","react","sdk","video api"],"dateCreated":"2021-05-17T20:20:08Z","datePublished":"2021-05-17T20:20:08Z","dateModified":"2024-06-03T19:41:10Z"},"rendered":"<meta name=\"parsely-title\" content=\"Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/cloudinary.com\/blog\/faster_media_faster_websites_a_recap_of_a_cloudinary_workshop_at_react_summit_2021\" \/>\n<meta name=\"parsely-type\" content=\"post\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA&w=150&amp;h=150&amp;crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2021-05-17T20:20:08Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>\n<meta name=\"parsely-tags\" content=\"cdn,core web vitals,performance optimization,react,sdk,video api\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/cloudinary.com\/p.js"},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719141\/Web_Assets\/blog\/faster-media-faster-websites_2234954531\/faster-media-faster-websites_2234954531.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22348"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22348\/revisions"}],"predecessor-version":[{"id":34307,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22348\/revisions\/34307"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22349"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}