When it comes to choosing a file type for your images, you\u2019ve got options. (Selecting an image’s file type is easily done in most image-handling software through the Save as <\/strong>or Export<\/strong> tools.) But each type comes with its own set of pros and cons; you\u2019ll want to choose the one that best aligns with what you need your image to do. Here\u2019s a quick breakdown of some of the more common file types supported in the story builder:<\/p>\n JPG (or JPEG)<\/strong> files are perhaps the most common type out there; the file extension stands for Joint Photographic Experts Group, if you\u2019re curious. What makes JPGs so great is the amount of detail they can preserve in a relatively small-sized file. However, JPGs can experience \u201clossy\u201d compression when they\u2019re repeatedly exported, meaning that they\u2019ll gradually look less and less sharp the more times you edit and then re-save the file, or re-size it.<\/p>\n <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129642,"id":1129642,"title":"photo_example","filename":"photo_example.jpg","filesize":218086,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/images-in-arcgis-storymaps\/photo_example","alt":"","author":"6331","description":"","caption":"JPEGs excel at complex images with lots of colors and subtle gradients.","name":"photo_example","status":"inherit","uploaded_to":1129552,"date":"2021-02-02 00:02:19","modified":"2021-02-02 00:48:53","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1617,"height":626,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example.jpg","medium-width":464,"medium-height":180,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example.jpg","medium_large-width":768,"medium_large-height":297,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example.jpg","large-width":1617,"large-height":626,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example-1536x595.jpg","1536x1536-width":1536,"1536x1536-height":595,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example.jpg","2048x2048-width":1617,"2048x2048-height":626,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example-826x320.jpg","card_image-width":826,"card_image-height":320,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/photo_example.jpg","wide_image-width":1617,"wide_image-height":626}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" GIF<\/strong> files (short for Graphic Interchange Format) are growing in popularity these days, largely for their ability to display animation or movement. GIFs can be composed of a series of frames, which is how they achieve this effect. They also support transparent backgrounds, so you won\u2019t have to modify the file just because you decide to change your story\u2019s background color. But while you gain animation and transparency with GIFs, you lose color flexibility. GIFs only contain 256 colors, making them less than ideal for complex or highly detailed images with rich color palettes or gradients. Additionally, the more colors a GIF has, and the more those colors change, the larger the file size of that image will be.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129672,"id":1129672,"title":"chart_example","filename":"chart_example.png","filesize":45255,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/images-in-arcgis-storymaps\/chart_example","alt":"","author":"6331","description":"","caption":"GIFs are perfect for charts, logos or graphics with only a few solid colors. ","name":"chart_example","status":"inherit","uploaded_to":1129552,"date":"2021-02-02 00:07:53","modified":"2021-02-02 00:08:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1516,"height":598,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","medium-width":464,"medium-height":183,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","medium_large-width":768,"medium_large-height":303,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","large-width":1516,"large-height":598,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","1536x1536-width":1516,"1536x1536-height":598,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","2048x2048-width":1516,"2048x2048-height":598,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example-826x326.png","card_image-width":826,"card_image-height":326,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/chart_example.png","wide_image-width":1516,"wide_image-height":598}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" PNG<\/strong> files (Portable Network Graphics) aren\u2019t as widely known, but they\u2019re incredibly useful for publishing content on the web. Like GIFs, PNGs support transparent backgrounds, but unlike GIFs, they aren\u2019t limited in the number of colors they can contain\u2014a gradient that looks chunky in a GIF will look silky smooth in a PNG. And, unlike JPGs, PNGs are inherently lossless; they\u2019ll never degrade in quality no matter how many times they are re-sized. The tradeoff here, though, is file size. If you save the same image as both a JPG and a PNG, the PNG will always be a larger file.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1129682,"id":1129682,"title":"Commpression_Artifacts","filename":"Commpression_Artifacts.gif","filesize":127941,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/images-in-arcgis-storymaps\/commpression_artifacts","alt":"","author":"6331","description":"","caption":"JPEG is popular and works in many cases, but if you find text becoming fuzzy or soft consider using the PNG-24 format instead. ","name":"commpression_artifacts","status":"inherit","uploaded_to":1129552,"date":"2021-02-02 00:10:35","modified":"2021-02-02 00:27:27","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":776,"height":475,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","medium-width":426,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","medium_large-width":768,"medium_large-height":470,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","large-width":776,"large-height":475,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","1536x1536-width":776,"1536x1536-height":475,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","2048x2048-width":776,"2048x2048-height":475,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts-760x465.gif","card_image-width":760,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Commpression_Artifacts.gif","wide_image-width":776,"wide_image-height":475}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" SVG<\/strong> files (Scalable Vector Graphics) are certainly the most niche format on this list\u2014you\u2019ll need more sophisticated design software (like Adobe Illustrator or Sketch) to export to this file type. Or you can find them in many of the icon libraries available on the web. As the name states, these files are vector based, so unlike any of the file types above they can be scaled up beyond their original size without experiencing any loss in image quality or bloating the file size. They\u2019re also another file type that supports transparency. But SVGs aren\u2019t built to handle the level of detail you see in photographs, hillshade layers, or complex artwork.<\/p>\n"},{"acf_fc_layout":"blockquote","content":" You\u2019ll want to choose the file type that best aligns with what you need your image to do.<\/p>\n"},{"acf_fc_layout":"content","content":" Ok, so that\u2019s what<\/em> each file type is, but when<\/em> do you use them? Again, it depends on your goal for that image. It\u2019s probably more helpful to break this down by common use cases:<\/p>\n You want to show off a breathtaking photograph or awe-inspiring piece of art.<\/strong> These will have lots of colors and fine details, and you don\u2019t want to diminish any of that great work! A JPG<\/strong> will give you the crispest image for the smallest file size\u2014more on this in a bit\u2014so that should be your go-to image type. See how beautifully they display the landscape and wildlife images in this story<\/a>?<\/p>\n You have a static map with labels or annotations that contain key information.<\/strong> Now we\u2019re getting into PNG<\/strong> territory. Why? Because they\u2019re lossless. The story builder works hard to ensure readers don\u2019t have to wait long for an image to load, so it does some magic behind the scenes to optimize image delivery, which usually involves a bit of image compression. Because PNGs are lossless, this compression won\u2019t adversely affect extremely fine elements like text, lines, or arrows; those could<\/em> start to get a bit blurry if the image was a JPG. For this story<\/a>, the annotated maps were exported as PNGs for that very reason.<\/p>\n You have an infographic or chart that adds depth to your narrative. <\/strong>Depending on the complexity of the graphic, you have options here. PNGs<\/strong> will serve you well for the lossless qualities described above, and their support for transparent backgrounds will make it easier to seamlessly integrate them into a story\u2019s visual language. SVGs <\/strong>will do the same, but with an even smaller file size. If the graphic only contains a handful of colors, a GIF<\/strong> could also suffice. The charts in this story<\/a> are all PNGs, as are the map legends.<\/p>\n You have a series of static maps or charts that, when animated sequentially, show important trends or changes over time.<\/strong> As you likely guessed from the keyword \u201canimated,\u201d GIFs<\/strong> are the way to go in this instance. You\u2019ll need software that can help you turn the static images into frames of a GIF (Adobe Photoshop can do this, but there are myriad free online tools you can try, too). This animated map technique is used to great effect in the livestock density visualization shown here<\/a>.<\/p>\n
"},{"ID":6331,"user_firstname":"Mark","user_lastname":"Harrower","nickname":"Mark Harrower","user_nicename":"mark-harrower","display_name":"Mark Harrower","user_email":"MHarrower@esri.com","user_url":"","user_registered":"2018-03-02 00:18:17","user_description":"Map nerd. Passionate about great design, teaching, and doing cool things with data.","user_avatar":"
"}],"related_articles":[{"ID":691962,"post_author":"6331","post_date":"2020-01-02 10:16:48","post_date_gmt":"2020-01-02 18:16:48","post_content":"","post_title":"Getting the most from animated maps","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"getting-the-most-from-animated-maps","to_ping":"","pinged":"","post_modified":"2020-01-02 10:19:21","post_modified_gmt":"2020-01-02 18:19:21","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=691962","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":881251,"post_author":"32401","post_date":"2020-06-09 16:07:24","post_date_gmt":"2020-06-09 23:07:24","post_content":"","post_title":"Breaking the sound barrier in ArcGIS StoryMaps","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"breaking-the-sound-barrier-in-arcgis-storymaps","to_ping":"","pinged":"","post_modified":"2026-03-03 12:57:44","post_modified_gmt":"2026-03-03 20:57:44","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=881251","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":693022,"post_author":"8672","post_date":"2020-01-06 09:36:37","post_date_gmt":"2020-01-06 17:36:37","post_content":"","post_title":"Using graphics to enhance your storytelling","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"using-graphics-to-enhance-your-storytelling","to_ping":"","pinged":"","post_modified":"2020-02-24 07:14:54","post_modified_gmt":"2020-02-24 15:14:54","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=693022","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/card_banner_images.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/02\/1920banner_images.jpg"},"yoast_head":"\n