Department of Education

Schools Division Office of Olongapo City

Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

Different Types of Image File

Formats LESSON
OBJECTIVES
At1.
the end of this lesson, the student
will be able to:
1.Determine the different types of image
file formats.
2.Discuss the when to use and not to
use this file formats.
3. Discuss the pros and cons of each file
format.

Performance standard
1. The learners shall be able to
enumerate the different image file
1. JPEG/JPG
formats.
JPEG is a lossy raster format that stands for Joint
2. The learners shall be able to explain
Photographic Experts Group, the technical team that when to use and not to use this file
formats.
developed it. This is one of the most widely used
formats online, typically for photos, email graphics 3. The learners shall be able to explain
pros and cons of each file format.
and large web images like banner ads. JPEG images
have a sliding scale of compression that decreases file
size tremendously but increases artifacts or pixilation
the more the image is compressed.
You should use a JPEG when…

You’re dealing with online photos and/or artwork. JPEGs offer you
the most flexibility with raster editing and compression making
them ideal for web images that need to be downloaded quickly.
You want to print photos and/or artwork. At high resolution files
with low compression, JPEGs are perfect for editing and then
printing.

You need to send a quick preview image to a client. JPEG images can be
reduced to very small sizes making them great for emailing.
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

Don’t use a JPEG when…

You need a web graphic with transparency. JPEGs do not have a transparency
channel and must have a solid color background. GIF and PNG are your best
options for transparency.
You need a layered, editable image. JPEGs are a flat image format meaning that
all edits are saved into one image layer and cannot be undone. Consider a PSD
(Photoshop) file for a fully editable image.
2. GIF
GIF is a lossless raster format that stands for Graphics
Interchange Format. The big question: how is it pronounced? The
creator of GIF says “JIFF” like the peanut butter. This writer (and
lots of the world) says “GIFF” because graphics starts with a
“guh.” Anyway, we’ll leave that up to you. GIF is also a widely
used web image format, typically for animated graphics like
banner ads, email images and social media memes. Though GIFs are lossless,
they can be exported in a number of highly customizable settings that reduce
the amount of colors and image information, which in turn reduces the file size.
You should use a GIF when…
You want to create web animation. GIF images hold all of the animation frames
and timing information in one single file. Image editors like Photoshop make it
easy to create a short animation and export it as a GIF.
You need transparency. GIF images have an “alpha channel” that can be
transparent, so you can place your image on any colored background.
You need a small file. The compression techniques in the GIF format allow image
files to shrink tremendously. For very simple icons and web graphics, GIF is the
best image file format.
Don’t use a GIF when…
You need a photographic-quality image. Though GIFs can be high resolution,
they have a limit of 256 colors (unless you know a few tricks). Photos typically
have thousands of colors and will look flat and less vibrant (and sometimes
weird due to color banding) when converted to GIF.
You need to print an image. Because of the color limit, most printed photos will
lack depth. If you need to print photos, look at TIFF, PSD and JPG.
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

You need a layered, editable image. GIFs are a flat image format meaning that
all edits are saved into one image layer and cannot be undone. Consider a PSD
(Photoshop) file for a fully editable image.
3. PNG
PNG is a lossless raster format that stands for Portable
Network Graphics. Think of PNGs as the next-generation GIF.
This format has built-in transparency, but can also display
higher color depths, which translates into millions of colors.
PNGs are a web standard and are quickly becoming one of
the most common image formats used online.
You should use a PNG when…
You need high-quality transparent web graphics. PNG images have a variable
“alpha channel” that can have any degree of transparency (in contrast with GIFs
that only have on/off transparency). Plus, with greater color depths, you’ll have
a more vibrant image than you would with a GIF.
You have illustrations with limited colors. Though any image will work, PNG files
are best with a small color palette.
You need a small file. PNG files can shrink to incredibly tiny sizes—especially
images that are simple colors, shapes or text. This makes it the ideal image file
type for web graphics.
Don’t use a PNG when…
You’re working with photos or artwork. Thanks to PNGs’ high color depth, the
format can easily handle high resolution photos. However, because it is a
lossless web format, file sizes tend to get very large. If you’re working with
photos on the web, go with JPEG.
You’re dealing with a print project. PNG graphics are optimized for the screen.
You can definitely print a PNG, but you’d be better off with a JPEG (lossy) or TIFF
file.

4. TIFF/TIF
TIFF is a lossless raster format that stands for Tagged
Image File Format. Because of its extremely high quality,
the format is primarily used in photography and desktop
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

publishing. You’ll likely encounter TIFF files when you scan a document or take a
photo with a professional digital camera. Do note that TIFF files can also be used
as a “container” for JPEG images. These files will be much smaller than
traditional TIFF files, which are typically very large.
You should use a TIFF when…
You need high-quality print graphics. Along with RAW, TIFF files are among the
highest quality graphic formats available. If you’re printing photos—especially at
enormous sizes—use this format.
You are making a high-quality scan. Using TIFF to scan your documents, photos
and artwork will ensure that you have the best original file to work off.
Don’t use at TIFF when…
You’re working with web graphics. While many web browsers support it, TIFF
files are optimized for print. Go with JPEG or PNG when you need to display high-
quality images online.
5. RAW

A raw image format contains the unprocessed data captured

by a digital camera or scanner’s sensor. Typically, images are
processed and then converted and compressed into another
format e.g. JPEG or TIFF. Raw images store the unprocessed
and processed data in two separate files, so you’re left with
the highest quality image possible that you can edit non-
destructively with a photo editing application like Photoshop.
There are dozens and dozens of raw formats, but some of the
typical formats are CRW (Canon), NEF (Nikon), and DNG (Adobe).

You should use a RAW when…

You are shooting and editing photos. Make sure your camera is set to RAW so
you can capture the most versatile image. Then, use a compatible photo-editing
application to adjust your image.
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

Don’t use RAW when…

You’re working with web graphics. RAW is built for photo editing. When you’re
ready to present your photos for the web, convert them to JPEG. You’re ready to
print your photos. Many printers won’t accept raw formats, so first convert to
JPEG or TIFF.

6. PSD

PSD is a proprietary layered image format that stands for Photoshop Document.
These are original design files created in Photoshop that are fully editable with
multiple layers and image adjustments. PSDs are primarily used to create and
edit raster images, but this unique format can also contain vector layers as well,
making it extremely flexible for a number of different projects. A PSD can be
exported into any number of image file formats, including all of the raster
formats listed above.

You should use a PSD when…

It’s time to retouch photos. . You need to edit artwork for

digital or print. That could be a photo, painting, drawing, or
anything else. Photoshop is the right tool to make sure every
line, shadow and texture is in place.

You want digital images for the web like social media images,
banner ads, email headers, videos etc. Creating these images
in Photoshop will ensure they’re right size and optimized for the web.

You have to create a website or app mockup. Layers make it easy to move UI
elements around. You want to get fancy with animation and video. Photoshop
makes it easy to cut together simple video clips and add graphics, filters, text,
animation and more.

Don’t use a PSD when…

You need to post a photo online or send a preview to a client. The web is JPEG
friendly. Convert first to make sure your audience can see your image (and so it
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

won’t take several minutes to download). You’re ready to print your photos.
Many printers won’t accept the PSD format, so first convert to JPEG or TIFF.

7. PDF

PDF stands for Portable Document Format and is an image

format used to display documents and graphics correctly, no
matter the device, application, operating system or web
browser. At its core, PDF files have a powerful vector graphics
foundation, but can also display everything from raster
graphics to form fields to spreadsheets. Because it is a near
universal standard, PDF files are often the file format requested
by printers to send a final design into production. Both Adobe Photoshop and
Illustrator can export straight to PDF, making it easy to start your design and
get it ready for printing.

You should use a PDF when…

You’re ready to print. As we mentioned, many printers prefer PDF as their

primary delivery format because it is so ubiquitous. Check with your printer to
see how they’d like you to prepare your file.

You want to display documents on the web. You wouldn’t use a PDF for a single
icon or logo, but it’s great for posters, flyers, magazines and booklets. PDFs will
keep your entire design in one package, making it easy to view, download or
print.

Don’t use a PDF when…

You need to edit your design. PDFs are great containers but use other
applications for the contents. You can edit raster images with Photoshop and
vector graphics with Illustrator. When you’re done, you can combine those into
a PDF for easy viewing.

8. EPS
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

EPS is an image format that stands for Encapsulated PostScript. Although it is

used primarily as a vector format, an EPS file can include both vector and raster
image data. Typically, an EPS file includes a single design element that can be
used in a larger design.

You should use an EPS when…

You need to send a vector logo to a client, designer or a printer. With an EPS
file, you don’t have to worry about where the logo will be placed or printed. No
matter the size, it will always appear at the correct resolution.

Color Model
Color model is a system for creating a full range of colors from a small set of primary
colors. There are two types of color models: additive and subtractive. Additive color
models use light to display color, while subtractive color models use printing inks. The
most common color models that graphic designers work with are the CMYK model for
printing and the RGB model for computer display.

1. RGB
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

Additive Color Model

The RGB color model is an additive color model. In this case red, green and blue light
are added together in various combinations to reproduce a wide spectrum of colors.
The primary purpose of the RGB color model is for the display of images in electronic
systems, such as on television screens and computer monitors and it’s also used in
digital photography. Cathode ray tube, LCD, plasma and LED displays all utilize the
RGB model.

2. CMYK
Subtractive Color Model
The CMYK color model (four-color process) is a subtractive color model. Primarily used
in printing, CMYK works by partially or completely masking colors on a white
background. The printed ink reduces the light that would otherwise be reflected.
That’s why this model is called subtractive because inks ‘subtract’ brightness from a
white background from four colors: cyan, magenta, yellow and black.

It is frequently suggested that the ‘K’ in CMYK comes from the last letter in ‘black’
and was chosen because B already refers to blue. However, this explanation is
incorrect. The ‘K’ in CMYK stands for ‘key’ since in four-color printing cyan, magenta,
and yellow printing plates are carefully keyed or aligned with the key of the black key
plate. Black is used because the combination of the three primary colors (CMY)
doesn’t produce a fully saturated black. This is evident in the central black color
created by the overlapping circles in the color chart above.

MULTIPLE CHOICE
Directions: -Read the following questions and write the letter of the correct answer
before the number.
1. RGB is best used in web graphics what colors does the acronym RGB stand for?
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

a. Red, Green, Blue c. Red, Green, Black

b. Red, Grey, Blue d. Red, Grey, Brown
2. Images to be printed on a color printer are best created in which color mode?
a. Greyscale c. RGB
b. CMYK d. Indexed Color
3. This refers to the types of colors you will be using in your Photoshop file.
a. Color System c. Color mode
b. Swatches d. Color Palette
4. This refers to the additive color mode suitable for images to be viewed on the
web.
a. CMYK c. GIF
b. RGB d. CAD
5. This is a subtractive color model that reduces the light that would normally be
reflected.
a. RGB
b. CMYK
c. Color Mode
d. Palette
Learning Activity Sheets WEEK 5-8 – ACTIVITY #1
Name: _________________________________Grade and Section: _________
Performance Task: Create a scrapbook of different types of image file formats
attach sample images and examples. Use Canva web application.

1. JPEG/JPG

2. GIF

3. PNG

4. TIFF

5. RAW

6. PSD

7. PDF

8. EPS

Learning Activity Sheets WEEK 5-8 – ACTIVITY #2

 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

Learning Activity Sheets WEEK 5-8 –

QUIZ 1
Name: _______________________________Grade and Section: _______
Direction: Enumeration: Let’s see what you have learned about the lesson. Write your
answers after the question.

1. Type of graphics that is perfect for “drawing”.

 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

2. The processes of altering images, whether they are digital photographs, traditional
analog photographs, or illustrations.

3. Type of graphics that is Capable of rich, complex color blends.

4. Is a picture that has been stored in electronic form.

5. Traditional analog image editing is known as photo retouching, using tools such as
an airbrush to modify photographs, or editing illustrations with any traditional art
medium.

6.If your digital photos are slightly out of focus, you can use the basic _________
technique to make your images look crisper.

7. The process of changing the color rendition because of the inconsistency between
the light and the white balance.

8. Reduce the size of a file while maintaining the same quality as before it was
compressed.

9. A commonly used raster graphic format for saving image files.

10. Image file format that compresses files by reducing the number of colors it has

B. Identification Write the corresponding answer for each question write your answers
for each number on the space provided.
11-15 ---------5 Basics of Photo Editing
18-22-----------5 Examples image format for the
11.____________________________ two types of compression.
12. ____________________________ 18. ____________________________
13. ____________________________ 19. ____________________________
14. ____________________________ 20. ____________________________
15. ____________________________ 21. ____________________________
16-17----------2 Types of Compression 22. ____________________________
16. ____________________________
23-25------------Types of image file format
17. ___________________________
23. ____________________________
24. ____________________________
25. ____________________________

1. A
2. B
3. C
4. B
5. b
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8

Answer Key

1.VECTOR

2.IMAGE EDITING

3.RASTER

4.IMAGE

5.IMAGE EDITING

6.SHARPENING

7.CORRECTING

8. Digital Data Compression

9.JPEG

10.GIF

11. Cropping

12. Resizing

13. Correcting

14Sharpening /Softening

15Digital Data Compression

16-17 Lossless and Lossy

18 JPEG

19 GIF

21 PNG

22 BITMAP

23. JPG

24. PNG

25. PDF

EPS

GIF

RAW

TIFF/EPS/BMP
 Department of Education
Schools Division Office of Olongapo City
Olongapo City National High School
Olongapo City
Photo Editing Week 5-8