The solution to having many assets in our application but not holding them locally is to get those assets remotely, from the internet, using network calls.
Sounds simple, but pulling assets remotely can have many issues which I\u2019ll describe next.<\/p>\n\n\n\n
Issues<\/h2>\n\n\n\n\n- Roaming<\/strong> \u2014 since we\u2019re talking about mobile devices there\u2019s no guarantee that the user will have a stable connection, he could be traveling or just at a spot with a bad signal, and getting assets remotely with a bad connection can be really challenging.<\/li>\n\n\n\n
- Performance issues<\/strong> \u2014 Loading an asset requires resources from the device, and fitting a large asset into a small container will require some processing on the device, so think of doing that for 10 images at the same time, as we can see in the screenshot we might get blanks, holes or just long progress loading till the image finally shows.<\/li>\n<\/ul>\n\n\n\n
\n- Responsive issues<\/strong> \u2014 Some application support both orientations (portrait and landscape), when a container changes between orientations change what do we do with the asset? do we stretch it? fit it? crop it? it might look bad\u2026<\/li>\n\n\n\n
- Screen sizes<\/strong> \u2014 There are many screen sizes, It does not matter if it\u2019s iOS(the problem is less severe there) or Android, we have many screen sizes, the asset size between a small phone and a tablet is very different, do we need to create and pull an asset for each use-case? What about DPR (device pixel ratio) for each phone size? How to handle all of this? The problem only starts here cause soon we\u2019ll have expandable and foldable screens.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1014,h_500,c_scale\/f_auto,q_auto\/v1677876743\/Moblie_Image_Optimization1\/Moblie_Image_Optimization1.png?_i=AA\")
<\/figure>\n\n\n\n\n- Increased data usage<\/strong> \u2014 If the assets are not optimized their file size is larger, this means we\u2019re pulling more bytes from the internet, which means our device\u2019s modem will work more, which means more battery usage.
Moreover, if the user is not connected via WIFI it might charge him extra costs.<\/li>\n\n\n\n- Misused caching<\/strong> \u2014 We surely want to use some kind of cache mechanism where we keep the assets we already got locally (we do not want to pull the same asset over and over again), if the asset uses a lot in terms of bytes that means that app is getting oversized, and might get deleted since it uses too much space on the device.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_284,h_626,c_scale\/f_auto,q_auto\/v1677876743\/MoblieImageOptimzation2\/MoblieImageOptimzation2.png?_i=AA\")
<\/figure>\n\n\n\n\n- Memory usage<\/strong> \u2014 Rendering big assets requires memory, there\u2019s only so much memory that a device has, and if we try to render a lot of assets with a big size we might run into memory issues, while some devices have more memory and might handle this, others may crash due to this issue.<\/li>\n<\/ul>\n\n\n\n
\n- Dependency on Server Location \u2014 <\/strong>Since we\u2019re pulling assets remotely we\u2019re dependent on how far we are from the server, the closer the server the faster we\u2019ll get the asset.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_487,c_scale\/f_auto,q_auto\/v1677876744\/MoblieImageOptimization3\/MoblieImageOptimization3.png?_i=AA\")
<\/figure>\n\n\n\nDoes it Matter?<\/h2>\n\n\n\n
Loading many assets without optimization can cause delays in loading page speed, it can cause performance issues, or even crashes.
But why all that is important? Does the loading speed of a landing page really that important?<\/p>\n\n\n\n
The answer to that is definitely.<\/p>\n\n\n\n
\n- 100ms<\/strong> delay will cause a 7%<\/strong> conversion reduction (when we say conversion we mean a user puts something into his cart or turns into a paying user, or subscribed user)
Multiply this by 10, you get a 70% conversion reduction for a 1-second delay
*According to a study by Akamai.<\/li>\n\n\n\n- A 1-second<\/strong> delay can cause a 20%<\/strong> drop in traffic.<\/li>\n\n\n\n
- A 1-second<\/strong> delay decreases page views by 11%.<\/li>\n\n\n\n
- A 1-second<\/strong> delay can lead to a 16%<\/strong> decrease in customer satisfaction.<\/li>\n<\/ul>\n\n\n\n
The Solution<\/h2>\n\n\n\n
Now that we stated the problem and why is it important to optimize your media I want to show you how you can achieve this.<\/p>\n\n\n\n
\n- Improve Loading Speed <\/strong>\u2014 So the first thing we want to do is improve the page loading speed, we want our page to load fast and in an optimized way, this will improve the user experience for our app.<\/li>\n\n\n\n
- Reduce asset size\u00a0<\/strong>\u2014 To do that we can start with the following: reduce the size of the asset by resizing.
Reduce width and height (we don’t need 4k assets when presenting images feed, or thumbnails).
Reduce image quality, if we don’t show the image full size we can compress the image and decrease quality but still get a good-looking image,
We can also deliver a specific format HEIC for iOS(11+), and AVIF<\/a>(12+)\/WebP(4.2.1+) for Android (depending on the Android version).
All the things I just mentioned, dimensions, format, and quality will lead to lighter assets and more optimized assets that will use less space.<\/li>\n\n\n\n- Caching<\/strong> \u2014 So we download an image, presented it to the user, and he decides to move to another screen, or send the app to the background and open it again, do we download the image all over again?
Of course not, we\u2019ll use a cache mechanism so once we download an asset, it\u2019s saved on our device and we can load it locally the next time we want to use it, of course, we want the asset to be optimized so it will use as little space as possible on the device.<\/li>\n\n\n\n- Responsive \u2014<\/strong> we want to be able to get the same asset in different sizes (for different orientations for example, or different containers), we want to get that same asset in the most optimized way. Small in size for better bandwidth usage, device storage, and device performance.<\/li>\n\n\n\n
- Content delivery network \u2014<\/strong> or CDN for short is an extremely important mechanism, .this means that there is a grid of servers all around the world that we cache our delivered assets on once they get there for the first time.<\/li>\n\n\n\n
- That means that if the second user asks for the same asset it\u2019ll be delivered fast since the distance between the user and that specific CDN server is shorter than the main endpoint.<\/li>\n\n\n\n
- Desktop vs Mobile Assets<\/strong> \u2014 Some of us might have a website that presents the same assets as our mobile application, but the desktop design is very different from the application, the size of the assets may vary depending on the platform, and we need the same image, but in different size, keeping multiple instances with different sizes for the same asset is a good solution even better if each device will get the right asset for it.<\/li>\n<\/ul>\n\n\n\n
Practical<\/h2>\n\n\n\n
Now that we\u2019ve seen what challenges we\u2019re facing, what are the implications and how can we handle them, let\u2019s get practical, and see some code and how can we achieve better performance.<\/p>\n\n\n\n
For this demonstration, I\u2019ll be using Cloudinary\u2019s Flutter SDK<\/a>, feel free to use it, it\u2019ll require you to register on Cloudinary\u2019s website.<\/a><\/p>\n\n\nCloudinary cloudinary = Cloudinary.fromCloudName(cloudName: '<YOUR_CLOUD_NAME'<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe first thing I need to do is initiate my Cloudinary<\/code> object with my cloud name. <\/p>\n\n\ncloudinary.image('sample'<\/span>).toString()<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe following code will generate a URL for the image sample<\/code> you can find it here<\/a>.<\/p>\n\n\n\nNow that we can create and pull a remote asset, let\u2019s perform optimization on it.<\/p>\n\n\n
Transformation transformation = Transformation()\n..delivery(Quality(Quality.auto()))\n..delivery(Format(Format.avif))\n..resize(Resize.thumbnail()..width(500))\n..delivery(Dpr(Dpr.auto));<\/code><\/span><\/pre>\n\n\nI\u2019m creating the following Transformation<\/code> and I\u2019m adding to it the following:<\/p>\n\n\n\n\nQuality.auto()<\/code> \u2014 I\u2019m asking Cloudinary to compress the image automatically for me, for a lighter asset but still with good quality.<\/li>\n\n\n\nFomrat.avif<\/code> \u2014 Since I\u2019m using Android API level 33(Android 13)<\/li>\n\n\n\nResize.thumbnail()..width(500)<\/code> \u2014 I\u2019m reducing the size of the asset, in my case I\u2019m presenting it as a thumbnail and I don’t need a full size, so I\u2019m reducing the width to 500, important to mention, I did not specify a height, I\u2019m telling Cloudinary to keep the aspect ratio of the image according to the width I gave it.<\/li>\n\n\n\nDpr.auto<\/code> \u2014 DPR <\/a>\u2014 device pixel ratio, I\u2019m asking Cloudinary to calculate and give me the image with the DPR fit for the device automatically.<\/li>\n<\/ul>\n\n\n\nOnce the Transformation<\/code> is ready I\u2019m injecting it into my image creation:<\/p>\n\n\ncloudinary.image('sample'<\/span>).transformation(transformation).toString()<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThis will create the following URL<\/a>.<\/p>\n\n\n\nIn order to perform optimization on the image we did the following:<\/p>\n\n\n\n
\n- We reduced the size of the asset (width and height).<\/li>\n\n\n\n
- We set quality compression to auto.<\/li>\n\n\n\n
- We set DPR to auto.<\/li>\n\n\n\n
- We set the right format for this use case,
AVIF<\/code>.<\/li>\n<\/ol>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_540,h_960,c_scale\/f_auto,q_auto\/v1677876744\/MoblieImageOptimization4\/MoblieImageOptimization4.png?_i=AA\")
<\/figure>\n\n\n\nThe following screenshot shows an example from a demo application I built.<\/p>\n\n\n\n
In the left column, you can see the original image with its size underneath.
In the right column, we have the transformed image (the image with the transformation from above).<\/p>\n\n\n\n
We can see that we managed to cut the size of each image by up to 10 times.
This optimization will make it easier for the device to pull the assets remotely, render and decode them into their container and will give us better application performance overall.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
We just talked about why we even develop mobile applications. What is the challenge? Why does it matter? And what is the solution? I gave you practical tools, on how to optimize your media and with that your application\u2019s performance.
The important thing to remember is media optimization done right can improve your application\u2019s conversion rate, traffic, and customer satisfaction.<\/p>\n\n\n\n
Important to add, in this article we showed an example using the Cloudinary Flutter SDK<\/a>, this SDK is written in more than 15 other languages\/frameworks such as:<\/p>\n\n\n\n\n- Android SDK<\/a><\/li>\n\n\n\n
- iOS SDK<\/a><\/li>\n\n\n\n
- Kotlin SDK<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
Motivation As mobile developers, we want to build successful applications, rich applications, and visual applications, this requires our application to have a lot of assets (just text won’t do it, it\u2019s not the 90s anymore). In an ideal world, we would want to keep all assets on the application, but that doesn\u2019t make sense. The […]<\/p>\n","protected":false},"author":54,"featured_media":27296,"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-27280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-performance-optimization"],"acf":[],"yoast_head":"\n
Mobile Image Optimization<\/title>\n<meta name=\"description\" content=\"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Image Optimization\" \/>\n<meta property=\"og:description\" content=\"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-09T16:38:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-23T22:56:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization-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:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-image-optimization\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Mobile Image Optimization\",\"datePublished\":\"2023-03-09T16:38:42+00:00\",\"dateModified\":\"2025-02-23T22:56:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-image-optimization\"},\"wordCount\":1667,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"keywords\":[\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-image-optimization\",\"url\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\",\"name\":\"Mobile Image Optimization\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\"},\"image\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"datePublished\":\"2023-03-09T16:38:42+00:00\",\"dateModified\":\"2025-02-23T22:56:10+00:00\",\"description\":\"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.\",\"breadcrumb\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile Image Optimization\"}]},{\"@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":"Mobile Image Optimization","description":"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.","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:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc","og_locale":"en_US","og_type":"article","og_title":"Mobile Image Optimization","og_description":"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.","og_url":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc","og_site_name":"Cloudinary Blog","article_published_time":"2023-03-09T16:38:42+00:00","article_modified_time":"2025-02-23T22:56:10+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-image-optimization"},"author":{"name":"","@id":""},"headline":"Mobile Image Optimization","datePublished":"2023-03-09T16:38:42+00:00","dateModified":"2025-02-23T22:56:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-image-optimization"},"wordCount":1667,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","keywords":["Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/mobile-image-optimization","url":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc","name":"Mobile Image Optimization","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage"},"image":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","datePublished":"2023-03-09T16:38:42+00:00","dateModified":"2025-02-23T22:56:10+00:00","description":"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.","breadcrumb":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile Image Optimization"}]},{"@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\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27280","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=27280"}],"version-history":[{"count":16,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27280\/revisions"}],"predecessor-version":[{"id":36984,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27280\/revisions\/36984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27296"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- Responsive issues<\/strong> \u2014 Some application support both orientations (portrait and landscape), when a container changes between orientations change what do we do with the asset? do we stretch it? fit it? crop it? it might look bad\u2026<\/li>\n\n\n\n
- Screen sizes<\/strong> \u2014 There are many screen sizes, It does not matter if it\u2019s iOS(the problem is less severe there) or Android, we have many screen sizes, the asset size between a small phone and a tablet is very different, do we need to create and pull an asset for each use-case? What about DPR (device pixel ratio) for each phone size? How to handle all of this? The problem only starts here cause soon we\u2019ll have expandable and foldable screens.<\/li>\n<\/ul>\n\n\n\n
<\/figure>\n\n\n\n- \n
- Increased data usage<\/strong> \u2014 If the assets are not optimized their file size is larger, this means we\u2019re pulling more bytes from the internet, which means our device\u2019s modem will work more, which means more battery usage.
Moreover, if the user is not connected via WIFI it might charge him extra costs.<\/li>\n\n\n\n- Misused caching<\/strong> \u2014 We surely want to use some kind of cache mechanism where we keep the assets we already got locally (we do not want to pull the same asset over and over again), if the asset uses a lot in terms of bytes that means that app is getting oversized, and might get deleted since it uses too much space on the device.<\/li>\n<\/ul>\n\n\n\n
<\/figure>\n\n\n\n- \n
- Memory usage<\/strong> \u2014 Rendering big assets requires memory, there\u2019s only so much memory that a device has, and if we try to render a lot of assets with a big size we might run into memory issues, while some devices have more memory and might handle this, others may crash due to this issue.<\/li>\n<\/ul>\n\n\n\n
- \n
- Dependency on Server Location \u2014 <\/strong>Since we\u2019re pulling assets remotely we\u2019re dependent on how far we are from the server, the closer the server the faster we\u2019ll get the asset.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
Does it Matter?<\/h2>\n\n\n\n
Loading many assets without optimization can cause delays in loading page speed, it can cause performance issues, or even crashes.
But why all that is important? Does the loading speed of a landing page really that important?<\/p>\n\n\n\nThe answer to that is definitely.<\/p>\n\n\n\n
- \n
- 100ms<\/strong> delay will cause a 7%<\/strong> conversion reduction (when we say conversion we mean a user puts something into his cart or turns into a paying user, or subscribed user)
Multiply this by 10, you get a 70% conversion reduction for a 1-second delay
*According to a study by Akamai.<\/li>\n\n\n\n- A 1-second<\/strong> delay can cause a 20%<\/strong> drop in traffic.<\/li>\n\n\n\n
- A 1-second<\/strong> delay decreases page views by 11%.<\/li>\n\n\n\n
- A 1-second<\/strong> delay can lead to a 16%<\/strong> decrease in customer satisfaction.<\/li>\n<\/ul>\n\n\n\n
The Solution<\/h2>\n\n\n\n
Now that we stated the problem and why is it important to optimize your media I want to show you how you can achieve this.<\/p>\n\n\n\n
- \n
- Improve Loading Speed <\/strong>\u2014 So the first thing we want to do is improve the page loading speed, we want our page to load fast and in an optimized way, this will improve the user experience for our app.<\/li>\n\n\n\n
- Reduce asset size\u00a0<\/strong>\u2014 To do that we can start with the following: reduce the size of the asset by resizing.
Reduce width and height (we don’t need 4k assets when presenting images feed, or thumbnails).
Reduce image quality, if we don’t show the image full size we can compress the image and decrease quality but still get a good-looking image,
We can also deliver a specific format HEIC for iOS(11+), and AVIF<\/a>(12+)\/WebP(4.2.1+) for Android (depending on the Android version).
All the things I just mentioned, dimensions, format, and quality will lead to lighter assets and more optimized assets that will use less space.<\/li>\n\n\n\n- Caching<\/strong> \u2014 So we download an image, presented it to the user, and he decides to move to another screen, or send the app to the background and open it again, do we download the image all over again?
Of course not, we\u2019ll use a cache mechanism so once we download an asset, it\u2019s saved on our device and we can load it locally the next time we want to use it, of course, we want the asset to be optimized so it will use as little space as possible on the device.<\/li>\n\n\n\n- Responsive \u2014<\/strong> we want to be able to get the same asset in different sizes (for different orientations for example, or different containers), we want to get that same asset in the most optimized way. Small in size for better bandwidth usage, device storage, and device performance.<\/li>\n\n\n\n
- Content delivery network \u2014<\/strong> or CDN for short is an extremely important mechanism, .this means that there is a grid of servers all around the world that we cache our delivered assets on once they get there for the first time.<\/li>\n\n\n\n
- That means that if the second user asks for the same asset it\u2019ll be delivered fast since the distance between the user and that specific CDN server is shorter than the main endpoint.<\/li>\n\n\n\n
- Desktop vs Mobile Assets<\/strong> \u2014 Some of us might have a website that presents the same assets as our mobile application, but the desktop design is very different from the application, the size of the assets may vary depending on the platform, and we need the same image, but in different size, keeping multiple instances with different sizes for the same asset is a good solution even better if each device will get the right asset for it.<\/li>\n<\/ul>\n\n\n\n
Practical<\/h2>\n\n\n\n
Now that we\u2019ve seen what challenges we\u2019re facing, what are the implications and how can we handle them, let\u2019s get practical, and see some code and how can we achieve better performance.<\/p>\n\n\n\n
For this demonstration, I\u2019ll be using Cloudinary\u2019s Flutter SDK<\/a>, feel free to use it, it\u2019ll require you to register on Cloudinary\u2019s website.<\/a><\/p>\n\n\n
Cloudinary cloudinary = Cloudinary.fromCloudName(cloudName: '<YOUR_CLOUD_NAME'<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe first thing I need to do is initiate my
Cloudinary<\/code> object with my cloud name. <\/p>\n\n\ncloudinary.image('sample'<\/span>).toString()<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe following code will generate a URL for the image
sample<\/code> you can find it here<\/a>.<\/p>\n\n\n\nNow that we can create and pull a remote asset, let\u2019s perform optimization on it.<\/p>\n\n\n
Transformation transformation = Transformation()\n..delivery(Quality(Quality.auto()))\n..delivery(Format(Format.avif))\n..resize(Resize.thumbnail()..width(500))\n..delivery(Dpr(Dpr.auto));<\/code><\/span><\/pre>\n\n\nI\u2019m creating the following
Transformation<\/code> and I\u2019m adding to it the following:<\/p>\n\n\n\n- \n
Quality.auto()<\/code> \u2014 I\u2019m asking Cloudinary to compress the image automatically for me, for a lighter asset but still with good quality.<\/li>\n\n\n\nFomrat.avif<\/code> \u2014 Since I\u2019m using Android API level 33(Android 13)<\/li>\n\n\n\nResize.thumbnail()..width(500)<\/code> \u2014 I\u2019m reducing the size of the asset, in my case I\u2019m presenting it as a thumbnail and I don’t need a full size, so I\u2019m reducing the width to 500, important to mention, I did not specify a height, I\u2019m telling Cloudinary to keep the aspect ratio of the image according to the width I gave it.<\/li>\n\n\n\nDpr.auto<\/code> \u2014 DPR <\/a>\u2014 device pixel ratio, I\u2019m asking Cloudinary to calculate and give me the image with the DPR fit for the device automatically.<\/li>\n<\/ul>\n\n\n\nOnce the
Transformation<\/code> is ready I\u2019m injecting it into my image creation:<\/p>\n\n\ncloudinary.image('sample'<\/span>).transformation(transformation).toString()<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThis will create the following URL<\/a>.<\/p>\n\n\n\n
In order to perform optimization on the image we did the following:<\/p>\n\n\n\n
- \n
- We reduced the size of the asset (width and height).<\/li>\n\n\n\n
- We set quality compression to auto.<\/li>\n\n\n\n
- We set DPR to auto.<\/li>\n\n\n\n
- We set the right format for this use case,
AVIF<\/code>.<\/li>\n<\/ol>\n\n\n\n<\/figure>\n\n\n\nThe following screenshot shows an example from a demo application I built.<\/p>\n\n\n\n
In the left column, you can see the original image with its size underneath.
In the right column, we have the transformed image (the image with the transformation from above).<\/p>\n\n\n\nWe can see that we managed to cut the size of each image by up to 10 times.
This optimization will make it easier for the device to pull the assets remotely, render and decode them into their container and will give us better application performance overall.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n
We just talked about why we even develop mobile applications. What is the challenge? Why does it matter? And what is the solution? I gave you practical tools, on how to optimize your media and with that your application\u2019s performance.
The important thing to remember is media optimization done right can improve your application\u2019s conversion rate, traffic, and customer satisfaction.<\/p>\n\n\n\nImportant to add, in this article we showed an example using the Cloudinary Flutter SDK<\/a>, this SDK is written in more than 15 other languages\/frameworks such as:<\/p>\n\n\n\n
- \n
- Android SDK<\/a><\/li>\n\n\n\n
- iOS SDK<\/a><\/li>\n\n\n\n
- Kotlin SDK<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
Motivation As mobile developers, we want to build successful applications, rich applications, and visual applications, this requires our application to have a lot of assets (just text won’t do it, it\u2019s not the 90s anymore). In an ideal world, we would want to keep all assets on the application, but that doesn\u2019t make sense. The […]<\/p>\n","protected":false},"author":54,"featured_media":27296,"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-27280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-performance-optimization"],"acf":[],"yoast_head":"\n
Mobile Image Optimization<\/title>\n<meta name=\"description\" content=\"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Image Optimization\" \/>\n<meta property=\"og:description\" content=\"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-09T16:38:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-23T22:56:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization-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:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-image-optimization\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Mobile Image Optimization\",\"datePublished\":\"2023-03-09T16:38:42+00:00\",\"dateModified\":\"2025-02-23T22:56:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-image-optimization\"},\"wordCount\":1667,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"keywords\":[\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-image-optimization\",\"url\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\",\"name\":\"Mobile Image Optimization\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\"},\"image\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"datePublished\":\"2023-03-09T16:38:42+00:00\",\"dateModified\":\"2025-02-23T22:56:10+00:00\",\"description\":\"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.\",\"breadcrumb\":{\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile Image Optimization\"}]},{\"@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":"Mobile Image Optimization","description":"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.","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:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc","og_locale":"en_US","og_type":"article","og_title":"Mobile Image Optimization","og_description":"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.","og_url":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc","og_site_name":"Cloudinary Blog","article_published_time":"2023-03-09T16:38:42+00:00","article_modified_time":"2025-02-23T22:56:10+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-image-optimization"},"author":{"name":"","@id":""},"headline":"Mobile Image Optimization","datePublished":"2023-03-09T16:38:42+00:00","dateModified":"2025-02-23T22:56:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-image-optimization"},"wordCount":1667,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","keywords":["Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/mobile-image-optimization","url":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc","name":"Mobile Image Optimization","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage"},"image":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","datePublished":"2023-03-09T16:38:42+00:00","dateModified":"2025-02-23T22:56:10+00:00","description":"Learn how Cloudinary can improve mobile loading speed, fix responsive issues, deliver by multi-CDN, and improve mobile image optimization.","breadcrumb":{"@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/medium.com\/codex\/mobile-what-image-format-should-i-use-39b44e9f86fc#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile Image Optimization"}]},{"@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\/v1678236845\/Mobile-image-optimization\/Mobile-image-optimization.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27280","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=27280"}],"version-history":[{"count":16,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27280\/revisions"}],"predecessor-version":[{"id":36984,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27280\/revisions\/36984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27296"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - iOS SDK<\/a><\/li>\n\n\n\n
- Android SDK<\/a><\/li>\n\n\n\n
- Reduce asset size\u00a0<\/strong>\u2014 To do that we can start with the following: reduce the size of the asset by resizing.
- A 1-second<\/strong> delay can cause a 20%<\/strong> drop in traffic.<\/li>\n\n\n\n
- 100ms<\/strong> delay will cause a 7%<\/strong> conversion reduction (when we say conversion we mean a user puts something into his cart or turns into a paying user, or subscribed user)
- Dependency on Server Location \u2014 <\/strong>Since we\u2019re pulling assets remotely we\u2019re dependent on how far we are from the server, the closer the server the faster we\u2019ll get the asset.<\/li>\n<\/ul>\n\n\n\n
- Misused caching<\/strong> \u2014 We surely want to use some kind of cache mechanism where we keep the assets we already got locally (we do not want to pull the same asset over and over again), if the asset uses a lot in terms of bytes that means that app is getting oversized, and might get deleted since it uses too much space on the device.<\/li>\n<\/ul>\n\n\n\n
- Screen sizes<\/strong> \u2014 There are many screen sizes, It does not matter if it\u2019s iOS(the problem is less severe there) or Android, we have many screen sizes, the asset size between a small phone and a tablet is very different, do we need to create and pull an asset for each use-case? What about DPR (device pixel ratio) for each phone size? How to handle all of this? The problem only starts here cause soon we\u2019ll have expandable and foldable screens.<\/li>\n<\/ul>\n\n\n\n