{"id":161,"date":"2014-08-05T22:35:18","date_gmt":"2014-08-05T22:35:18","guid":{"rendered":"http:\/\/www.smartbuilder.com\/blog\/?p=161"},"modified":"2018-07-06T18:59:41","modified_gmt":"2018-07-06T18:59:41","slug":"select-the-right-image-format","status":"publish","type":"post","link":"https:\/\/www.smartbuilder.com\/blog\/select-the-right-image-format\/","title":{"rendered":"Select the Right Image Format"},"content":{"rendered":"

As a follow up on my last post about optimizing graphics<\/a>, I want to address a few ideas concerning the best image format for elearning graphics.<\/p>\n

When you create graphics for a course, do you save all of the images in the same format? That isn\u2019t uncommon. However, you can use various image formats to optimize the graphics in your course. No image format does everything perfectly. You should choose the format based on the image\u2019s characteristics. The table below can help you do that.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
<\/td>\nJPEG<\/strong><\/td>\nPNG-24<\/strong><\/td>\nGIF<\/strong><\/td>\n<\/tr>\n
Transparent Background<\/span><\/td>\n<\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\n<\/tr>\n
Semi-transparency<\/span><\/td>\n<\/td>\nX<\/strong><\/td>\n<\/td>\n<\/tr>\n
Colored Background (including white)<\/span><\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\n<\/tr>\n
Many Colors (>32)<\/span><\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\n<\/td>\n<\/tr>\n
Few Colors (<32)<\/span><\/td>\n<\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\n<\/tr>\n
Gradient Colors<\/span><\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\n<\/td>\n<\/tr>\n
Solid Colors<\/span><\/td>\n<\/td>\nX<\/strong><\/td>\nX<\/strong><\/td>\n<\/tr>\n
Large dimensions<\/span><\/td>\nX<\/strong><\/td>\n<\/td>\nX<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

You may ask, \u201cWhy wouldn\u2019t I use PNGs all the time? They seem to cover the gamut of images.\u201d That\u2019s true, but if an image perfectly meets the JPEG or GIF criteria, you\u2019ll often get a smaller file size using those options. Let\u2019s see how this works for a few images.<\/p>\n\n\n\n\n\n\n
<\/td>\nJPEG<\/strong><\/td>\nPNG-24<\/strong><\/td>\nGIF<\/strong><\/td>\n<\/tr>\n
\n

\"SmartBuilder_Logo\"<\/a><\/p>\n

320 x 42, \u00a0white background<\/p>\n<\/td>\n

6KB
\nMedium Quality<\/td>\n		16KB
\nHigh Quality<\/td>\n		3KB
\nHigh Quality
\n(smallest)<\/td>\n<\/tr>\n
\n

\"Community320\"<\/a><\/p>\n

1000 x 650<\/p>\n<\/td>\n

196KB
High Quality
\n(smallest)<\/td>\n		700KB
High Quality<\/td>\n		266KB
Medium Quality<\/td>\n<\/tr>\n
\n

\"BlueBurst320\"<\/a><\/p>\n

350 x 130, transparent background and semi-transparent radial gradient<\/p>\n<\/td>\n

N\/A<\/td>\n6KB
High Quality
\n(smallest)<\/td>\n		11KB
Low Quality<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The data in this chart is for graphics optimized for elearning.<\/p>\n

If an image meets the criteria of multiple formats, I suggest comparing file sizes in the Photoshop or Illustrator export window using a 2-up or 4-up display<\/a>.<\/p>\n

Application time! See if you can select the best format for the images in the activity below.<\/p>\n

\"SampleActivity\"<\/a><\/p>\n

Let\u2019s see how this applies to the images in our sample activity.<\/p>\n

\n

What is the best format for the background (Image A)?<\/a><\/h2>\n
\n

Characteristics:<\/h3>\n