The Logical Blog by IconLogic

Development Corner: Image Formats

by Sally Cox  

When it comes to adding images to websites, PowerPoint presentations, or eLearning projects, you will likely be given JPEGs, GIFs, or PNGs. Let's review the three most common image formats and why/when to use them.

JPEG

JPEG is short for "Joint Photographer's Experts Group." It is one of the most popular formats used on the web and in eLearning. JPEG compression (the act of making the image as small as possible while retaining as much quality as possible) is "lossy" compression, which means every time you save an image as a JPEG, it loses quality.

 

The first image above is a JPEG taken with my iPhone. In the second image, I have opened the file in Photoshop and zoomed in on the child's face.

 

 

 

  

 

The little squares you see in the closeup image are called "pixels." Every time you save an image as a JPEG, it loses some quality by throwing out pixels. So if you are editing an image in Photoshop, always save it as the native format first, which is a PSD (Photoshop Document).

 

In the Save As dialog box in Photoshop, choose "Photoshop" as the file format. This saves as a PSD and preserves all details. Then after you finish your edits, do another Save As and choose "JPEG." The original PSD remains fully intact.

 

The image below is an example of the same photo saved multiple times as a low-quality JPEG. Notice that that there is a squarish effect happening and details are lost. This effect is known as "JPEG artifact."

 

 

 

JPEGs use the "RGB colorspace," which has more than 16 million colors. This allows for beautiful continuous-tone images with fluid gradations and a full range of colors. It's a good choice for continuous-tone, but does not allow transparency or animation.

GIF

The "Graphic Interchange Format" (GIF) works in the "Indexed colorspace," so its color palette is quite limited--just 256 colors. GIFs do, however, support transparency and animation (the once-hated animated GIF is making a comeback; I see it every day on Facebook). The oldest format on the web (created in 1989), GIFs are saved as "lossless" compression.

In the image below, I have saved the image as a GIF and it contains just 256 colors. You can see that the image has lost some of its detail.

 

 

Here is an example of an image containing just 8 colors--all detail is gone and the image has a "posterized" effect.

 

 

 

GIFs are perfect for "flat color," i.e., logos or flat design graphics that don't have gradations or continuous-tone (remember: only 256 colors). 

 

PNG

 

The "Portable Network Graphic" was created (approved as a web standard in 1996) to provide high quality continuous-tone but also allow for transparency and animation.

PNGs are saved in the RGB colorspace, so they have the full range of 16 million+ colors. What I like best about PNGs is the ability to save transparency, which I use every day in my workflow. I save my graphics as high-quality PNGs and allow transparency (a checkbox I choose in Adobe Illustrator when I export a graphic to PNG).

In a recent project I wanted to use an image of a headset, and I needed the background to be transparent. I opened the image in Adobe Illustrator and set the Export PNG options to High Quality and set the Background Color to Transparency.

 

 

 

Thanks to the Transparency option, I had the freedom to overlay the headset on the green background shown below.

 

To Recap:

	JPEG	GIF	"PNG"
COLORS	16 MILLION +	256	16 MILLION +
TRANSPARENCY	NO	YES	YES
ANIMATION	NO	YES	YES
CONTINUOUS-TONE	YES	NO	YES
FLAT COLOR	NO	YES	YES

 

***
If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.

Writing & Curriculum Development: The Introductory Narrative, Signaling the Audience

by Jennie Ruby 

"In this course you will learn the functionality of [insert topic you've never heard of]. By the end of this lesson, you should be able to [do a bunch of procedures the utility of which is not immediately evident]."

Traditionally, many of us have written these types of sentences at the top of page 1 of our courseware materials or eLearning scripts, and then that has served as our audience's only introduction to the topic of the course.

It doesn't have to be that way. I'd like to introduce the Introductory Narrative--a brief paragraph prior to the sentences above and the list of objectives. Its job is to engage the learner and perhaps provide a little positivity and motivation.

The introductory narrative should do five things.

1. Signal the correct audience.
2. Use the word "you" to talk directly to the learner.
3. Explain the "what's in it for me" (WIIFM) for the learner.
4. Say some positive and encouraging words about the topic of the training and/or the process of learning it.
5. Finally, name the [topic you've never heard of] as the very last words of the paragraph.

Over the next couple of weeks I'll be exploring each of these topics in turn. Today let's look at the first one: signaling the correct audience.

Signaling the correct audience is indicating in your first sentence who the intended audience is for the course or lesson. It can be done a couple of different ways.

First, you can always indicate the correct audience for a course or lesson by explicitly naming the job title or describing the situation of the person the learning is meant to address, and using the word you:

As a warehouse employee here at ABC Company, you...

As the parent of a newborn, you...

Another popular way to signal the intended audience is to ask a question. If the learner answers yes, they are the correct audience:

Have you ever taken a picture of someone and had their eyes come out red?

Do you need a quick way to transfer files between computers?

Do you need to build an authentication and identity API?

Learners who answer yes, immediately understand that the lesson is for them. Those who answer no or don't recognize what you are talking about will instantly know that the training is not intended for them.

A more subtle way to signal the correct audience is to describe a real-world situation with "you" at the center:

So you've landed the interview. Now you've got to land the job.

Without directly saying "this training is intended for persons who are currently seeking employment," the message is conveyed that if you are currently trying to get a job, this training is for you.

Of course the introductory narrative for training materials is not the only place you might need to use these methods of signaling the correct audience.

You might need to do this in the subject line of a company-wide email aimed at a subset of employees. Or in the first paragraph of any article or blog entry. Or you might need to write a course description to help potential learners identify the correct training for them.

Do you have other interesting ways to signal your correct audience? Please post your suggestions as comments below.

Reference

Kevin Siegel and Jennie Ruby, Writing for Curriculum Development 3.0, 2014, IconLogic.

***
Do you need to learn how to write eLearning scripts? Come check out my live, online mini course.