{"id":3915,"date":"2023-11-10T21:07:35","date_gmt":"2023-11-10T21:07:35","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=3915"},"modified":"2024-01-09T21:55:19","modified_gmt":"2024-01-09T21:55:19","slug":"filetypes","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/","title":{"rendered":"fileTypes"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"371\" data-attachment-id=\"150\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/cody_am_alpha\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" data-orig-size=\"371,371\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cody_am_alpha\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" alt=\"\" class=\"wp-image-150\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png 371w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-100x100.png 100w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/\">2 | a2z<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"1205\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/type-drawing\/wc-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" alt=\"\" class=\"wp-image-1205\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-100x100.png 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>fileTypes<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f10b3e52943\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f10b3e52943\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#File_types_and_asset_management_for_web_graphics\" >File types and asset management for web graphics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Graphic_file_types\" >Graphic file types<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Photographs\" >Photographs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Icons_line_art_and_flat_graphics\" >Icons, line art, and flat graphics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Screen-captures\" >Screen-captures<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#AVIF_the_new_kid_on_the_block\" >AVIF: the new kid on the block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Dynamic_and_interactive_graphics_and_other_multi-media_file_types\" >Dynamic and interactive graphics and other multi-media file types<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#File_type_conversion\" >File type conversion<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Organizing_files_in_Bridge\" >Organizing files in Bridge<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Download_the_zip_file\" >Download the .zip file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Locating_files\" >Locating files<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#File_path\" >File path<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Preview_and_Metadata\" >Preview and Metadata<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Sorting_files\" >Sorting files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Batch_renaming\" >Batch renaming<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#Repairing_archived_file_names\" >Repairing archived file names<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"has-text-align-center\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/textures.zip\">Download sample file here<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"File_types_and_asset_management_for_web_graphics\"><\/span>File types and asset management for web graphics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>There are about 2000 multimedia assets embedded or linked in newMediaWiki that help it tell the tale of digital media for artists. Each one has an extension that lets the computer know what file type the asset is and what to do with it. These file types include JPG, PNG, TIFF, GIF, SVG, AI, PSD, INDD, MB, MOV, MP4, MP3, M4V, OGG, FLA, ZIP, HTML, CSS, JS, TXT, OBJ, MTL, PRPROJ, PDF, F3D&#8230; the list leaves one breathless. And this is on a website in a content management system, so on the back end, there are many auto-generated support files including PHP, FRM, MYD, JSON, CSV, and OMG.<\/p>\n\n\n\n<p>OK. We&#8217;re just pulling your leg about OMG, but you might be saying that right about now.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"216\" height=\"216\" data-attachment-id=\"4037\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/wc-4\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" data-orig-size=\"216,216\" data-comments-opened=\"1\" data-image-meta=\"[]\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" alt=\"\" class=\"wp-image-4037\" style=\"width:800px\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p><em>We&#8217;ll see iterations of this image in many different file types below.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In a world of this enormity, the multimedia artist needs tools and strategies for managing files and file types, in addition to making informed decisions about using them.&nbsp;Fortunately, web standards and the current state of the browser art helps define our choices.<\/p>\n\n\n\n<p>This title is primarily a reference \u2014 but with a little mini-exercise thrown in. We&#8217;ll use a program called <strong>Adobe Bridge<\/strong>, which is now <a href=\"https:\/\/prodesigntools.com\/free-adobe-bridge-cc.html\">free to use without an Adobe subscription<\/a>. This will help primarily with managing web graphic assets, defined here as images, both static and animated. The management of other kinds of assets \u2014 video, audio, HTML \u2014 will be covered in other exercises.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Graphic_file_types\"><\/span>Graphic file types<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the tables below we review the graphic file types that are in use on the web. Each has a place in the ecosystem and are recommended by the W3C. This is by no means an exhaustive list of file types that support graphics. We don&#8217;t list file types that cannot be readily processed in a browser: PDF, EPS, TIFF, PSD and more are graphic files that are appropriate for file sharing, content editing, or other non-web purposes. <\/p>\n\n\n\n<p>You may click on each image below to open each in new browser window at full scale. Look for differences such as scaling, transparency, anti-aliasing at edges, and so forth.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Photographs\"><\/span>Photographs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#jpeg_joint_photographic_experts_group_image\" target=\"_blank\" rel=\"noreferrer noopener\">JPEG<\/a> and<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#webp_image\" target=\"_blank\" rel=\"noreferrer noopener\"> WebP<\/a> are excellent choices for photographs, which do quite well with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Lossy_compression\" target=\"_blank\" rel=\"noreferrer noopener\">lossy compression<\/a>. JPEG is one of the oldest graphic file types and is therefore more compatible, but WebP offers better compression. To maximize quality and minimize download time, consider providing both <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#providing_image_fallbacks\" target=\"_blank\" rel=\"noreferrer noopener\">using a coding fallback trick<\/a>, with WebP as the first choice and JPEG as the second. If wide compatibility is the goal, JPEG still remains the safest choice.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"1204\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/type-drawing\/wcb\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb.jpg\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wcb\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb.jpg\" alt=\"\" class=\"wp-image-1204\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb.jpg 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb-300x300.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb-150x150.jpg 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb-768x768.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wcb-100x100.jpg 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.jpg | .jpeg<\/strong><\/p>\n\n\n\n<p><em>Joint Photographic Experts Group | Lossy compression bitmap EXIF or JFIF file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">No<\/mark><\/strong> transparency<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">No intrinsic animation, but can be extrinsically animated as an object in HTML5<\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"4089\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/wc-5\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" alt=\"\" class=\"wp-image-4089\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-300x300.webp 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-150x150.webp 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-768x768.webp 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-100x100.webp 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a href=\"https:\/\/williamcromar.com\/images\/wc_anim.webp\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" style=\"  display: block;\n  margin-left: auto;\n  margin-right: auto;\" src=\"https:\/\/williamcromar.com\/images\/wc_anim.webp\" alt=\"webp_anim\" width=\"112\" height=\"112\"><\/a>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.webp<\/strong><\/p>\n\n\n\n<p><em>Web Picture Format | Lossless compression&nbsp;bitmap file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transparency with opacity for anti-aliasing<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Intrinsic animation supported<\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Icons_line_art_and_flat_graphics\"><\/span>Icons, line art, and flat graphics<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For small images like icons, use a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Lossless_compression\" target=\"_blank\" rel=\"noreferrer noopener\">lossless format<\/a>. Lossless WebP is ideal for this purpose, but <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#png_portable_network_graphics\" target=\"_blank\" rel=\"noreferrer noopener\">PNG<\/a> is a more compatible choice (unless you use the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#providing_image_fallbacks\">fallback trick<\/a>). If the icon can be created with vector graphics, use the highly scalable&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#svg_scalable_vector_graphics\">SVG<\/a>. An icon created with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Indexed_color\" target=\"_blank\" rel=\"noreferrer noopener\">indexed compression<\/a> can use the time-honored <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#gif_graphics_interchange_format\" target=\"_blank\" rel=\"noreferrer noopener\">GIF<\/a> file type. PNG also offers an indexed compression known as PNG-8. <\/p>\n\n\n\n<p>Larger line art, diagrams, and flat graphics work superbly with these file types. SVG is optimal, otherwise use PNG.<\/p>\n\n\n\n<p>All of these support transparency. PNG can easily handle pixel opacity at edges for <a href=\"https:\/\/www.adobe.com\/creativecloud\/photography\/discover\/anti-aliasing.html\" target=\"_blank\" rel=\"noreferrer noopener\">anti-aliasing<\/a> purposes. SVG is scalable and needs no anti-aliasing. GIF can only create a 100% or 0% pixel opacity, so unsightly jagged edges are often unavoidable.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"1205\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/type-drawing\/wc-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" alt=\"\" class=\"wp-image-1205\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-100x100.png 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"4086\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/wc_anim_apng\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc_anim_apng\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" alt=\"\" class=\"wp-image-4086\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-100x100.png 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.png&nbsp;|&nbsp;.apng<\/strong><\/p>\n\n\n\n<p><em>Portable Network Graphic | Lossless compression bitmap file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transparency with opacity for anti-aliasing<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Intrinsic animation supported (known as APNG)<\/mark><\/strong><\/li>\n\n\n\n<li>Index compression option (PNG-8)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"216\" height=\"216\" data-attachment-id=\"4037\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/wc-4\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" data-orig-size=\"216,216\" data-comments-opened=\"1\" data-image-meta=\"[]\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.svg\" alt=\"\" class=\"wp-image-4037\" style=\"object-fit:cover;width:112px;height:112px\"\/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.svg<\/strong><\/p>\n\n\n\n<p><em>Scalable Vector Graphic | Vector file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Scalable<\/mark><\/strong> web images<\/li>\n\n\n\n<li>Transparency<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">No intrinsic animation, but can be extrinsically animated as an object in HTML5<\/mark><\/strong><\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc3.gif\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"4114\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/wc3\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc3.gif\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc3.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc3.gif\" alt=\"\" class=\"wp-image-4114\" style=\"object-fit:cover;width:112px;height:112px\"\/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim2.gif\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"4087\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/wc_anim2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim2.gif\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc_anim2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim2.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim2.gif\" alt=\"\" class=\"wp-image-4087\" style=\"object-fit:cover;width:112px;height:112px\"\/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.gif<\/strong><\/p>\n\n\n\n<p><em>Graphics Interchange Format | Lossless indexed color (256 limit)&nbsp;bitmap file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transparency but without anti-aliasing<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Intrinsic animation supported<\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Screen-captures\"><\/span>Screen-captures<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You&#8217;ll find a lot of screen-captures in tutorial publications like this wiki. There is often high detail and text in screen-caps, and this can become quite fuzzy using a lossy compression like JPEG. So <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#png_portable_network_graphics\" target=\"_blank\" rel=\"noreferrer noopener\">PNG<\/a> is the solid choice here. However, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#webp_image\" target=\"_blank\" rel=\"noreferrer noopener\">WEBP<\/a> can offer detail with better compression if performance is the goal.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"1205\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/type-drawing\/wc-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png\" alt=\"\" class=\"wp-image-1205\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc.png 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/wc-100x100.png 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"4086\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/wc_anim_apng\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc_anim_apng\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png\" alt=\"\" class=\"wp-image-4086\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng.png 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc_anim_apng-100x100.png 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.png&nbsp;|&nbsp;.apng<\/strong><\/p>\n\n\n\n<p><em>Portable Network Graphic | Lossless compression bitmap file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transparency<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Intrinsic animation supported (known as APNG)<\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"904\" data-attachment-id=\"4089\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/wc-5\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" data-orig-size=\"904,904\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp\" alt=\"\" class=\"wp-image-4089\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc.webp 904w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-300x300.webp 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-150x150.webp 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-768x768.webp 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wc-100x100.webp 100w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a href=\"https:\/\/williamcromar.com\/images\/wc_anim.webp\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" style=\"  display: block;\n  margin-left: auto;\n  margin-right: auto;\" src=\"https:\/\/williamcromar.com\/images\/wc_anim.webp\" alt=\"webp_anim\" width=\"112\" height=\"112\"><\/a>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.webp<\/strong><\/p>\n\n\n\n<p><em>Web Picture Format | Lossless compression&nbsp;bitmap file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transparency<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Intrinsic animation supported<\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"AVIF_the_new_kid_on_the_block\"><\/span>AVIF: the new kid on the block<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Introduced in 2019, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#avif_image\" target=\"_blank\" rel=\"noreferrer noopener\">AVIF<\/a> promises to be an incredible game-changer for image content. It features animation, transparency with anti-aliasing, extremely high compression without loss of image quality&#8230;  kind of the Holy Grail of all desired attributes in one file type! Use it with the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#providing_image_fallbacks\">fallback trick<\/a> to  avoid evolving compatibility limitations that will eventually iron themselves out in the coming years.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#dddddd;flex-basis:25%\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a href=\"https:\/\/williamcromar.com\/images\/wc_anim.webp\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" style=\"  display: block;\n  margin-left: auto;\n  margin-right: auto;\" src=\"https:\/\/williamcromar.com\/images\/wc.avif\" alt=\"avif\" width=\"112\" height=\"112\"><\/a>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a href=\"https:\/\/williamcromar.com\/images\/wc_anim.webp\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" style=\"  display: block;\n  margin-left: auto;\n  margin-right: auto;\" src=\"https:\/\/williamcromar.com\/images\/wc_anim2.avif\" alt=\"avifanim\" width=\"112\" height=\"112\"><\/a>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p><strong>.avif<\/strong><\/p>\n\n\n\n<p><em>AV1 Image File Format | Lossless compression&nbsp;bitmap file<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transparency<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Intrinsic animation supported<\/mark><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dynamic_and_interactive_graphics_and_other_multi-media_file_types\"><\/span>Dynamic and interactive graphics and other multi-media file types<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The <strong>HTML5 Canvas<\/strong> environment supports animated and interactive graphics in an HTML5\/CSS3\/JS context, and will be covered extensively in an upcoming&nbsp;project. So there&#8217;s really not an intrinsically interactive file type: all the files listed above can be made interactive through code. But there used to be one&#8230;<\/p>\n\n\n\n<p>Why is&nbsp;<strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/SWF\" target=\"_blank\" rel=\"noreferrer noopener\">SWF<\/a><\/strong>, the old Flash file type, not included in this list? Adobe declared an end of life to Flash as of December 2020, an occurrence we discuss in a future project. We no longer teach SWF creation as an obsolete skill set. However, we do still love to play&nbsp;the old Flash<strong> <a href=\"https:\/\/web-gaming.fandom.com\/wiki\/Helicopter_Game\" target=\"_blank\" rel=\"noreferrer noopener\">helicopter game<\/a><\/strong>, so here&#8217;s an&nbsp;<strong><a href=\"https:\/\/www.addictinggames.com\/clicker\/helicopter-game\" target=\"_blank\" rel=\"noreferrer noopener\">HTML5 version<\/a><\/strong>. If you want the actual SWF experience, it&#8217;s still possible: install the <strong><a href=\"https:\/\/ruffle.rs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ruffle Flash player emulator<\/a><\/strong> on your browser and visit an <strong><a href=\"https:\/\/web.archive.org\/web\/20020604072320\/http:\/\/www.seethru.co.uk\/zine\/south_coast\/helicopter_game.htm\" target=\"_blank\" rel=\"noreferrer noopener\">old SWF embed like this one<\/a><\/strong>.<\/p>\n\n\n\n<p>Our alphabet project will not be using file types relating to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Video_codecs\" target=\"_blank\" rel=\"noreferrer noopener\">video<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Audio_codecs\" target=\"_blank\" rel=\"noreferrer noopener\">audio<\/a>,  <a href=\"https:\/\/en.wikipedia.org\/wiki\/WebGL\" target=\"_blank\" rel=\"noreferrer noopener\">3D<\/a>, <a href=\"https:\/\/en.wikipedia.org\/wiki\/WebXR#History\" target=\"_blank\" rel=\"noreferrer noopener\">virtual reality<\/a>, or <a href=\"https:\/\/en.wikipedia.org\/wiki\/WebXR\" target=\"_blank\" rel=\"noreferrer noopener\">augmented reality<\/a>. However, we will explore these in other projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"File_type_conversion\"><\/span>File type conversion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In the Adobe ecosystem, <strong>Illustrator<\/strong> and <strong>Photoshop<\/strong> are the principle image creation tools, while the vector-based <strong>Inkscape<\/strong> and raster-based <strong>Gimp<\/strong> are good open-source alternatives. <\/p>\n\n\n\n<p>A vector program can easily generate SVG files, and can also export vector art to raster file types like JPG or PNG. Photoshop can not only handle those, but can also generate WEBP and GIF.<\/p>\n\n\n\n<p>To create vector art from a raster file is a little less straightforward. Embed a raster image in Illustrator, then use the Image Trace function to generate a tracing of the raster image. Expand the tracing, and you&#8217;ve created vector imagery. This can be saved as an SVG. This works better for relatively flat graphics than it does for photography. Photos can be embedded in an SVG but this is not a light-weight solution and should be avoided. Use an HTML5 Canvas structure if you want to combine raster and vector elements.<\/p>\n\n\n\n<p>In some instances, graphic software has not kept up with file type development. For example, Photoshop easily creates an animated GIF,  but an animated WEBP is another story. And Photoshop does not natively support AVIF, though <a href=\"https:\/\/www.free-codecs.com\/guides\/how_to_open_avif_files_in_photoshop_using_the_avif_format_plugin.htm\" target=\"_blank\" rel=\"noreferrer noopener\">there is a plug-in you can download and install<\/a>.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/www.pcmag.com\/encyclopedia\/term\/browser-based-application\" target=\"_blank\" rel=\"noreferrer noopener\">browser-based application<\/a> space is actually a bit more nimble when it comes to keeping up with file conversion. A search using keywords like &#8220;webp to png conversion&#8221; will yield a dozen sites that cater to a specific conversion type. But my favorite website in the world (besides <strong>newMediaWiki<\/strong>, of course!) is <strong><a href=\"https:\/\/ezgif.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">EZGif.com<\/a><\/strong>. All of the file type samples above were converted from an original SVG artwork into JPG, WEBP, PNG, GIF, and AVIF file types at EZGif, all done effortlessly in their intuitive interface in less than a half hour \u2014&nbsp;and that includes the animated WEBP, PNG, GIF, and AVIF as well!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Organizing_files_in_Bridge\"><\/span>Organizing files in Bridge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>While this exercise takes a less visual-art direction, the value of organization is not to be underestimated. Finding&nbsp;files on your hard drive, especially as hard disks become more spacious,&nbsp;is an essential working habit for which you should have a rigorous practice&nbsp;already in place before you make the transformation from an amateur or student&nbsp;to a professional. Here we will use <strong>Adobe Bridge<\/strong> to view, sort, and rename files. While you can certainly do these tasks inside the Finder or&nbsp;Desktop area of your computer, the advantage to using Bridge is two-fold:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You will learn a &#8220;batch&#8221; process that enables you to rename many files at once.<\/li>\n\n\n\n<li>We will revisit Adobe Bridge in a future exercise when we learn to&nbsp;automate tasks in Photoshop and deploy them in Bridge.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"865\" data-attachment-id=\"4130\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge.png\" data-orig-size=\"865,865\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge.png\" alt=\"\" class=\"wp-image-4130\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge.png 865w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge-100x100.png 100w\" sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Download_the_zip_file\"><\/span>Download the .zip file<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We use a set of 12 images in a folder for this exercise. Download the .zip file at the top of this page to use it. Once you unzip the folder, called <strong>textures<\/strong>, place it on your Desktop.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Locating_files\"><\/span>Locating files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Launch Adobe Bridge by clicking on its icon in the <strong>Dock<\/strong> or by double-clicking on the application from <strong>Macintosh Hard Drive &gt; Applications &gt; Adobe &gt; Adobe Bridge(folder) &gt; Adobe Bridge(application)<\/strong>.<\/p>\n\n\n\n<p>Choose <strong>Essentials<\/strong> from the <strong>Application<\/strong> bar or choose <strong>Window &gt; Workspace &gt; Essentials<\/strong> to view Bridge in <strong>Essentials<\/strong> mode. The first thing to do is locate your files. Expand the Desktop folder inside the <strong>Folders<\/strong> panel on the left side of Bridge by clicking on the arrow to the left of the folder icon. Inside the Desktop folder, the<strong> textures<\/strong> folder is visible. Double-click this folder and its contents are viewable in the<strong> Content<\/strong> panel at the center&nbsp;of the Bridge interface.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"File_path\"><\/span>File path<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Notice the file path to this folder towards the top left side of Bridge, located in the <strong>Path Bar<\/strong>. If you don\u2019t see this, choose <strong>Window &gt; Path Bar<\/strong> to hide it, then choose<strong> Window &gt; Path Bar<\/strong> to show it again. In our sample, the path is <strong>Computer &gt; Macintosh HD &gt; Users &gt; wrc11 &gt; Desktop &gt; textures<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" data-attachment-id=\"4134\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge01\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01.png\" data-orig-size=\"3452,2142\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-1024x635.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-1024x635.png\" alt=\"\" class=\"wp-image-4134\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-1024x635.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-768x477.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-1536x953.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge01-2048x1271.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Change the size of the thumbnail view of your images by using the slider beneath the <strong>Content<\/strong> panel towards the right of the interface. Notice the scale of your thumbnails magnifies as you drag the slider to the right and reduces when you drag the slider to the left.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" data-attachment-id=\"4135\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge02\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02.png\" data-orig-size=\"3452,2142\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-1024x635.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-1024x635.png\" alt=\"\" class=\"wp-image-4135\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-1024x635.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-768x477.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-1536x953.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge02-2048x1271.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preview_and_Metadata\"><\/span>Preview and Metadata<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Select a thumbnail image by clicking on it <strong>just one time<\/strong> in Bridge. If you double-click the thumbnail you will open the file in Photoshop. For these exercises we plan to stay in Bridge, so if you end up in Photoshop you can click on the Bridge icon in the Dock to return. Get a closer look at a selected image area by clicking on it from the <strong>Preview<\/strong> panel at the top right of the screen. Notice that as you mouse over the Preview panel the <strong>Zoom<\/strong> tool is active. Click once to zoom in on an area, then drag the mouse around to modify your view. Click again to zoom out, or return to normal viewing mode.<\/p>\n\n\n\n<p>The <strong>Metadata<\/strong> panel displays important information about the file, including camera information if it is available. If you are looking at the images included in the textures <strong>folder<\/strong> you will notice the camera information including the f-stop, shutter speed, metering method, white balance setting, and ISO rating are all recorded in the top left box beneath the Metadata panel name. In the top right box you can see the pixel dimensions, file size, resolution, and color mode. In the<strong> File Properties<\/strong> area, more information about the file is included, such as file name, file type (called<strong> Document Type<\/strong>), date created and modified, and more.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"1024\" data-attachment-id=\"4137\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge03a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a.png\" data-orig-size=\"867,1834\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge03a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-484x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-484x1024.png\" alt=\"\" class=\"wp-image-4137\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-484x1024.png 484w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-142x300.png 142w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-768x1625.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-726x1536.png 726w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a-300x635.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge03a.png 867w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sorting_files\"><\/span>Sorting files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>There are many ways to sort files in Bridge. We will quickly sort files by using a pull-down list of modifiers.<\/p>\n\n\n\n<p>Click on the <strong>Sort by Filename<\/strong> pull-down list. Since our files were already sorted by their file names, nothing will happen.&nbsp;<\/p>\n\n\n\n<p>Click on other pull-down menu options you may notice that files will reorganize in Bridge. It is important to note that although your view in Bridge may change, the files remain in the folder on the hard drive. From the Desktop or alternative folder view, the files can always be viewed in your operating system using the View menu from within the Finder.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"1024\" data-attachment-id=\"4138\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge04\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04.png\" data-orig-size=\"866,1037\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge04\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04-855x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04-855x1024.png\" alt=\"\" class=\"wp-image-4138\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04-855x1024.png 855w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04-251x300.png 251w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04-768x920.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04-300x359.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge04.png 866w\" sizes=\"auto, (max-width: 855px) 100vw, 855px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Batch_renaming\"><\/span>Batch renaming<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Renaming files is easy in the Finder or on the Desktop, but renaming a whole folder of, say, 100 files is a dreadful chore. This job is a breeze in Bridge.<\/p>\n\n\n\n<p>Select all of the files in the <strong>texture<\/strong> folder in Bridge by pressing the key command<strong> Command+A<\/strong> or by clicking one time on the first thumbnail image, then holding the <strong>Shift<\/strong> key while clicking one time on the last thumbnail image.&nbsp;While files are selected, locate the <strong>Refine<\/strong> icon at upper left and choose <strong>Batch Rename<\/strong>&nbsp;from the dropout menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" data-attachment-id=\"4139\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge05\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05.png\" data-orig-size=\"3360,2051\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge05\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-1024x625.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-1024x625.png\" alt=\"\" class=\"wp-image-4139\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-1024x625.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-300x183.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-768x469.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-1536x938.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge05-2048x1250.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>In the <strong>Batch Rename<\/strong> dialog box you can set the pattern for new file names. Under the New Filenames field, we used the first two pull-down menus to set the name to a text value that will remain consistent in all 12 files, followed by a two-digit sequence number that will change, from 01 to 12. We delete any other menus by using the <strong>\u2013<\/strong> sign to their right. If you accidentally delete too many, you can add one by hitting <strong>+<\/strong>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"850\" data-attachment-id=\"4142\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge06\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06.png\" data-orig-size=\"1816,1508\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge06\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06-1024x850.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06-1024x850.png\" alt=\"\" class=\"wp-image-4142\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06-1024x850.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06-300x249.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06-768x638.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06-1536x1275.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge06.png 1816w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>The text value will always remain the same, so it is important to use a name that is important to the group of files. For this, we simply used <strong>neworleans-texture<\/strong> as the name since all the files in are images of textures taken in New Orleans. Observe the results after hitting <strong>Rename<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" data-attachment-id=\"4143\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/bridge07\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07.png\" data-orig-size=\"3452,2142\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bridge07\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-1024x635.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-1024x635.png\" alt=\"\" class=\"wp-image-4143\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-1024x635.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-768x477.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-1536x953.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bridge07-2048x1271.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you go to the folder window on the Desktop, you&#8217;ll see the renamed files!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Repairing_archived_file_names\"><\/span>Repairing archived file names<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In a work environment, it&#8217;s common to generate rich filenames so that one can easily archive images and know what their contents are without having to open them. Many situations in web design or animation, require you to work with large groups of files. Including such information as a date, a project name, and an author or team name is useful. In our courses, we recommend a minimum naming rubric like so&#8230;<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong><em>20XX_your-name_project-name_YY.ext<\/em><\/strong><\/p>\n\n\n\n<p>&#8230;where XX is the year and YY is the number of a file in a sequence. The underscores and dashes replace spaces and should be included in any text field. Good web design praxis also includes avoiding capitals (or using <strong>camelBack<\/strong> case), special characters (anything that&#8217;s <strong>not<\/strong> a letter, a number, or a _ or \u2013).<\/p>\n\n\n\n<p>If you&#8217;ve been lax with good file naming conventions (and everyone has a tendency to be, including me!), take some time with Bridge to clean up your archive by batch-renaming any files that aren&#8217;t externally referenced by name (examples: a group of images in an InDesign project folder, or a web directory with images referenced in code). What would have taken a day might take an hour or less with Bridge.<\/p>\n\n\n\n<p>Remember: no one searching for an archived file ever regretted a batch-renaming session!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 2 | a2z fileTypes Download sample file here File types and asset management for web graphics There are about 2000 multimedia assets embedded or linked in newMediaWiki that help it tell the tale of digital media for artists. Each one has an extension that lets the computer know what file type the asset&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-3915","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-references"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>fileTypes - newMediaWiki<\/title>\n<meta name=\"description\" content=\"File types: it&#039;s not the most exciting part of digital design, but knowing how to choose and manage file types is an essential skill.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"fileTypes - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"File types: it&#039;s not the most exciting part of digital design, but knowing how to choose and manage file types is an essential skill.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-10T21:07:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T21:55:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"fileTypes\",\"datePublished\":\"2023-11-10T21:07:35+00:00\",\"dateModified\":\"2024-01-09T21:55:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/\"},\"wordCount\":2559,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"References\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/\",\"name\":\"fileTypes - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-11-10T21:07:35+00:00\",\"dateModified\":\"2024-01-09T21:55:19+00:00\",\"description\":\"File types: it's not the most exciting part of digital design, but knowing how to choose and manage file types is an essential skill.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/filetypes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"fileTypes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"fileTypes - newMediaWiki","description":"File types: it's not the most exciting part of digital design, but knowing how to choose and manage file types is an essential skill.","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:\/\/williamcromar.com\/newmediawiki\/filetypes\/","og_locale":"en_US","og_type":"article","og_title":"fileTypes - newMediaWiki","og_description":"File types: it's not the most exciting part of digital design, but knowing how to choose and manage file types is an essential skill.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/","og_site_name":"newMediaWiki","article_published_time":"2023-11-10T21:07:35+00:00","article_modified_time":"2024-01-09T21:55:19+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"fileTypes","datePublished":"2023-11-10T21:07:35+00:00","dateModified":"2024-01-09T21:55:19+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/"},"wordCount":2559,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","References"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/","url":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/","name":"fileTypes - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-11-10T21:07:35+00:00","dateModified":"2024-01-09T21:55:19+00:00","description":"File types: it's not the most exciting part of digital design, but knowing how to choose and manage file types is an essential skill.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/filetypes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/filetypes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"fileTypes"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=3915"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3915\/revisions"}],"predecessor-version":[{"id":5921,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3915\/revisions\/5921"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=3915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=3915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=3915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}