{"id":15449,"date":"2021-10-08T09:26:12","date_gmt":"2021-10-08T09:26:12","guid":{"rendered":"https:\/\/flobiz.in\/blog\/?p=15449"},"modified":"2021-10-08T09:50:21","modified_gmt":"2021-10-08T09:50:21","slug":"image-loading-libraries-a-comparison-guide","status":"publish","type":"post","link":"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/","title":{"rendered":"Image Loading Libraries : A Comparison Guide"},"content":{"rendered":"\n<p id=\"4b67\">A lot of android apps require the use of images and thus the need for images to be loaded efficiently and quickly arises. Not only that but we also need to handle caching so that images are loaded quicker while also ensuring that the correct size of the image is being loaded in the memory.<\/p>\n\n\n\n<p id=\"7546\">To make such tasks easier we use image loading&nbsp;libraries. But as there is an abundance of such libraries it\u2019s hard to choose which one to use for your project. Well don\u2019t worry, to make things simpler for you we will discuss the most popular ones in this article, so let\u2019s start!<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"1c8c\">Glide<\/h1>\n\n\n\n<p id=\"8bd6\">So the official documentation for Glide describes it as :<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>A fast and efficient image loading library for Android focused on smooth scrolling.<\/p><\/blockquote>\n\n\n\n<p id=\"4a50\">To use Glide in your app you need to add the following lines to your app-level build.gradle :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Vs3EGa7rKKFpOA9mqwOYuQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"7ccf\">And the following one to your AndroidManifest File :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*k2Wq1pLZLDXjcWHCojiROA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"bb1c\">That\u2019s it, you can now use Glide to load images from URL or drawable images. The Glide API is quite simple to use, here\u2019s an example :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/792\/1*X18aMsJQCW7XlxFWUfdbeg.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"42f0\">Transformations<\/h2>\n\n\n\n<p id=\"b0fd\">Glide includes a lot of transformations like :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CenterCrop<\/li><li>FitCenter<\/li><li>CircleCrop<\/li><\/ul>\n\n\n\n<p id=\"e3f9\">Here\u2019s an example of how a transformation is used is in Glide :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/768\/1*8arDsbeQge8_IELtW8bODA.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c2e4\">Advantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Supports GIF Animation<\/li><li>Simple to use<\/li><li>High caching speed<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7b74\">Disadvantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Big library size<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"101f\">Picasso<\/h1>\n\n\n\n<p id=\"b62a\">Picasso is an image loading library developed by Square. The documentation describes it as :<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>A powerful image downloading and caching library for Android<\/p><\/blockquote>\n\n\n\n<p id=\"0e68\">To use Picasso in your app, you need to add the following lines to your app-level build.gradle :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*DLzh2LyCTrd1-zud6JzuqA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"3043\">You also need to add the Internet Permission as with Glide.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*k2Wq1pLZLDXjcWHCojiROA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"00aa\">Picasso\u2019s API is really simple to use as well, here\u2019s an example :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/804\/1*TOPhuLj8xC4xn4R62Vq7wQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7237\">Transformation<\/h2>\n\n\n\n<p id=\"b1ad\">Picasso supports a lot of transformations as well, you can use them like this :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1284\/1*Pb0_icE6tpbCCDQaJ8Vuug.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5ba4\">Advantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Simple to use<\/li><li>Small download size<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cfbf\">Disadvantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>No GIF support<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"3f4a\">Fresco<\/h1>\n\n\n\n<p id=\"d0c1\">Fresco is an image loading library developed by Facebook, on its official website it\u2019s described as :<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Fresco is a powerful system for displaying Android applications. It takes care of image loading and display so you don\u2019t have to.<\/p><\/blockquote>\n\n\n\n<p id=\"a0a8\">Add the following lines to your build.gradle file :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*zg_KbsJQyrZxPaf5hVjsvQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"5687\">Add the internet permission in your AndroidManifest :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*k2Wq1pLZLDXjcWHCojiROA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"9fc1\">Initialize Fresco in your MainActivity class :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/896\/1*GhH1ZR5JqvuQyFx_R21t_A.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"356a\">To use it in your app create a SimpleDraweeView in xml file :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*M7O2kZqrqSi1poD5XeLJZw.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"c5b9\">And use the Fresco API to set an image to it :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*1EH5zTNao4I1tb_Jsv-WLg.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"73a7\">Transformations<\/h2>\n\n\n\n<p id=\"fed6\">Applying transformations in code is a bit more complex in Fresco than in Glide and Picasso which are quite similar in their approach. However, most transformations can be easily applied in the XML layout, for example :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1180\/1*6pVzNN9o3gh-XW48MTZ_VQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8118\">Advantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Supports GIF Animation<\/li><li>Streaming Functionality<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c218\">Disadvantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Big Library Size<\/li><li>SimpleDraweeView does not support wrap content<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"7171\">COIL<\/h1>\n\n\n\n<p id=\"4042\">In its documentation, the coil is described as :<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>An image loading library for Android backed by Kotlin Coroutines.<\/p><\/blockquote>\n\n\n\n<p id=\"bac9\">To use COIL in your app, add the following to build.gradle<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1116\/1*G5qQLxOuFFCRZxHxMMVC3w.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"2581\">Add the internet permission as usual :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*k2Wq1pLZLDXjcWHCojiROA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"962d\">Use the API as following :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*WH0fA7sh_OVpTSdR3pB7cA.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3cd2\">Transformations<\/h2>\n\n\n\n<p id=\"7d08\">COIL provides four transformations by default :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>BLUR<\/li><li>Circle Crop<\/li><li>Gray Scale<\/li><li>Rounded Corners<\/li><\/ul>\n\n\n\n<p id=\"2e1e\">Here\u2019s an example of how to use transformations in COIL :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*274HIxQufglTLDns--1Tew.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c996\">Advantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Simple to use<\/li><li>Made for kotlin<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"e93a\">Disadvantages<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Not fully compatible with Java<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"8667\">Comparison<\/h1>\n\n\n\n<p id=\"5725\">Finally, here\u2019s a comparison chart comparing all four :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*SphwwUxgxZv2278L7TZK9A.png\" alt=\"\"\/><figcaption>Basic Comparison Chart<\/figcaption><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"b0a9\">Conclusion<\/h1>\n\n\n\n<p id=\"1bb4\">In conclusion, I would say that COIL is good for small projects as it is super easy to use while Glide would work better for large projects with its robust cache system.<a href=\"https:\/\/medium.com\/m\/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2F6c3322df9fe&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2F%40pratham_21198%2Fimage-loading-libraries-a-comparison-6c3322df9fe&amp;user=Pratham%20Kumar%20Jha&amp;userId=e75288f5ec1b&amp;source=post_sidebar-----6c3322df9fe---------------------clap_sidebar-----------\"><\/a><a href=\"https:\/\/medium.com\/m\/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F6c3322df9fe&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2F%40pratham_21198%2Fimage-loading-libraries-a-comparison-6c3322df9fe&amp;source=post_sidebar-----6c3322df9fe---------------------bookmark_sidebar-----------\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a comparison guide to help you understand the best library among the most popular Image Loading Libraries available for Android apps. <\/p>\n","protected":false},"author":11,"featured_media":15450,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[149],"tags":[],"class_list":["post-15449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering-product"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Image Loading Libraries : A Comparison Guide<\/title>\n<link rel=\"canonical\" href=\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Loading Libraries : A Comparison Guide\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s a comparison guide to help you understand the best library among the most popular Image Loading Libraries available for Android apps.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"FloBiz\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-08T09:26:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-08T09:50:21+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/35.200.248.73\/blog\/wp-content\/uploads\/2021\/10\/Untitled-design-21.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/35.200.248.73:80\/blog\/#website\",\"url\":\"http:\/\/35.200.248.73:80\/blog\/\",\"name\":\"FloBiz\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/35.200.248.73:80\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/35.200.248.73\/blog\/wp-content\/uploads\/2021\/10\/Untitled-design-21.png\",\"contentUrl\":\"http:\/\/35.200.248.73\/blog\/wp-content\/uploads\/2021\/10\/Untitled-design-21.png\",\"width\":1200,\"height\":675,\"caption\":\"Image loading libraries\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/#webpage\",\"url\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/\",\"name\":\"Image Loading Libraries : A Comparison Guide\",\"isPartOf\":{\"@id\":\"http:\/\/35.200.248.73:80\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/#primaryimage\"},\"datePublished\":\"2021-10-08T09:26:12+00:00\",\"dateModified\":\"2021-10-08T09:50:21+00:00\",\"author\":{\"@id\":\"http:\/\/35.200.248.73:80\/blog\/#\/schema\/person\/eacf6891f6d9b106da3ef107d2e17a60\"},\"breadcrumb\":{\"@id\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/35.200.248.73:80\/blog\/\",\"url\":\"http:\/\/35.200.248.73:80\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/\",\"url\":\"http:\/\/35.200.248.73\/blog\/image-loading-libraries-a-comparison-guide\/\",\"name\":\"Image Loading Libraries : A Comparison Guide\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/35.200.248.73:80\/blog\/#\/schema\/person\/eacf6891f6d9b106da3ef107d2e17a60\",\"name\":\"Pratham\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/35.200.248.73:80\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e9b1771c74ece4f5c094a51a9eccb15303838e95674e56868fe366ced33afbcf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e9b1771c74ece4f5c094a51a9eccb15303838e95674e56868fe366ced33afbcf?s=96&d=mm&r=g\",\"caption\":\"Pratham\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/pratham-kumar-jha\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/posts\/15449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/comments?post=15449"}],"version-history":[{"count":4,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/posts\/15449\/revisions"}],"predecessor-version":[{"id":15456,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/posts\/15449\/revisions\/15456"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/media\/15450"}],"wp:attachment":[{"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/media?parent=15449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/categories?post=15449"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/35.200.248.73\/blog\/wp-json\/wp\/v2\/tags?post=15449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}