{"id":3917,"date":"2023-11-10T21:08:46","date_gmt":"2023-11-10T21:08:46","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=3917"},"modified":"2024-01-09T21:58:12","modified_gmt":"2024-01-09T21:58:12","slug":"webgraphics","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/","title":{"rendered":"webGraphics"},"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=\"386\" height=\"386\" data-attachment-id=\"3809\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/webgraphics\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png\" data-orig-size=\"386,386\" 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=\"webgraphics\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png\" alt=\"\" class=\"wp-image-3809\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png 386w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics-100x100.png 100w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>webGraphics<\/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-69f10b2d0973c\" 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-69f10b2d0973c\"  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\/webgraphics\/#Creating_web-ready_graphics\" >Creating web-ready 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\/webgraphics\/#The_evolving_role_of_graphic_content_on_the_web\" >The evolving role of graphic content on the web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#From_digital_input_to_web_ready\" >From digital input to web ready<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#Resample_the_image\" >Resample the image<\/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\/webgraphics\/#Unsharp_Mask\" >Unsharp Mask<\/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\/webgraphics\/#Save_for_Web\" >Save for Web<\/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\/webgraphics\/#Compare_optimization\" >Compare optimization<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#JPEG_versus_GIF_versus_PNG\" >JPEG versus GIF versus PNG<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#Photo_compression_comparison\" >Photo compression comparison<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#Graphic_compression_comparison\" >Graphic compression comparison<\/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\/webgraphics\/#Recap\" >Recap<\/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\/web-ready.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=\"Creating_web-ready_graphics\"><\/span>Creating web-ready 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>Now that we know about graphic file types, how do we get a graphic image out of, say, TIFF, PSD, or AI and into a web-appropriate file type? How do we make decisions about resizing files, and most importantly, proper choices for file compression? How do we know when it&#8217;s best to select JPEG, GIF, PNG, WEBP, or AVIF?<\/p>\n\n\n\n<p>This exercise will explore these questions for files without transparency.<\/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%\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"386\" height=\"386\" data-attachment-id=\"3809\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/webgraphics\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png\" data-orig-size=\"386,386\" 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=\"webgraphics\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png\" alt=\"\" class=\"wp-image-3809\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics.png 386w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/webgraphics-100x100.png 100w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>The GIF 256 index color palette<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_evolving_role_of_graphic_content_on_the_web\"><\/span>The evolving role of graphic content on the web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The <strong><a href=\"https:\/\/archive.org\/web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wayback Machine<\/a><\/strong> is an archive of web pages dating back to the early 1990s. We used the Wayback Machine to view web sites from the 1990s to compare them with the same sites today (2023). Notice how the aesthetics of web graphics has changed over two decades. These new aesthetics are possible due to increased network speed, changes in programming techniques, and the evolution of information design. Greater connection speeds result in the ability to upload and download larger files. Graphics are larger, more frequent, and more colorful on current web sites than the graphics made for the web in the 1990s. The presence of motion graphics, once the exception even a decade ago, is now the rule.<\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4158\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/apple1997\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997.png\" data-orig-size=\"1850,1850\" 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=\"apple1997\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-1024x1024.png\" alt=\"\" class=\"wp-image-4158\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-1536x1536.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple1997.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Apple.com in 1997<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4159\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/apple2023\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023.png\" data-orig-size=\"1900,1900\" 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=\"apple2023\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-1024x1024.png\" alt=\"\" class=\"wp-image-4159\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-1536x1536.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/apple2023.png 1900w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/www.apple.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apple.com<\/a> in 2023<\/em><\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4161\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/pma1999\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999.png\" data-orig-size=\"1900,1900\" 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=\"pma1999\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-1024x1024.png\" alt=\"\" class=\"wp-image-4161\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-1536x1536.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma1999.png 1900w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Philamuseum.org in 1999<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4160\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/pma2023\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023.png\" data-orig-size=\"1917,1917\" 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=\"pma2023\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-1024x1024.png\" alt=\"\" class=\"wp-image-4160\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-1536x1536.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/pma2023.png 1917w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/philamuseum.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Philamuseum.org<\/a> in 2023<\/em><\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4168\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/cromar-com-2013\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013.png\" data-orig-size=\"1900,1900\" 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=\"cromar-com-2013\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-1024x1024.png\" alt=\"\" class=\"wp-image-4168\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-1536x1536.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2013.png 1900w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>williamcromar.com in 2013<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" data-attachment-id=\"4163\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/cromar-com-2023\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2023.gif\" data-orig-size=\"800,800\" 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=\"cromar-com-2023\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2023.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cromar-com-2023.gif\" alt=\"\" class=\"wp-image-4163\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/williamcromar.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">williamcromar.com<\/a> in 2023<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"From_digital_input_to_web_ready\"><\/span>From digital input to web ready<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The .zip file at the sample file link above contains a photograph and a flat graphic to explore the creation of web-ready graphics below. Download and, in Photoshop, open <strong>seagram_building.jpg<\/strong> from the wiki, or get any image with a good histogram from your digital camera or scanner.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" data-attachment-id=\"4169\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/seagrams01\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01.png\" data-orig-size=\"1522,994\" 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=\"seagrams01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01-1024x669.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01-1024x669.png\" alt=\"\" class=\"wp-image-4169\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01-1024x669.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01-300x196.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01-768x502.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams01.png 1522w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Your experience with Photoshop in <strong>2D Digital Art<\/strong> prepared you to be comfortable changing the tonal range and color of this image. Adjust the tonal range and color to your liking by creating adjustment layers. In our sample, we created two adjustment layers by tweaking <strong>Levels<\/strong> and adjusting <strong>Curves<\/strong> to pull RGB values down from 255 into the 245-250 range.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" data-attachment-id=\"4170\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/seagrams05a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a.png\" data-orig-size=\"1523,1016\" 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=\"seagrams05a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a-1024x683.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a-1024x683.png\" alt=\"\" class=\"wp-image-4170\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a-1024x683.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a-300x200.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a-768x512.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams05a.png 1523w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Save this file as a master copy by choosing <strong>Save As<\/strong> from the file menu, adding <strong>_master<\/strong> to the file name and then choosing TIFF as the file format. We saved ours as<strong> seagram_building_master.tif<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resample_the_image\"><\/span>Resample the image<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\" style=\"flex-basis:50%\">\n<p>The image was taken by a 21-megapixel digital camera, and is much larger than can be displayed on a web site. Choose <strong>Image &gt; Image Size<\/strong> and notice the size of your image in pixels. Check the box next to <strong>Resample:<\/strong> and constrain proportions by enabling the <strong>chain icon<\/strong> between <strong>Width<\/strong> and<strong> Height<\/strong>, then change the <strong>Resolution<\/strong> to<strong> 72<\/strong> and the pixel dimensions so the <strong>Width<\/strong> is no larger than <strong>1600<\/strong> pixels.&nbsp;The only measurement unit relevant to us in this exercise is pixels, as the image will be shown on a platform that also uses pixels.<\/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%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"330\" data-attachment-id=\"4172\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/seagrams06\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams06.png\" data-orig-size=\"666,330\" 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=\"seagrams06\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams06.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams06.png\" alt=\"\" class=\"wp-image-4172\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams06.png 666w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagrams06-300x149.png 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Unsharp_Mask\"><\/span>Unsharp Mask<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Apply an unsharp mask (<strong>Filter &gt; Sharpen &gt; Unsharp Mask<\/strong>). Make sure you have the image layer selected, and not one of the adjustment layers. We used the following settings: <strong>Amount: 25%<\/strong>; <strong>Radius: 0.6px<\/strong>; <strong>Threshold 0 levels<\/strong>. Use these values if you&#8217;re using the <strong>seagrams<\/strong> file, otherwise you may need to change these values for the image you are using.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Save_for_Web\"><\/span>Save for Web<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Choose <strong>File &gt; Export &gt; Save for Web (Legacy)&#8230;<\/strong> . This interface allows you to compress images, flatten layers, and otherwise prepare an image for the web.&nbsp;The <strong>Save for Web<\/strong> dialog has several important parameters to set.&nbsp;A particularly important parameter is the <strong>Optimized<\/strong> file format under the JPEG option. As a general rule, photographic images and images with more than 256 colors are saved as JPEGs. Flat graphic images\u2014images with few colors such as logos and line art\u2014are saved as GIFs or PNGs. Since this image is a photograph, select JPEG from the<strong> Format<\/strong> pull-down menu.&nbsp;Select the <strong>Very High<\/strong> option for a <strong>Quality<\/strong> setting of<strong> 80<\/strong>. Saving a file for the web compresses the saved image into a smaller file size by removing color information and pixel detail. This is called <strong>lossy compression<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Compare_optimization\"><\/span>Compare optimization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Click on the <strong>2-Up tab<\/strong> to show the original image in its native format next to the compressed image. Notice that the original image has a file size of 4.88MB, and the file size of the optimized image is 358.5KB. This is important because the smaller the file size is, the faster the image will download as part of a web page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"752\" data-attachment-id=\"4174\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare01-1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-1.png\" data-orig-size=\"993,752\" 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=\"compare01-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-1.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-1.png\" alt=\"\" class=\"wp-image-4174\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-1.png 993w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-1-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-1-768x582.png 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><\/figure>\n<\/div>\n\n\n<p>Reduce the <strong>Quality<\/strong> to <strong>Low<\/strong>, or <strong>10<\/strong>. Notice how much detail is lost. Visible compression artifacts are introduced into the image. Our file size is much smaller at 44.2KB, but we have compromised too much image quality for the sake of the smaller file size.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4180\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare02\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02.png\" data-orig-size=\"992,752\" 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=\"compare02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02.png\" alt=\"\" class=\"wp-image-4180\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p>Return the <strong>Quality<\/strong> setting to<strong> High<\/strong>, and click the <strong>Save<\/strong> button.&nbsp;If your settings disappear, click on the lower preview window.<\/p>\n\n\n\n<p>Name your file with an underscore and the word \u201cweb.\u201d In our sample we named the file <strong>seagram_building_web.jpg<\/strong>, and save it to the Desktop. Remember web standards when naming files: only use lowercase alphanumerics, underscores, and dashes.&nbsp;<\/p>\n\n\n\n<p>Close and do not save the seagram_building_master.tif that is currently open. Recall we saved the master file before scaling the image and we don\u2019t want to save this smaller version over it.&nbsp;Watch Out: When you open the file and resize it, <strong>it is no longer the master file<\/strong>. This may seem confusing, but it is a situation you will commonly experience when maintaining master files and resized web ready files. There\u2019s nothing stopping you from using <strong>Save As<\/strong> to save your scaled-down master file as well, but it\u2019s probably overkill and could mislead you later into believing it\u2019s the largest version you have.<\/p>\n\n\n\n<p>Open the JPEG you just created in Photoshop, and notice that there are no adjustment layers. By saving for the web, we flattened the image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JPEG_versus_GIF_versus_PNG\"><\/span>JPEG versus GIF versus PNG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We mentioned earlier that a photographic image with many colors is saved as a JPEG file, and a graphic image with few colors and gradients are saved as GIF or PNG. This is generally true for any image that does not contain transparency or an alpha channel for transparency, a case we will study in the <strong>Word Images<\/strong> exercise immediately following this title. Following these rules for full opacity will generally produce better images and smaller file sizes.<\/p>\n\n\n\n<p>In this section we will compare a variety of file types for our photo, and also for a flat graphic derived from an SVG. Both images are of late work done by two former Bauhaus masters: the <strong>Seagram Building<\/strong> in New York by Ludwig Mies van der Rohe in 1958, and the<strong> Farbkreis<\/strong> (Color circle) by Johannes Itten, produced in 1961 \u2014 here interpreted in vector graphic form, from Wikimedia Commons.<\/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 is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" data-attachment-id=\"4181\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/seagram_building_web\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web.jpg\" data-orig-size=\"1600,1067\" 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=\"seagram_building_web\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-1024x683.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-1024x683.jpg\" alt=\"\" class=\"wp-image-4181\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-1024x683.jpg 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-300x200.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-768x512.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-1536x1024.jpg 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Our Seagrams Building photo<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"340\" data-attachment-id=\"4182\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/farbkreis_itten_1961\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.svg\" data-orig-size=\"340,340\" data-comments-opened=\"1\" data-image-meta=\"[]\" data-image-title=\"Farbkreis_Itten_1961\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.svg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.svg\" alt=\"\" class=\"wp-image-4182\" style=\"object-fit:cover\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Johannes Itten, Farbkreis, 1961<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>We&#8217;ll reprise the JPEG analysis from the previous section, adding GIF and PNG trials to complete a full comparison. We will compare two compression levels for both images. In order to see the effects of compression for each case, click or tap on each image to open a full size version in a new tab. Finally, we&#8217;ll tabulate data to compare image quality with file size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Photo_compression_comparison\"><\/span>Photo compression comparison<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In the photo, which starts as an uncompressed TIFF file at 4.88MB, we&#8217;ll use <strong>Save for Web (Legacy)&#8230;<\/strong> to demonstrate that JPEG produces a better image compression at a reasonably smaller file size. To achieve a GIF or PNG of similar file size to our JPEG compressed at 80 for a file size around 360K, we have to compromise quality too much.<\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"752\" data-attachment-id=\"4187\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare01\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01.png\" data-orig-size=\"993,752\" 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=\"compare01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01.png\" alt=\"\" class=\"wp-image-4187\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01.png 993w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare01-768x582.png 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>JPEG<\/strong>: Compression Very High (80),&nbsp;358.5K<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4188\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare02-1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-1.png\" data-orig-size=\"992,752\" 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=\"compare02-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-1.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-1.png\" alt=\"\" class=\"wp-image-4188\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-1.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-1-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare02-1-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>JPEG<\/strong>: Compression Low (10), 44.3K<\/em><\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4189\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare03\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare03.png\" data-orig-size=\"992,752\" 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=\"compare03\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare03.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare03.png\" alt=\"\" class=\"wp-image-4189\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare03.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare03-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare03-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>GIF<\/strong>: Colors 256, Lossy 0, 1004K<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4190\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare04\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare04.png\" data-orig-size=\"992,752\" 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=\"compare04\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare04.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare04.png\" alt=\"\" class=\"wp-image-4190\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare04.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare04-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare04-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>GIF<\/strong>: Colors 256, Lossy 25, 353.3K<\/em><\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4191\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare05\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare05.png\" data-orig-size=\"992,752\" 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=\"compare05\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare05.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare05.png\" alt=\"\" class=\"wp-image-4191\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare05.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare05-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare05-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>PNG<\/strong>: PNG 24, 2.036MB<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4192\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare06\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare06.png\" data-orig-size=\"992,752\" 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=\"compare06\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare06.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare06.png\" alt=\"\" class=\"wp-image-4192\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare06.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare06-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare06-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>PNG<\/strong>: PNG 8, Colors 40, 359K<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Graphic_compression_comparison\"><\/span>Graphic compression comparison<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The flat graphic begins as an SVG file at a hard-to-beat 8K. Nevertheless, you need to substitute a raster file for the vector \u2014 some content management systems may not support SVG, for example.<\/p>\n\n\n\n<p>To create a raster from SVG, go to the menu and select <strong>File &gt; Open&#8230; <\/strong>to find the SVG. Select it in the dialog and press <strong>Open<\/strong>. This opens the <strong>Rasterize SVG Format<\/strong> dialog. The values we selected were <strong>Width<\/strong> and<strong> Height<\/strong> of<strong> 1417 pixels<\/strong> and<strong> Resolution: 300<\/strong>, a file which is roughly equivalent in pixel area to the photo above. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" data-attachment-id=\"4195\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/itten01\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01.png\" data-orig-size=\"1522,994\" 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=\"itten01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01-1024x669.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01-1024x669.png\" alt=\"\" class=\"wp-image-4195\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01-1024x669.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01-300x196.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01-768x502.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten01.png 1522w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This opens to a non-flattened image with transparency, so go to menu <strong>Layer &gt; Flatten Image<\/strong> and you&#8217;ll see an opaque white fill the transparent areas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" data-attachment-id=\"4196\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/itten02\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02.png\" data-orig-size=\"1522,994\" 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=\"itten02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02-1024x669.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02-1024x669.png\" alt=\"\" class=\"wp-image-4196\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02-1024x669.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02-300x196.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02-768x502.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/itten02.png 1522w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Save the file as a TIFF.&nbsp;While the TIFF is open in Photoshop, observe that the application expresses the uncompressed file size as 5.74MB. We&#8217;ll use <strong>Save for Web (Legacy)&#8230;<\/strong> again to analyze the effects of JPEG, GIF, and PNG compression.&nbsp;<\/p>\n\n\n\n<p>JPEG produces awful results, with compression artifacts even at <strong>Very High<\/strong> (80). We won&#8217;t even discuss <strong>Low<\/strong>! In the battle between GIF and PNG, it&#8217;s something of a tossup. Reducing the number of colors in the index for both GIF and the PNG 8 compression method creates very small file sizes of 36.4K and 25.8K respectively.<\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4197\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare07\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare07.png\" data-orig-size=\"992,752\" 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=\"compare07\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare07.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare07.png\" alt=\"\" class=\"wp-image-4197\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare07.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare07-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare07-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>JPEG<\/strong>: Compression Very High (80), 149.8K<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4198\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare08\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare08.png\" data-orig-size=\"992,752\" 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=\"compare08\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare08.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare08.png\" alt=\"\" class=\"wp-image-4198\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare08.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare08-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare08-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>JPEG<\/strong>: Compression Low (10), 44.3K<\/em><\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4199\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare09\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare09.png\" data-orig-size=\"992,752\" 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=\"compare09\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare09.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare09.png\" alt=\"\" class=\"wp-image-4199\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare09.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare09-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare09-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>GIF<\/strong>: Colors 256, Lossy 0, 41.29K<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4200\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare10\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare10.png\" data-orig-size=\"992,752\" 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=\"compare10\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare10.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare10.png\" alt=\"\" class=\"wp-image-4200\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare10.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare10-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare10-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>GIF<\/strong>: Colors 60, Lossy 0, 36.4K<\/em><\/p>\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 is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4201\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare11\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare11.png\" data-orig-size=\"992,752\" 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=\"compare11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare11.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare11.png\" alt=\"\" class=\"wp-image-4201\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare11.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare11-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare11-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>PNG<\/strong>: PNG 24, 74.9K<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"752\" data-attachment-id=\"4202\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/compare12\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare12.png\" data-orig-size=\"992,752\" 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=\"compare12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare12.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare12.png\" alt=\"\" class=\"wp-image-4202\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare12.png 992w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare12-300x227.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/compare12-768x582.png 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><em><strong>PNG<\/strong>: PNG 8, Colors 40, 25.8K<\/em><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>To allow a full comparison, here are the resulting smallest GIF and PNG files from above. If you say you can tell the difference, even when you scale them up, congratulations! You have superhero vision.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4203\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/farbkreis_itten_1961-2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.gif\" data-orig-size=\"1417,1417\" 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=\"Farbkreis_Itten_1961\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-1024x1024.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-1024x1024.gif\" alt=\"\" class=\"wp-image-4203\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-1024x1024.gif 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-300x300.gif 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-150x150.gif 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-768x768.gif 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-100x100.gif 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>GIF<\/strong>: Colors 60, Lossy 0, 36.4K<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"4204\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/farbkreis_itten_1961-3\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.png\" data-orig-size=\"1417,1417\" 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=\"Farbkreis_Itten_1961\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-1024x1024.png\" alt=\"\" class=\"wp-image-4204\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.png 1417w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><em><strong>PNG<\/strong>: PNG 8, Colors 40, 25.8K<\/em><\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recap\"><\/span>Recap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To quickly recap the data and express our final choices, see the table below. <\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">RED<\/mark><\/strong>&nbsp;= A definite NO.&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">AMBER<\/mark><\/strong>&nbsp;= Probably not.&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">GREEN<\/mark><\/strong>&nbsp;= Yes.<\/p>\n\n\n\n<table style=\"width: 100%; background-color: #eeeeee;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"border-color: #ffffff; background-color: #ffffff;\">&nbsp;<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #ffffff;\" colspan=\"2\">\n<p><strong>PHOTO<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/seagram_building_web-150x150.jpg\" alt=\"\" width=\"80\" height=\"80\" \/><\/p>\n<p>4.88MB<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #ffffff;\" colspan=\"2\">\n<p><strong>GRAPHIC<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Farbkreis_Itten_1961.png\" alt=\"\" width=\"80\" height=\"80\" \/><\/p>\n<p>5.74MB<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 20%; text-align: center; border-color: #ffffff; background-color: #dddddd;\" rowspan=\"2\">\n<p>&nbsp;<\/p>\n<p><strong>JPEG<\/strong><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td style=\"width: 20%; text-align: center; border-color: #ffffff; background-color: #8cd98c;\" colspan=\"2\">\n<p>Quality 80<br \/>358.5K<\/p>\n<\/td>\n<td style=\"width: 20%; text-align: center; border-color: #ffffff; background-color: #ff6666;\" colspan=\"2\">Quality 80<br \/>149.8K<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #ff6666;\" colspan=\"2\">\n<p>Quality 10<br \/>44.3K<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #ff6666;\" colspan=\"2\">Quality 10<br \/>39.1K<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center; border-color: #ffffff; width: 20%; background-color: #dddddd;\" rowspan=\"2\">\n<p>&nbsp;<\/p>\n<p><strong>GIF<\/strong><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td style=\"border-color: #ffffff; background-color: #ff6666;\" colspan=\"2\">\n<p style=\"text-align: center;\">Color 256<br \/>Lossy 0<br \/>1004K<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #f3ba41;\" colspan=\"2\">\n<p>Color 256<br \/>Lossy 0<br \/>41.29K<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border-color: #ffffff; background-color: #f3ba41;\" colspan=\"2\">\n<p style=\"text-align: center;\">Color 256<br \/>Lossy 25<br \/>353.3K<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #8cd98c;\" colspan=\"2\">\n<p>Color 64<br \/>Lossy 0<br \/>36.4K<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center; border-color: #ffffff; width: 20%; background-color: #dddddd;\" rowspan=\"2\">\n<p>&nbsp;<\/p>\n<p><strong>PNG<\/strong><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #ff6666;\" colspan=\"2\">\n<p>PNG 24<br \/>2.036MB<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #f3ba41;\" colspan=\"2\">PNG 24<br \/>74.9K<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #f3ba41;\" colspan=\"2\">\n<p>PNG 8<br \/>Color 40<br \/>359K<\/p>\n<\/td>\n<td style=\"text-align: center; border-color: #ffffff; background-color: #8cd98c;\" colspan=\"2\">\n<p>PNG 8<br \/>Color 40<br \/>25.8K<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#cccccc;color:#cccccc\"\/>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-attachment-id=\"2566\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/color-relativity\/df\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/df.jpg\" data-orig-size=\"198,201\" 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;1&quot;}\" data-image-title=\"df\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/df.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/df-150x150.jpg\" alt=\"\" class=\"wp-image-2566\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/df-150x150.jpg 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/df-100x100.jpg 100w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/figure>\n\n\n\n<p class=\"has-small-font-size\"><em>For portions of these sections:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-small-font-size\">Wayback machine<\/li>\n\n\n\n<li class=\"has-small-font-size\">From digital input to web ready<\/li>\n<\/ul>\n\n\n\n<p class=\"has-small-font-size\"><em>Contents adapted from materials created for&nbsp;<a href=\"http:\/\/wiki.digital-foundations.net\/index.php?title=Main_Page\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Foundations<\/a>&nbsp;by xtine burrough and Michael Mandiberg, modified by williamCromar to update to current Adobe Creative Cloud.&nbsp;Please see the newMediaWiki&nbsp;Licensing &amp; Citation Notes&nbsp;regarding Digital Foundations derivatives, which are governed by a&nbsp;<a href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported license<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 2 | a2z webGraphics Download sample file here Creating web-ready graphics Now that we know about graphic file types, how do we get a graphic image out of, say, TIFF, PSD, or AI and into a web-appropriate file type? How do we make decisions about resizing files, and most importantly, proper choices for&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/\">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,11],"tags":[],"class_list":["post-3917","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-exercises"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>webGraphics - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Web Graphics: how to make informed decisions about file types and levels of compression to optimize quality and performance for web images.\" \/>\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\/webgraphics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"webGraphics - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Web Graphics: how to make informed decisions about file types and levels of compression to optimize quality and performance for web images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-10T21:08:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T21:58:12+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=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"webGraphics\",\"datePublished\":\"2023-11-10T21:08:46+00:00\",\"dateModified\":\"2024-01-09T21:58:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/\"},\"wordCount\":1738,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Exercises\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/\",\"name\":\"webGraphics - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-11-10T21:08:46+00:00\",\"dateModified\":\"2024-01-09T21:58:12+00:00\",\"description\":\"Web Graphics: how to make informed decisions about file types and levels of compression to optimize quality and performance for web images.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webgraphics\\\/#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\\\/webgraphics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"webGraphics\"}]},{\"@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":"webGraphics - newMediaWiki","description":"Web Graphics: how to make informed decisions about file types and levels of compression to optimize quality and performance for web images.","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\/webgraphics\/","og_locale":"en_US","og_type":"article","og_title":"webGraphics - newMediaWiki","og_description":"Web Graphics: how to make informed decisions about file types and levels of compression to optimize quality and performance for web images.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/","og_site_name":"newMediaWiki","article_published_time":"2023-11-10T21:08:46+00:00","article_modified_time":"2024-01-09T21:58:12+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":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"webGraphics","datePublished":"2023-11-10T21:08:46+00:00","dateModified":"2024-01-09T21:58:12+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/"},"wordCount":1738,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Exercises"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/","url":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/","name":"webGraphics - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-11-10T21:08:46+00:00","dateModified":"2024-01-09T21:58:12+00:00","description":"Web Graphics: how to make informed decisions about file types and levels of compression to optimize quality and performance for web images.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/webgraphics\/#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\/webgraphics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"webGraphics"}]},{"@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\/3917","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=3917"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3917\/revisions"}],"predecessor-version":[{"id":5922,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3917\/revisions\/5922"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=3917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=3917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=3917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}