Vous êtes sur la page 1sur 21

Get an informative explainer video to showcase your product or service

Get a design
How it works
Find a designer
Agencies
1 800 513 1678

o Blog


o Get inspired
o Learn design
o Build a business
o Grow an agency
o Look inside 99d

Image file formats: everything you’ve ever


wanted to know

by Samual Lundquist

 3 years ago

 15 min read

 Design basics
Get an informative explainer video to showcase your product or service
Find out more

Think GIF is the most delicious kind of peanut butter? And AI was that weird sci-fi movie starring Haley Joel Osment? Well,
you’re not wrong. But today we’re talking image formats and all those pesky little files that we use to create visual content for
print and web.

Every graphic you see online is an image file. Most everything you see printed on paper, plastic or a t-shirt came from an
image file. These files come in a variety of formats, and each is optimized for a specific use. Using the right type for the right
job means your design will come out picture perfect and just how you intended. The wrong format could mean a bad print or
a poor web image, a giant download or a missing graphic in an email.

So let’s break it down. Welcome to Image File Formats 101. Let’s dive into the basics of each file type.
Most image files fit into one of two general categories—raster files and vector files—and each category has its own specific
uses. This breakdown isn’t perfect. For example, certain formats can actually contain elements of both types. But this is a
good place to start when thinking about which format to use for your projects.

Table of contents
1. Raster images
1. JPEG
2. GIF
3. PNG
4. TIFF
5. RAW
6. PSD
2. Vector images
1. PDF
2. EPS
3. AI

Raster images

Raster images are made up of a set grid of dots called pixels where each pixel is assigned a color. Unlike a vector image,
raster images are resolution dependent, meaning they exist at one size. When you transform a raster image, you stretch the
pixels themselves, which can result in a “pixelated” or blurry image. When you enlarge an image, your software is essentially
guessing at what image data is missing based on the surrounding pixels. More often than not, the results aren’t great.

Photos provided by author.

Raster images are typically used for photographs, digital artwork and web graphics (such as banner ads, social media
content and email graphics). Adobe Photoshop is the industry-standard image editor that is used to create, design and edit
raster images as well as to add effects, shadows and textures to existing designs.

CMYK vs. RGB

All raster images can be saved in one of two primary color models: CMYK and RGB.

CMYK – by Owley

RGB – by A&V

CMYK a four-color printing process that stands for cyan, magenta, yellow and key (black). These colors represent the four
inks that will combine during the printing process. Files saved in this format will be optimized for physical printing.
RGB is a light-based color model that stands for red, green and blue. These are the three primary colors of light that
combine to produce other colors. Files saved in this format will be optimized for the web, mobile phones, film and video—
anything that appears on a screen.

Lossy vs. lossless

Each raster image file is either lossless or lossy, depending on how the format handles your image data.

Lossless image formats capture all of the data of your original file. Nothing from the original file, photo, or piece of art is
lost—hence the term “lossless.” The file may still be compressed, but all lossless formats will be able to reconstruct your
image to its original state.

Lossy image formats approximate what your original image looks like. For example, a lossy image might reduce the amount
of colors in your image or analyze the image for any unnecessary data. These clever technical tricks will typically reduce the
file size, though they may reduce the quality of your image.

Typically, lossy files are much smaller than lossless files, making them ideal to use online where file size and download
speed are vital.

JPEG/JPG

JPEG is a lossy raster format that stands for Joint Photographic Experts Group, the technical team that developed it. This is
one of the most widely used formats online, typically for photos, email graphics and large web images like banner ads.
JPEG images have a sliding scale of compression that decreases file size tremendously, but increases artifacts or pixelation
the more the image is compressed.

No compression

High compression

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.

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.

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.

 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.

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.

Unicorn stickers by _ELM_

Trauby mascot by ktoons

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.

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 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 of.

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.

RAW

A raw image format contains the unprocessed data captured by a digital camera or scanner’s sensor. Typically, images are
processed (adjusted for color, white balance, exposure, etc.) 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).
via Adobe

You should use 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.

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.

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. Need to color correct a photo? Or add a layer of text? PSD = 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 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.

Vector images

Vector images are essentially giant math equations, and each dot, line and shape is represented by its own equation. Every
“equation” can be assigned a color, stroke or thickness (among other styles) to turn the shapes into art. Unlike raster
images, vector images are resolution independent. When you shrink or enlarge a vector image, your shapes get larger, but
you won’t lose any detail or get any pixelation. Because your image will always render identically, no matter the size, there is
no such thing as a lossy or lossless vector image type.
Walk for life poster by Adwindesign for Salam_h

Children’s book character by RVST® for soccerpoet

Logo design by spoon design

Vector images are typically used for logos, icons, typesetting and digital illustrations. Adobe Illustrator is the industry-
standard image editor that is used to create, design and edit vector images (though it can also incorporate raster images, as
well).

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.

Oakland poster by Martis Lupus

Yoga posterby Trisixtin for yogawithleo

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.

EPS

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.

by artsigma

by Dusan Klepic

by Sava Stoic
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.

Don’t use an EPS when…

 You’re dealing with photographs or artwork. EPS can handle raster images, but this type of image file is primarily
for vectors. Work with a PSD, TIF or JPEG when you have a photo project.

 You need to display an image online. Export to JPEG, PNG or GIF first.

AI

AI is a proprietary vector image format that stands for Adobe Illustrator. The format is based on both the EPS and PDF
standards developed by Adobe. Like those formats, AI files are primarily a vector-based format, though they can also
include embedded or linked raster images. AI files can be exported to both PDF and EPS files (for easy reviewing and
printing), and also JPEG, PNG, GIF, TIFF and PSD (for web use and further editing).

You should use an AI when…

 You need to edit a vector design. AI files allow you to move and alter every single element in your design with
just a click or two.

 You need to create a logo, icon or brand mascot. Every vector shape and line created in Illustrator can be blown
up to any size, which makes it ideal for images that need to be used in many different ways.

 You want a one-page print piece. Illustrator is perfect for posters, business cards, flyers and notecards that can
be combined with other raster images.

 You need to set type for a logo. Illustrator’s typesetting features are incredibly powerful, enabling any text to be
stretched, skewed and transformed any way imaginable.

Don’t use an AI when…

 You need to edit images. If a raster image (photo or artwork) is being used in a composition, Illustrator has a
limited number of tools to edit that image directly. Photoshop (PSD files) can make more comprehensive
adjustments like color, contrast and brightness.

Want to find a designer who can create all the right file types?

Our designers can do that!

Find a designer
The author
Samual Lundquist
Sam is a copywriter at 99designs. He's a Disney-nerd who loves to sing & dance and knows way too many TV jingles for his own good.
Tags

 Design basics
 file delivery
 raster
 vector

Related articles

Photoshop vs. Illustrator vs. InDesign

Correct file formats: RGB and CMYK

How to use math to draw better looking curves

Any comments?

Save my name, email, and website in this browser for the next time I comment.

Post comment

Pia
3 years ago
Hi bro!

Also a PNG can be in vector format.


Adobe Fireworks PNG vector format 😉

Reply

danny
2 years ago

I think you’re missing SVG here!

Reply

Courtney Cooper
2 years ago

Was thinking the same.

bob
last year

goat

Preston
10 months ago

Why is SVG not an optional file type in 99designs contests? It preserves everything, and doesn’t get too large unless the image
is extremely detailed and has tons of filters or something.

Jamahl
10 months ago

SVG is an optional file designers can include. 99designs requires certain file types for contests, including different vector
formats, but designers can always provide others if they are willing and able.

Trev Peterson
4 months ago

Yeah, seems limiting to require proprietary formats like ai. This basically means all designers have to use Adobe Illustrator for
vector work (instead of something like Inkscape or other tools). SVG seems a better format since it retains all the info, is vector
and, can be written by almost all vector tools (including, but not limited to, Illustrator).
Dave
2 years ago

And what about another vector format from Corel CDR?

Reply

Michael
2 years ago

This was very helpful and educational. Thank you. As someone who has returned to shooting photographic film I’d love to hear from you on
this format and how best to “translate” it to digital media for printing large prints.

Reply

Jamahl
2 years ago

A negative slide scanner would probably be your best bet

Susan Lane
2 years ago

Very nice explanation! The info i needed the most is about PSD because I got here: http://www.coreldraw.com/en/pages/psd-file/ some
useful information but I wanted to learn more. So thank you for the help 😉

Reply

Susan Lane
2 years ago

This is very informative. Do you maybe have any information on .pub file format? I have learned
here: http://www.coreldraw.com/en/pages/pub-file/ some basics and usage, but I am not sure what the benefits of using it are…

Reply

Caroline Mallard
last year

is there a way to convert a Tiff to a Vector, so that an original tiff photo can be blown up to any size?

Reply

Jamahl
last year
There are tools in Illustrator like autotrace that can work depending on how complicated the image is, but generally it would have
to be remade or traced over as a vector

Robin Cowcher
5 months ago

Hi there,
If you have a hand drawn image ie. pen and ink, just black line only, can it be scanned or saved as a vector image and/or pdf? The artwork
is not something that has typical vector elements, I have tried several things such as opening my photoshop file in illustrator and converting
to objects the saving but this appears to make no difference to the printer. regards Robin

Reply

Jamahl
5 months ago

No, a scanned image would be raster. You’d need to trace over it in Illustrator.

Sharon
4 months ago

This information is extremely helpful! Thank you!


Because I’m just someone who does this as a hobby, not a profession, my confusion comes from not knowing what format to export files to,
whether they’re raster or vector, when sending the file to a company that will put your designs on clothing, mugs, etc. Right now, I have a
vector file I need to pass on. Also, what would be the best format to save artwork to when emailing someone, to show them what the
artwork would like.
I appreciate any info you can provide me with.
Thanks so much.

Reply

Jamahl
3 months ago

Generally, you would use PNGs for preview files, but print files should be CMYK vector source files (or 300 PPI raster)—AI,
PDF, or EPS.

Julie Chen
3 months ago

Vector:
Another vote here for SVG!
And what about DWG?!

Reply

Want design tips & business trends (and the occasional


promotion) in your inbox?
Subscribers to our newsletter have been scientifically proven to be smarter, better looking and at least 50% more awesome than average.
Sign me up!
Join the community

by Tamara Milakovic

Current design contests


Designers, check out these contests so you can start building your career.

Ancient, Imaginative, Logo with lettering. Inspiring endless...
Logo design | $293


Logo for Christian Apparel Store, "Put On The New"
Logo design | $275


Create the Cover For A Debut Fantasy Novel
Book cover | $799


Create a logo for a tarot reader minus the usual tarot crap!
Logo design | $275


BBQ & Soul Food restaurant needs a unique logo
Logo & brand identity pack | $599


Design a fun and tech startup-ey logo for an Influencer...
Logo & social media pack | $400

 Logos, websites & more!


Get a design


Logo for Home Buying Company to Launch National...
Logo design | $463


Not your usual wellness website! I need a logo that...
Logo design | $299


Cosmetic Hair Tattoo Business Logo (***Gifted Artists Only***)
Logo design | $299


The All Hands project needs a logo that speaks to the...
Logo design | $499


Win my beer gut with NorCal Beer Tours!
Logo design | $499

Fresh, Chic Design Needed For A New Volcanic Mud Mask
Product packaging | $449


The Forge Needs Your Help!
Logo & brand identity pack | $1,699


Seekuniq needs your expertise to design an eye catching logo...
Logo & business card | $1,102


Curriculums Emprendejoven
Other business or advertising | $199


An AI and Machine Learning company needs a modern logo.
Logo design | $299


ErosApteka needs Logo,
Logo design | $299


Opportunity to Create a Fun + Innovative Logo for STEM...
Logo design | $2,299


Party barge business nautical pinup logo
Logo design | $299


NEW PROFESSIONAL SPORT BACKED COMPANY SEEKS...
Web page design | $1,749


Design the Covenant Logo!
Logo design | $299


Black Iron Burger needs a "express" or "ToGo" logo for...
Logo & brand identity pack | $1,699


Design for a medical practice with a focus on psychiatry
Logo & business card | $649


Design a logo for API monitoring service...
Logo design | $641

Get a design

Designers, see opportunities

Design services

 Design contests

 1-to-1 Projects

 Find a designer

 Discover inspiration

 Agencies

 API integrations
Support

 Help
Resources

 Pricing

 Become a designer

 Blog

 99awards
Company

 About

 Contact
© 99designs
 Terms

 Privacy



o
o
o
o
o
o

20%
The Creative Edge

 Get inspired
 Learn design
 Build a business
 Grow an agency
 Look inside 99d

99designs

 Home

 Browse categories
 How it works
 Find a designer
 Agencies

Design services

 Design contests
 1-to-1 Projects
 Find a designer
 Discover inspiration
 Agencies

Get a design

 Logo design
 Business card
 Web page design
 Brand guide
 Browse all categories

Support

 1 800 513 1678


 Help Center

Resources

 Pricing
 Become a designer
 Blog
search the si
Contents | Directory | Gallery | About | Contact

Learn Compare Buy Accessorize Store Share Print Tips Projects


Learn the Terms > File Formats
File Formats
Welcome to acronyms 101 — JPEG, TIFF and RAW
Finally we've come to something that is standard across all the digital cameras. Imagine that. Something that everyone agreed on!
When digital cameras store photographs on removable media cards, they can compress the photo to save room on the card. This lets you take more photos. The
compression will affect the quality of the photo, but unless you really want to make large prints of your photographs, you may not notice.
W HEN Y OU SAY RAW, D O YOU MEAN IT ' S NOT COOKED ?
The three main file formats for digital photographs are RAW, TIFF and JPEG. Both RAW and TIFF formats do not apply any compression to the photo to save space on
your memory card. When your camera saves a digital photo as a RAW or TIFF file (if it can), the photo includes all of the information captured by your camera's image
sensor.
JPEG is a far more common file format, and it does use compression. It is a much more popular format with the consumer market because it allows a 128 MB media
card to store a ton of photographs.
This is the difference in file size between a photo saved with the RAW/TIFF (uncompressed) format and a photo saved in the JPEG (compressed) format:
RAW / TIFF FILE SIZE JPEG FILE SIZE
3.4 MB 1.3 MB
And this is the number of photos that you might expect to be able to take using a 128 MB removable media card:
RAW / TIFF JPEG
38 photos 98 photos
It is a HUGE difference. But there's even more to it.
JPEG C OMPR ESS ION
We already know that a digital photograph stored in the JPEG format means that the file sizes are smaller which means a removable media card can store more photos.
The extra information is that on many digital cameras you can determine HOW MUCH compression you want to use.
JPEG files can either be mildly compressed or substantially compressed. Cameras will typically let you set two or three levels of compression. If you are willing to set
your camera to the highest compression level, you get even more mileage out of your removable media card:
JPEG LOW COMPRESSION JPEG HIGH COMPRESSION
1.3 MB 0.7 MB
And this is the number of photos that you might expect to be able to take using a 128 MB removable media card:
JPEG LOW COMPRESSION JPEG HIGH COMPRESSION
98 photos 183 photos
Again, this is a huge difference.
S O WHAT ' S TH E CATCH ?
You're now feeling that probably everyone who owns a digital camera always has their camera set to store digital photos in the JPEG format with high compression.
When you can get 183 photos onto a 128 MB card, that makes sense right?
There's always a catch. In this case, photographs that have been compressed a lot lose some of their detail and start to show grain. This effect is similar to when you
choose a high ISO setting on your camera.
RAW (No Compression)
This is a photo with no compression applied to it.
JPEG Low Compression
Same photo, same angle, same aperture, shutter speed and ISO setting.The only difference is that this
photo was saved in the JPEG format, with low compression.

JPEG High Compression


Same photo, same settings, just more compression.

JPEG High Compression Detail


In order to make the grain of a compressed JPEG clearer, I have included this detail of the compressed
photo.

Can you see the difference? You may not be able to at the image size that I have included here. If you had the original photographs on your computer at home the
differences might be more evident.
This does illustrate a good point about compression: you can only tell that an image has been compressed if you know what you are looking for. If you're not into
professional imaging, and want to get the most mileage out of your removable media card, then set your camera to JPEG with high compression.
T H E B ASIC R U LE OF T HUMB
Not all cameras will let you save photos in the RAW and TIFF formats. The default setting for cameras that do let you is JPEG. JPEG is also a file format that is easy to
share with others via e-mail. Sending a RAW file to someone is NOT a good idea (due to the substantial file size).
If you are a professional photographer and quality is very important, then buy a camera that can save in RAW and TIFF, and set the camera to these formats.
If you are not a professional, but enjoy high-quality photos, then you should be perfectly happy setting your camera to JPEG with low compression (the default for
almost all digital cameras).
If you really are not that picky about the quality of the photos that you take, and want to maximize the use of your removable media card, set your camera to JPEG
with high compression and take as many photos as you like.

<< Memory Cards Learn the Terms Battery Types >>


All web site content and all photographs are copyright © 2004-2005 Norcal Photo

Vous aimerez peut-être aussi