{"id":135,"date":"2014-06-27T00:09:35","date_gmt":"2014-06-27T00:09:35","guid":{"rendered":"http:\/\/www.smartbuilder.com\/blog\/?p=135"},"modified":"2018-07-06T19:02:09","modified_gmt":"2018-07-06T19:02:09","slug":"optimizing-graphics-for-elearning-2","status":"publish","type":"post","link":"https:\/\/www.smartbuilder.com\/blog\/optimizing-graphics-for-elearning-2\/","title":{"rendered":"Optimizing Graphics for eLearning"},"content":{"rendered":"

Have you ever thought about how graphics\u2019 file sizes impact elearning courses? Think back to the last video you viewed that buffered while you watched it. Buffering can make a video difficult to follow. The same thing happens when learners wait for graphics to load in elearning.<\/p>\n

\n

Warning: Images you download from your company network or from stock image sites are not optimized for elearning.<\/em><\/h2>\n<\/blockquote>\n

This isn\u2019t all about the learner though. As an author, you\u2019ll work faster with smaller files: objects move smoother, regenerate quickly, save faster. As an added bonus, optimized graphics look more professional.<\/p>\n

Rather than bore you with an encyclopedia about optimizing graphics, I selected a few critical tips that you can implement right away with image editing software, such as Photoshop, Illustrator, Gimp, or Inkscape.<\/p>\n

The activity image below will help me explain the tips.<\/p>\n

\"SampleActivity\"<\/a><\/p>\n\n\n\n\n\n
A. Photo of work environment<\/td>\nB. Photo of narrator<\/td>\n<\/tr>\n
C. Drop shadow<\/td>\nD. Caution symbol illustration<\/td>\n<\/tr>\n
E. Flyout background<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Separate foreground and background images<\/h2>\n

For the activity, the narrator needs to change position four times. To do that, people often put four pictures of the narrator in the hospital environment in the activity. That\u2019s a lot of data to load every time the narrator changes. Besides that, the background turns off, then on, and moves slightly with each change, which looks unprofessional.<\/p>\n

A slimmer and sleeker approach is to get five pictures; one of just the background without the narrator and four of the narrator to cut out and overlay. Separating the narrator significantly reduces the data required for each change.<\/p>\n

Edit images to their final dimensions<\/h2>\n

Edit images to their final dimensions before placing them in the course. Let me show you why editing to final dimensions is important.<\/p>\n

Images you shoot or purchase are often much larger than you need for elearning. For example, if I shoot the hospital background for the activity with my iPhone 5s (which I would not recommend, but it makes my point), the raw dimensions of the image are 3264\u2006\u00d7\u20062448. That is much larger than the activity dimensions.<\/p>\n

If the activity dimensions are 1000 x 650, resize the background image in Photoshop to those same dimensions. Resizing significantly reduces the file size. The original image was 1.7MB. The resized image is 400KB! Huge difference.<\/p>\n

This also applies to illustrations, such as the icons on the right side of the activity. Their final size is 100 x 100 pixels. When you create them in Illustrator, create them on a 100 x 100 pixel artboard. You should not have to resize the icons after importing them into the elearning authoring tool.<\/p>\n

Don\u2019t fall for the amateur mistake of importing large images and shrinking them using the resize handles. Doing that only makes the visible image smaller. It doesn\u2019t reduce the file size. If the image is 1.7MB before scaling in the authoring tool, the image is still 1.7MB after scaling! And\u2026scaling often makes the image blurry…double whammy!<\/p>\n

Create stretchable images using 1-by artboards or canvases<\/h2>\n

There are a couple exceptions to the last tip. Two great examples in the activity are the colored background of the flyout and its drop shadow.Why would you create those as graphics when your authoring tool creates native colored shapes and drop shadows? The short answer is \u201cfaster updates and complete control in Flash and HTML5.\u201d<\/p>\n

If your authoring tool supports \u201cchange once and update everywhere,\u201d you can update elements quickly, like the flyout background color, by using this tip. If the flyout appears 20 times in the lesson and you decide to change the color, you can replace the 1-by graphic in the media library and it updates the flyout everywhere in the lesson.<\/p>\n

Sometimes effects, like drop shadows, display differently between the authoring tool, Flash, and HTML5. Creating effects with graphics makes them look the same everywhere.<\/p>\n

For the drop shadow, create an artboard 1 pixel tall by 20 pixels wide (the file size on that will be tiny), and fill it with a gradient. Import the 1 x 20 pixel graphic into your authoring tool, then stretch it vertically to create the effect. Remember, scaling an image in the authoring tool won\u2019t change the file size. In this case, that\u2019s awesome!<\/p>\n

Applying these tips will quickly put you on the road to creating graphics that have smaller file sizes, look professional, and make your learners happy.<\/p>\n

If you have additional tips you\u2019d like to share, I\u2019d like to hear them. Please leave your ideas using the comments area below.<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever thought about how graphics\u2019 file sizes impact elearning courses? Think back to the last video you viewed that buffered while you watched it. Buffering can make a video difficult to follow. The same thing happens when learners wait for graphics to load in elearning. Warning: Images you download from your company network … [Continue Reading]<\/a><\/p>\n","protected":false},"author":4,"featured_media":138,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24,26,29],"tags":[31],"coauthors":[],"yoast_head":"\nOptimizing Graphics for eLearning - SmartBuilder Awesome Sauce<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing Graphics for eLearning - SmartBuilder Awesome Sauce\" \/>\n<meta property=\"og:description\" content=\"Have you ever thought about how graphics\u2019 file sizes impact elearning courses? Think back to the last video you viewed that buffered while you watched it. Buffering can make a video difficult to follow. The same thing happens when learners wait for graphics to load in elearning. Warning: Images you download from your company network ... [Continue Reading]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\" \/>\n<meta property=\"og:site_name\" content=\"SmartBuilder Awesome Sauce\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/smartbuilderelearning\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-27T00:09:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-06T19:02:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www-dev.suddenlysmart.com\/blog\/wp-content\/uploads\/2014\/06\/HomeImage1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"580\" \/>\n\t<meta property=\"og:image:height\" content=\"348\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"J L Pope\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@smrtbuilder\" \/>\n<meta name=\"twitter:site\" content=\"@smrtbuilder\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"J L Pope\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\"},\"author\":{\"name\":\"J L Pope\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/person\/99e853d7245aaa8bc82f04ac5d00f0fd\"},\"headline\":\"Optimizing Graphics for eLearning\",\"datePublished\":\"2014-06-27T00:09:35+00:00\",\"dateModified\":\"2018-07-06T19:02:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\"},\"wordCount\":756,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#organization\"},\"keywords\":[\"image tips and tricks\"],\"articleSection\":[\"Authoring\",\"Graphic Design\",\"Mobile \/ HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\",\"url\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\",\"name\":\"Optimizing Graphics for eLearning - SmartBuilder Awesome Sauce\",\"isPartOf\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#website\"},\"datePublished\":\"2014-06-27T00:09:35+00:00\",\"dateModified\":\"2018-07-06T19:02:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizing Graphics for eLearning\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#website\",\"url\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/\",\"name\":\"SmartBuilder Awesome Sauce\",\"description\":\"Helping you to cook up inspiring elearning\",\"publisher\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#organization\",\"name\":\"SmartBuilder\",\"url\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.smartbuilder.com\/blog\/wp-content\/uploads\/2017\/05\/SmartBuilder-Elearning-Authoring-Tool-Logo.png\",\"contentUrl\":\"https:\/\/www.smartbuilder.com\/blog\/wp-content\/uploads\/2017\/05\/SmartBuilder-Elearning-Authoring-Tool-Logo.png\",\"width\":200,\"height\":44,\"caption\":\"SmartBuilder\"},\"image\":{\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/smartbuilderelearning\/\",\"https:\/\/twitter.com\/smrtbuilder\",\"https:\/\/www.linkedin.com\/groups\/4334539\",\"https:\/\/www.youtube.com\/user\/SmartBuilderVideos\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/person\/99e853d7245aaa8bc82f04ac5d00f0fd\",\"name\":\"J L Pope\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/person\/image\/a5cddb3bb00cab1c221a3c2c9d7808be\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/824a1fec6548bfd21bc6d1c8b52e7c04?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/824a1fec6548bfd21bc6d1c8b52e7c04?s=96&d=mm&r=g\",\"caption\":\"J L Pope\"},\"sameAs\":[\"http:\/\/www.smartbuilder.com\"],\"url\":\"https:\/\/www.smartbuilder.com\/blog\/author\/jlpope\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimizing Graphics for eLearning - SmartBuilder Awesome Sauce","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:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/","og_locale":"en_US","og_type":"article","og_title":"Optimizing Graphics for eLearning - SmartBuilder Awesome Sauce","og_description":"Have you ever thought about how graphics\u2019 file sizes impact elearning courses? Think back to the last video you viewed that buffered while you watched it. Buffering can make a video difficult to follow. The same thing happens when learners wait for graphics to load in elearning. Warning: Images you download from your company network ... [Continue Reading]","og_url":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/","og_site_name":"SmartBuilder Awesome Sauce","article_publisher":"https:\/\/www.facebook.com\/smartbuilderelearning\/","article_published_time":"2014-06-27T00:09:35+00:00","article_modified_time":"2018-07-06T19:02:09+00:00","og_image":[{"width":580,"height":348,"url":"https:\/\/www-dev.suddenlysmart.com\/blog\/wp-content\/uploads\/2014\/06\/HomeImage1.jpg","type":"image\/jpeg"}],"author":"J L Pope","twitter_card":"summary_large_image","twitter_creator":"@smrtbuilder","twitter_site":"@smrtbuilder","twitter_misc":{"Written by":"J L Pope","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#article","isPartOf":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/"},"author":{"name":"J L Pope","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/person\/99e853d7245aaa8bc82f04ac5d00f0fd"},"headline":"Optimizing Graphics for eLearning","datePublished":"2014-06-27T00:09:35+00:00","dateModified":"2018-07-06T19:02:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/"},"wordCount":756,"commentCount":1,"publisher":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#organization"},"keywords":["image tips and tricks"],"articleSection":["Authoring","Graphic Design","Mobile \/ HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/","url":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/","name":"Optimizing Graphics for eLearning - SmartBuilder Awesome Sauce","isPartOf":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#website"},"datePublished":"2014-06-27T00:09:35+00:00","dateModified":"2018-07-06T19:02:09+00:00","breadcrumb":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/optimizing-graphics-for-elearning-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www-dev.suddenlysmart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimizing Graphics for eLearning"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#website","url":"https:\/\/www-dev.suddenlysmart.com\/blog\/","name":"SmartBuilder Awesome Sauce","description":"Helping you to cook up inspiring elearning","publisher":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.suddenlysmart.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#organization","name":"SmartBuilder","url":"https:\/\/www-dev.suddenlysmart.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.smartbuilder.com\/blog\/wp-content\/uploads\/2017\/05\/SmartBuilder-Elearning-Authoring-Tool-Logo.png","contentUrl":"https:\/\/www.smartbuilder.com\/blog\/wp-content\/uploads\/2017\/05\/SmartBuilder-Elearning-Authoring-Tool-Logo.png","width":200,"height":44,"caption":"SmartBuilder"},"image":{"@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/smartbuilderelearning\/","https:\/\/twitter.com\/smrtbuilder","https:\/\/www.linkedin.com\/groups\/4334539","https:\/\/www.youtube.com\/user\/SmartBuilderVideos"]},{"@type":"Person","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/person\/99e853d7245aaa8bc82f04ac5d00f0fd","name":"J L Pope","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.suddenlysmart.com\/blog\/#\/schema\/person\/image\/a5cddb3bb00cab1c221a3c2c9d7808be","url":"https:\/\/secure.gravatar.com\/avatar\/824a1fec6548bfd21bc6d1c8b52e7c04?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/824a1fec6548bfd21bc6d1c8b52e7c04?s=96&d=mm&r=g","caption":"J L Pope"},"sameAs":["http:\/\/www.smartbuilder.com"],"url":"https:\/\/www.smartbuilder.com\/blog\/author\/jlpope\/"}]}},"_links":{"self":[{"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/posts\/135"}],"collection":[{"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":0,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/media\/138"}],"wp:attachment":[{"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/tags?post=135"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.smartbuilder.com\/blog\/wp-json\/wp\/v2\/coauthors?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}