{"id":26946,"date":"2023-02-16T08:00:00","date_gmt":"2023-02-16T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=26946"},"modified":"2025-11-26T21:13:14","modified_gmt":"2025-11-27T05:13:14","slug":"engineering-better-performance-for-rich-media-web-app-experiences","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences","title":{"rendered":"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>There is a very high chance that your slow &amp; just-okay web and app performance is affecting your business negatively.<\/p>\n<p><a href=\"https:\/\/neilpatel.com\/blog\/loading-time\/\">Studies<\/a> have shown that 47% of consumers expect a web page to load in 2 seconds or less, and 40% of people abandon a website that takes more than 3 seconds to load.<\/p>\n<p>These days, many websites and apps are loaded with significant media assets. Page (web) and Screen (mobile) weight are increasing heavily by the day and contribute heavily to performance. Shoppers will enjoy exploring your online store and are more likely to purchase if their experience is fast!<\/p>\n<p>Two weeks ago, I composed a 45-page word document that had a lot of pictures and exported it to PDF. It was ~75 MB. I needed it to be below 15MB because the submission website had a hard requirement of 15 MB. I ran the images through Cloudinary\u2019s image performance technique to obtain high-quality compressed photos and replaced them with the initial pictures. The result was a 13MB PDF!<\/p>\n<p>Understanding that performance is money gives you immense confidence and justification to invest deeply in the performance optimization of your app.<\/p>\n<p>In this article, I\u2019ll share some performance optimization techniques to engineer faster web &amp; app experiences with Cloudinary.<\/p>\n<h2>1. Auto-optimization of all Media Assets<\/h2>\n<p>Every media asset in your app contributes to increased page weight and decreases load time. Raw photos and videos should not make their way to your platform. So, ensure all your videos and images are compressed &amp; optimized before delivery.<\/p>\n<p>Rolling out your compression techniques &amp; modules comes with its challenges, some human resources &amp; continuous maintenance. However, you can leverage Cloudinary\u2019s optimization tech to auto-optimize all your media assets.<\/p>\n<p>These two Cloudinary parameters,<a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization#how_to_optimize_image_format\"><strong>f_auto<\/strong><\/a> and <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization#automatic_quality_selection_q_auto\"><strong>q_auto<\/strong><\/a>, added to your media assets URL or applied before upload, do an excellent job of auto-compression and auto-optimizing your media assets.<\/p>\n<p>The parameter, <strong>vc_auto<\/strong>, normalizes and optimizes a video by automatically selecting the most <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#vc_auto\">appropriate codec based on the output format<\/a>.<\/p>\n<h2>2. Fast, Single &amp; Multi-CDN Delivery for all Assets<\/h2>\n<p>Your users, in many instances, are scattered all over the world. They access your services and browse your website from their devices in different geographical locations. So, in turn, affects the delivery and load time of your website for other users.<\/p>\n<p>A user in Canada might load your website in less than 2 seconds, while another in Nigeria might witness it load in 7 seconds.<\/p>\n<p>Worthy of Note is that Cloudinary serves all media assets via a CDN. However, Cloudinary offers the option of multi-CDNs.<\/p>\n<p>Multiple CDNs speed up and enhance content delivery to your end users. And Cloudinary customers can take advantage of one of two <a href=\"https:\/\/demo.cloudinary.com\/multi-cdn\">multi-CDN optimization solutions<\/a>:<\/p>\n<ul>\n<li>\n<p><strong>Dynamic multi-CDN switching:<\/strong> Uses real-time data to automatically select the best performing or most appropriate of the supported CDN services for every user request and every location.<\/p>\n<\/li>\n<li>\n<p><strong>Smart CDN selection:<\/strong> Dedicated support engineers help you determine which of the supported CDN services best fit your required features and target audience.<\/p>\n<\/li>\n<\/ul>\n<p>These options allow you and your team to focus on your business while Cloudinary handles the effortless delivery of optimized media assets to your customers across the globe.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220364\/Engineering_Better_Performance_for_Rich_Media_Web_App_Experiences_With_Cloudinary-1.png\" alt=\"Multi-CDN delivery\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2700\" height=\"1792\"\/><\/p>\n<p>These two solutions above are available to Enterprise-level customers, and the dynamic multi-CDN feature affects pricing.<\/p>\n<h2>3. Resizing and Cropping<\/h2>\n<p>One way to achieve faster load times is to resize and crop media assets before they reach the user\u2019s devices.<\/p>\n<p>Many times, I see instances of resized images and videos by CSS. This means the original media asset has already been downloaded to the client. Resizing should never be done on the browser. Not good and results in slower load times!<\/p>\n<p>Resizing videos to 1,080 px., 720 px., or fewer pixels saves millions per frame, concurrently generating gratifyingly smaller files. For example, if you resize a 45 seconds video that is 1,350px in width, 720px in height and 50MB to 1012 x 540 px with a size of 22MB video, then it means the new video will start playing way faster than the former.<\/p>\n<p>Cloudinary is smart enough to resize images and crop them with several parameters dynamically. Dynamic cropping in Cloudinary is done through intelligent responsive breakpoints. You have two options:<\/p>\n<p><strong>Automatic breakpoints:<\/strong> Cloudinary\u2019s intelligent algorithm can calculate the settings for optimal breakpoints by accounting for the number of generated image versions and the file-size reduction that occurred with each version. For more details, <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images\">see this documentation on responsive images<\/a>.<\/p>\n<p><strong>Cloudinary API:<\/strong> You can programmatically request breakpoints for uploaded images through the Cloudinary API by specifying settings like width range and requesting a transformation. Furthermore, you can order multiple image transformations, including cropping, image effects, filters, and optimization. Read more in this <a href=\"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions\">excellent article: Introducing Intelligent Responsive Breakpoints Solutions.<\/a><\/p>\n<p>Cloudinary offers a parameter, <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#w_auto\"><strong>w_auto<\/strong><\/a> that you can add to the asset URL to scale the image and video to fit the various layout widths and send users the versions that display best on their browsers from the same URL.<\/p>\n<h2>4. Sprite Generation for Image Assets<\/h2>\n<p>A sprite is a single image that is composed of many smaller images. For example, the web page is modified to download only a single image from the server, and the page\u2019s HTML uses alternative CSS class names to point to the small images within the larger image.<\/p>\n<p>Sprites significantly reduce the number of HTTP requests to the server to fetch images by fetching just one image, thus resulting in faster asset delivery.<\/p>\n<p>For more [technical details, check out Sprite Generation with Cloudinary].(<a href=\"https:\/\/cloudinary.com\/documentation\/sprite_generation\">https:\/\/cloudinary.com\/documentation\/sprite_generation<\/a>)<\/p>\n<h2>5. Lazy Loading<\/h2>\n<p>Lazy loading for image assets improves your website and app performance a lot! With lazy loading, only the user can see important images at a time.<\/p>\n<p>With lazy loading, images are only loaded once the user reaches the point of scrolling the website\/app where they need to view them.<\/p>\n<p>If your site home page has 100 images and you load only 3 depending on the user\u2019s viewport-specific location at a time, then you are lazy loading the assets.<\/p>\n<p>For more details, check out this <a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_choosing_the_best_option\">excellent article with several lazy loading options<\/a>.<\/p>\n<h2>6. AVIF Support<\/h2>\n<p>If you want to start delivering images that are half the size of JPEGs, opt for AVIF by adding <strong>f_avif,q_auto<\/strong> to your media asset URLs and delivering them\u2014along with the appropriate fallbacks\u2014using the <em><picture><\/em> element.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/tools\/compress-avif\">AVIF<\/a> is an image format spun from the AV1 video format developed by the Alliance for Open Media (AOM). As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.<\/p>\n<p>Worthy of Note is that the format does not enjoy universal support by browsers, and encoding AVIF images is costly. Therefore, the easiest way to adopt this format is with Cloudinary.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">picture<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/avif\"<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"dog.avif\"<\/span>\/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/webp\"<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"dog.webp\"<\/span>\/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>= <span class=\"hljs-string\">\"dog.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>= <span class=\"hljs-string\">\"A dog chasing a ball.\"<\/span>\/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">picture<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Note:<\/strong> AVIF does not excel at lossless compression.<\/p>\n<h2>7. Optimizing Video Formats<\/h2>\n<p>WebM, with its VP8 and VP9 encodings, are newer formats that deliver similar quality with smaller-sized videos. But, again, you can leverage Cloudinary to deliver such optimized video formats.<\/p>\n<p>Cloudinary\u2019s optimization capabilities for video result in at least a 50% reduction in file size. You can change <strong>vc_auto<\/strong> in the video URL to <strong>vc_vp8<\/strong>, <strong>vc_vp9<\/strong> or <strong>vc_h265<\/strong>.<\/p>\n<p>That\u2019s all Cloudinary requires to re-encode the videos for optimization.<\/p>\n<h2>8. Convert Animated Gifs To Videos<\/h2>\n<p>GIFs are expensive. So, instead of using GIFs on your page, use videos. All you need to convert your GIFs to videos is to change the extension of the video URL from <strong>.gif<\/strong> to <strong>.mp4.<\/strong><\/p>\n<p><video\n      controls\n      muted\n      preload=\"none\"\n      class=\"c-transformed-asset c-transformed-asset--video\"\n      poster=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,vc_auto\/office-chair-race-young-guy.jpg\"\n      \n    >\n      <source src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,vc_auto\/vc_h265\/office-chair-race-young-guy.mp4\" type=\"video\/mp4; codecs=hevc\">\n<source src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,vc_auto\/vc_vp9\/office-chair-race-young-guy.webm\" type=\"video\/webm; codecs=vp9\">\n<source src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,vc_auto\/vc_auto\/office-chair-race-young-guy.mp4\" type=\"video\/mp4\">\n<source src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,vc_auto\/vc_auto\/office-chair-race-young-guy.webm\" type=\"video\/webm\">\n    <\/video>\n<strong>51KB<\/strong> <em>video format<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/v1539804666\/office-chair-race-young-guy.gif\" alt=\"GIF format\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"400\" height=\"225\"\/>\n<strong>2.83MB<\/strong> <em>gif format<\/em><\/p>\n<h2>Tools for Measuring Performance<\/h2>\n<p>I recommend you use a couple of tools to measure your web and app performance.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/webspeedtest.cloudinary.com\/\">Website Image Analysis Tool<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.webpagetest.org\/\">Webpage Test<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/web.dev\/vitals\/\">Core Web Vitals<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse<\/a>\n<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>It\u2019s an open secret that optimizing rich media drives revenue in e-commerce. So, again, performance is money!<\/p>\n<p>Performance optimization is not a one-time thing. It\u2019s intentional, deliberate and continuous. You can download the \u201cPerformance is Money\u201d <a href=\"https:\/\/info.cloudinary.com\/Performance-Is-Money.html\">whitepaper here<\/a> for your continued learning. And, as always, <a href=\"https:\/\/cloudinary.com\/contact\">reach out to us at Cloudinary<\/a> if you\u2019re interested in more support with media optimization.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":54,"featured_media":26949,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[227],"class_list":["post-26946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-performance-optimization"],"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>Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary<\/title>\n<meta name=\"description\" content=\"Master image and video optimization for the best web and app experiences for your users using Cloudinary and these techniques.\" \/>\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\/engineering-better-performance-for-rich-media-web-app-experiences\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Master image and video optimization for the best web and app experiences for your users using Cloudinary and these techniques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-16T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T05:13:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/engineering-better-performance-for-rich-media-web-app-experiences#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary\",\"datePublished\":\"2023-02-16T15:00:00+00:00\",\"dateModified\":\"2025-11-27T05:13:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA\",\"keywords\":[\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences\",\"url\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences\",\"name\":\"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA\",\"datePublished\":\"2023-02-16T15:00:00+00:00\",\"dateModified\":\"2025-11-27T05:13:14+00:00\",\"description\":\"Master image and video optimization for the best web and app experiences for your users using Cloudinary and these techniques.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary\"}]},{\"@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":"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary","description":"Master image and video optimization for the best web and app experiences for your users using Cloudinary and these techniques.","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\/engineering-better-performance-for-rich-media-web-app-experiences","og_locale":"en_US","og_type":"article","og_title":"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary","og_description":"Master image and video optimization for the best web and app experiences for your users using Cloudinary and these techniques.","og_url":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences","og_site_name":"Cloudinary Blog","article_published_time":"2023-02-16T15:00:00+00:00","article_modified_time":"2025-11-27T05:13:14+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences"},"author":{"name":"","@id":""},"headline":"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary","datePublished":"2023-02-16T15:00:00+00:00","dateModified":"2025-11-27T05:13:14+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences"},"wordCount":12,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA","keywords":["Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences","url":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences","name":"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA","datePublished":"2023-02-16T15:00:00+00:00","dateModified":"2025-11-27T05:13:14+00:00","description":"Master image and video optimization for the best web and app experiences for your users using Cloudinary and these techniques.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/engineering-better-performance-for-rich-media-web-app-experiences#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Engineering Better Performance for Rich Media Web and App Experiences With Cloudinary"}]},{"@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":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1675196987\/blog-engineering_performance\/blog-engineering_performance.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26946","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\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=26946"}],"version-history":[{"count":10,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26946\/revisions"}],"predecessor-version":[{"id":39459,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26946\/revisions\/39459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/26949"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=26946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=26946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=26946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}