SlideShare una empresa de Scribd logo
1 de 29
Graphic Image File. Indexed color file, for raster (pixmap) data
only. Primarily for synthetic, somewhat flat images such as
logos, diagrams, navigation buttons, etc.
Technically GIF and its LZW compression algorithm are
―lossless,‖ but since it supports indexed color only (8-bit or less),
you often have to permanently throw away image data prior to
(or in the process of) exporting your master file as a GIF. Don’t
be confused by Photoshop’s Save for Web options for GIF, where
you’ll see a ―lossy‖ checkbox: that just rearranges the pixel
patterns slightly, prior to exporting the GIF, to enhance the
compression. GIF being a ―lossless‖ format means that, unlike
with JPEGs (a lossy format), you could possibly open a GIF
repeatedly, edit it, and re-save it back out again without
necessarily degrading it. That’s not ideal, unless you really know
what you’re doing. It’s generally best to go back to the master
file — often a PSD — for editing, and then re-export the GIF.
GIF is my best Web option for images with
flat, solid colors — the sort of images one
normally create in vector drawing
programs such as Illustrator. Of course I
love to put my Illustrator images on the
Web in their original vector form, but for
the most part that is not possible (but see
SVG lower down in this table). So I export
our vectors to raster formats like GIF or
PNG for the Web.
JPEG
Joint Photographic
Experts Group.
Compressed, lossy
file format, for raster
(pixmap) data only.
Mostly for phototype images on the
Web. Can hold RGB
data; many
compression levels
and other options
available.



Also be careful not to edit
JPEG files if at all possible;
go back to the original
master file (PSD, TIFF, or
whatever) for editing and
then re-export a new JPEG
with your changes. JPEG
compression always
involves data loss and
degradation; editing JPEGs
is just corrupting the
corruption — it’s
degrading!
I have to be careful not to edit JPEG
files if at all possible; go back to the
original master file (PSD, TIFF, or
whatever) for editing and then reexport a new JPEG with my changes.
JPEG compression always involves
data loss and degradation; editing
JPEGs is just corrupting the corruption
— it’s degrading!




Portable Network Graphics. The newest
of the three major Web graphics file
formats, with more features than GIF or
JPEG.
PNG’s use is growing slowly over time,
especially as newer browsers come into
play. It’s already a reasonable
replacement for many GIFs (but not for
animated GIFs); but for photo-type
images, JPEG will usually be more
efficient.
Lossless compression which means I could use it as an
editable format, although I probably should not in most
cases.
Multi-bit transparency map (alpha channel), even for
photo-type images.
Metadata for color management (gamma and ICC
color profile), although this is something of a tease since
most browsers do not support those things.
Can hold either RGB data (like a JPEG) or indexedcolor data (like a GIF) — but not CMYK, since that is
designed for the Web, not for print.
Scalable Vector Graphics. Attempt to introduce a
standard vector format for the Web. Wouldn't you love
to put flat-color or other simple graphics (like logos and
diagrams) online in compact, scalable vector form? The
W3C has approved this Adobe-sponsored XML
derivative. Not really usable yet in most real-world
projects, because browser support is still spotty — but
improving. The only Web vector format widely used at
present is to embed images in Flash, but that’s not really
a substitute for SVG (you wouldn’t create a Flash file
just to hold a non-animated scalable logo, for example).
Using SVG would not be a suitable option for me at
this time because browser support is spotty.
PostScript is a page-description language
that some programs can generate and some
printers (the expensive kind) can print
from. A .ps is a simple text file that results
when you tell a program to send its
PostScript instructions to a file on your
hard drive instead of to a printer; it’s
therefore called a ―print to disk file.‖ (It’s
also sometimes called a ―pure PostScript
file‖ or a ―PostScript dump.‖)
There are basically three things I can do with a
.ps file: send it to a printer which should then
print the original page, not the PostScript text
convert it to PDF via Acrobat Distiller or if I had
a PostScript programmer edit it directly in a text
editor. I am not a PostScript programmer
but, being rather geeky for a creative type, I
would have to be able to make some
simple, useful changes within .ps files on
occasion. As with any programming code, I have
to be careful one tiny mistake and the whole
thing may not work.
Encapsulated PostScript. A useful but flaky
extension of the basic PostScript file
Encapsulated PostScript. EPS is essentially a
PostScript file in an ―envelope.‖ It usually —
but not always — includes a rasterized
preview in TIFF or PICT, plus some
metadata. EPS was originally the native
format of Illustrator, back in the primordial
days of PostScript..
Pros: can contain clipping path, true font
data, various kinds of metadata; widely
accepted.
Cons: previews optional & nonstandard;
sometimes contains insufficient data but
you wouldn’t know because the preview
can be misleading; file format has evolved
so is nonstandard; may only print properly
to PostScript printers; can be flaky at times.


Adobe
Illustrator's
proprietary file
format — closely
related to, but
not the same as,
EPS.



The Adobe Illustrator
program’s proprietary
format originally was EPS.
Illustrator’s current .ai
format is essentially an
extension of that original
EPS format, broadened to
accommodate Illustrator’s
newer capabilities. A few
other programs may
support .ai files, but it’s a
moving target as
Illustrator evolves. Most
other programs stick to
the original, more generic
form (EPS).
AI has about the same as EPS , so the Pros and Cons are
about the same

Pros: can contain clipping path, true font data, various
kinds of metadata; widely accepted.
Cons: previews optional & nonstandard; sometimes
contains insufficient data but you wouldn’t know
because the preview can be misleading; file format has
evolved so is nonstandard; may only print properly to
PostScript printers; can be flaky at times.


Portable Document Format, also known as ―Adobe
Acrobat format. Adobe has been slowly moving
towards PDF as a universal file format (especially
within its own product line), but it’s not clear
whether it will ever replace most proprietary and
generic graphic file formats.

You might like to visit Adobe’s PDF Tech Center
online.
Still to come: discussion of prepress variants of PDF
with more specific specs:
PDF/X-1a
PDF/X-3
Cons: Content formatted for Print – A PDF file is usually
formatted to the size of a printed page like A4 or Letter,
not to the size of a screen. This makes it difficult to read
online as the user needs to spend more time scrolling
through the content as they read. Most PDF files have
been converted from a document format and as such, are
long and boring to read in an online environment.
Pros: Protecting Intellectual Property – If you have a
portion of content that you do not want copied by
visitors, then PDF is the way to go. This format also
enables the creator to insert information that stays with
the content so readers always know exactly where it
came from.
PSD stands for ―Photoshop document.‖ It’s
an application-specific proprietary
format, but because of Photoshop’s
dominant position in the pixel-editing
world, PSD has become something of a
quasi-standard. A number of other
programs, even some that don’t come from
Adobe, support PSD as an additional file
format — but usually as read-only or for
import/export purposes, not as their true
Pros: Changes are a lot faster (including changes to
colors, and to some extent to fonts). When you're laying
the page out as HTML, you're showing the client
something a lot closer to what the final product will
look like. They can see the effects of a liquid layout by
changing the size of the window.
Cons: Not all visual designers can create a mockup in
HTML. It will have to be a two person task. An HTML
person and a Photoshop person.
A newer (and basically unrelated) meaning of ―raw‖ —
more formally called Camera Raw — has become very
common with the rise of digital photography. Some
midrange, and all high-end, digital cameras have the
ability to save images with no lossy compression (as
opposed to the JPEGs that are more common as a digital
camera format). Essentially, they’re saving the full
information that their sensors capture. Camera Raw
isn’t really a file format in the conventional sense
because each brand of camera structures the data
differently, and expects you to read the data (or transfer
it to your computer), and perhaps edit it as well, using
their own software. I suspect the lock-in is intentional,
and of course it’s bad for consumers.
Pro: Raw files contain the full, unaltered information as
taken off the sensor, while in RGB (TIFF or JPEG) ones
this information is already converted, for better or
worse, using the current camera settings. Performing
that conversion on a PC, you can use more powerful
and/or most up-to-date software, possibly better than
the camera firmware.
Cons: With raw files you need to do the conversion
before you can edit, print, or even view your images; an
extra step.
Tagged Image File Format. Raster only. Most widely used
format for photos in prepress world (although EPS is also
used for this purpose). Cross-platform.
There are many variations of TIFF — in fact, it’s really a
whole family of file formats — and you can’t assume that a
program that “supports TIFF” will understand all of them.
Variations include compressed (lossless LZW, or other
methods) vs. uncompressed; RGB vs. CMYK; 24 bit vs. 48
bit; and a variety of TIFF-based alternative file formats,
such as TIFF IT (widely used by ad agencies). TIFF is really
designed for use by professional graphic designers.
Although the format itself is relatively trouble-free, the
numerous variations are likely to confuse nonprofessionals trying to match individual TIFFs to the
programs and processes that support them.
Pros: most reliable, widespread format for raster data.
Can hold almost any resolution, color scheme, etc. I like
this format because it’s uncomplicated and (unlike EPS)
rarely causes trouble.

Cons: can’t hold vector data; large, and sometimes slow
to print; Mac and PC have slightly different flavors
(although most Mac apps support both); many
nonstandard ―improved‖ versions floating around.
Common but Windows-only raster
format. BMP is very common in the
Windows world, but is not crossplatform. It’s not supported by
professional prepress processes or
by Web browsers, and so is only
appropriate for internal use within
the local Windows environment.
Pros: Bitmap files may be easily created from existing pixel
data stored in an array in memory. Retrieving pixel data
stored in a bitmap file may often be accomplished by using a
set of coordinates that allows the data to be conceptualized
as a grid. Pixel values may be modified individually or as
large groups by altering a palette if present. Bitmap files may
translate well to dot-format output devices such as CRTs and
printers.
Cons: They can be very large, particularly if the image
contains a large number of colors. Data compression can
shrink the size of pixel data, but the data must be expanded
before it can be used, and this can slow down the reading
and rendering process considerably. Also, the more complex
a bitmap image (large number of colors and minute detail),
the less efficient the compression process will be.
Unlike JPEGs, GIFs, and BMP images, vector
graphics are not made up of a grid of pixels.
Instead, vector graphics are comprised of paths,
which are defined by a start and end point, along
with other points, curves, and angles along the
way. A path can be a line, a square, a triangle, or
a curvy shape. These paths can be used to create
simple drawings or complex diagrams. Paths are
even used to define the characters of specific
typefaces.
Pros: Vector files are useful for storing images composed of
line-based elements such as lines and polygons, or those that
can be decomposed into simple geometrical objects, such as
text. More sophisticated formats can also store 3D objects
such as polyhedrons and wire-frame models. Vector data can
be easily scaled and otherwise manipulated to accommodate
the resolution of a spectrum of output devices.
Cons: Vector files cannot easily be used to store extremely
complex images, such as some photographs, where color
information is paramount and may vary on a pixel-by-pixel
basis. The appearance of vector images can vary
considerably depending upon the application interpreting
the image. Factors include the rendering application's
compatibility with the creator application and the
sophistication of its toolkit of geometric primitives and
drawing operations.
Most images you see on your computer screen
are raster graphics. Pictures found on the Web
and photos you import from your digital camera
are raster graphics. They are made up of grid of
pixels, commonly referred to as a bitmap. The
larger the image, the more disk space the image
file will take up. For example, a 640 x 480 image
requires information to be stored for 307,200
pixels, while a 3072 x 2048 image (from a 6.3
Megapixel digital camera) needs to store
information for a whopping 6,291,456 pixels.
Pros: The geographic location of each cell is implied by
its position in the cell matrix. Accordingly, other than an
origin point, e.g. bottom left corner, no geographic
coordinates are stored. Due to the nature of the data
storage technique data analysis is usually easy to
program and quick to perform.
Cons: The cell size determines the resolution at which
the data is represented. It is especially difficult to
adequately represent linear features depending on the
cell resolution. Accordingly, network linkages are
difficult to establish.

Más contenido relacionado

La actualidad más candente

Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro formaOlliePull
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formatsRuby Hooper
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formatskatyfleetham
 
Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework Nicholas Aldous
 
Graphics case study.pptx (1)
Graphics case study.pptx (1)Graphics case study.pptx (1)
Graphics case study.pptx (1)Sam Hughes
 

La actualidad más candente (7)

Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro forma
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formats
 
File formats (re sub)
File formats (re sub)File formats (re sub)
File formats (re sub)
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formats
 
Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework
 
File types
File typesFile types
File types
 
Graphics case study.pptx (1)
Graphics case study.pptx (1)Graphics case study.pptx (1)
Graphics case study.pptx (1)
 

Destacado

An RDM Guide for Researchers: Presentation at BIDS Reproducibility Working Group
An RDM Guide for Researchers: Presentation at BIDS Reproducibility Working GroupAn RDM Guide for Researchers: Presentation at BIDS Reproducibility Working Group
An RDM Guide for Researchers: Presentation at BIDS Reproducibility Working GroupJohn Borghi
 
IT Aakash Enterprise resource planning in mumbai
IT Aakash Enterprise resource planning in mumbaiIT Aakash Enterprise resource planning in mumbai
IT Aakash Enterprise resource planning in mumbaiDurgesh Nadar
 
مسرحية زيوس - كنان القرحالي
مسرحية زيوس - كنان القرحاليمسرحية زيوس - كنان القرحالي
مسرحية زيوس - كنان القرحاليKenan Alqurhaly
 
Парк-усадьба «Студеные ключи»
Парк-усадьба «Студеные ключи»Парк-усадьба «Студеные ключи»
Парк-усадьба «Студеные ключи»Алексей Назаров
 
Productivity tablet apps for PAs (PA life Nov 2014)
Productivity tablet apps for PAs (PA life Nov 2014)Productivity tablet apps for PAs (PA life Nov 2014)
Productivity tablet apps for PAs (PA life Nov 2014)Carl Barlow
 
Gimp 2.8 vs. photoshop
Gimp 2.8 vs. photoshopGimp 2.8 vs. photoshop
Gimp 2.8 vs. photoshopdpropst
 
عبد البيضة - كنان القرحالي
عبد البيضة - كنان القرحاليعبد البيضة - كنان القرحالي
عبد البيضة - كنان القرحاليKenan Alqurhaly
 
صُراع الحب - كنان القرحالي
صُراع الحب - كنان القرحاليصُراع الحب - كنان القرحالي
صُراع الحب - كنان القرحاليKenan Alqurhaly
 
Juan luna y novicio
Juan luna y novicioJuan luna y novicio
Juan luna y novicioAj Pogi
 
Cement manufacturing process
Cement manufacturing processCement manufacturing process
Cement manufacturing processShreenath Bohra
 

Destacado (14)

An RDM Guide for Researchers: Presentation at BIDS Reproducibility Working Group
An RDM Guide for Researchers: Presentation at BIDS Reproducibility Working GroupAn RDM Guide for Researchers: Presentation at BIDS Reproducibility Working Group
An RDM Guide for Researchers: Presentation at BIDS Reproducibility Working Group
 
IT Aakash Enterprise resource planning in mumbai
IT Aakash Enterprise resource planning in mumbaiIT Aakash Enterprise resource planning in mumbai
IT Aakash Enterprise resource planning in mumbai
 
مسرحية زيوس - كنان القرحالي
مسرحية زيوس - كنان القرحاليمسرحية زيوس - كنان القرحالي
مسرحية زيوس - كنان القرحالي
 
Парк-усадьба «Студеные ключи»
Парк-усадьба «Студеные ключи»Парк-усадьба «Студеные ключи»
Парк-усадьба «Студеные ключи»
 
Productivity tablet apps for PAs (PA life Nov 2014)
Productivity tablet apps for PAs (PA life Nov 2014)Productivity tablet apps for PAs (PA life Nov 2014)
Productivity tablet apps for PAs (PA life Nov 2014)
 
El buen ejemplo de una mujer
El buen ejemplo de una mujerEl buen ejemplo de una mujer
El buen ejemplo de una mujer
 
awewaewa
awewaewaawewaewa
awewaewa
 
Gimp 2.8 vs. photoshop
Gimp 2.8 vs. photoshopGimp 2.8 vs. photoshop
Gimp 2.8 vs. photoshop
 
عبد البيضة - كنان القرحالي
عبد البيضة - كنان القرحاليعبد البيضة - كنان القرحالي
عبد البيضة - كنان القرحالي
 
صُراع الحب - كنان القرحالي
صُراع الحب - كنان القرحاليصُراع الحب - كنان القرحالي
صُراع الحب - كنان القرحالي
 
Jenv.be @ VoxxedDays
Jenv.be @ VoxxedDaysJenv.be @ VoxxedDays
Jenv.be @ VoxxedDays
 
cerebral hemispheres
cerebral hemispheres cerebral hemispheres
cerebral hemispheres
 
Juan luna y novicio
Juan luna y novicioJuan luna y novicio
Juan luna y novicio
 
Cement manufacturing process
Cement manufacturing processCement manufacturing process
Cement manufacturing process
 

Similar a Understanding common graphic file formats for the web

File format essay (1) (1)
File format essay (1) (1)File format essay (1) (1)
File format essay (1) (1)brad scanlan
 
E - TECH : File Image Formats
E - TECH : File Image FormatsE - TECH : File Image Formats
E - TECH : File Image FormatsKikoSyCip
 
Technical Files Presentation
Technical Files PresentationTechnical Files Presentation
Technical Files PresentationWildOakForrest
 
File Types Pro Forma
File Types Pro FormaFile Types Pro Forma
File Types Pro FormaEmily-F
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro formaOlliePull
 
File types pro forma(1)talia
File types pro forma(1)taliaFile types pro forma(1)talia
File types pro forma(1)taliaFrankieHall0
 
Technical File Presentation Version 2
Technical File Presentation Version 2Technical File Presentation Version 2
Technical File Presentation Version 2WildOakForrest
 
File types pro forma(2)
File types pro forma(2)File types pro forma(2)
File types pro forma(2)Joe Young
 
File types pro forma(1) 2-2
File types pro forma(1) 2-2File types pro forma(1) 2-2
File types pro forma(1) 2-2matt darley
 
file types pro forma
file types pro formafile types pro forma
file types pro formaLiam Allan
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro formaurquhart11
 
Graphic File Formats
Graphic File FormatsGraphic File Formats
Graphic File Formatsbs07sjh
 

Similar a Understanding common graphic file formats for the web (20)

Chap59
Chap59Chap59
Chap59
 
File format essay (1) (1)
File format essay (1) (1)File format essay (1) (1)
File format essay (1) (1)
 
File types
File typesFile types
File types
 
E - TECH : File Image Formats
E - TECH : File Image FormatsE - TECH : File Image Formats
E - TECH : File Image Formats
 
Technical Files Presentation
Technical Files PresentationTechnical Files Presentation
Technical Files Presentation
 
Chap60
Chap60Chap60
Chap60
 
File Types Pro Forma
File Types Pro FormaFile Types Pro Forma
File Types Pro Forma
 
File types
File typesFile types
File types
 
IMAGE FILE FORMATS
IMAGE FILE FORMATSIMAGE FILE FORMATS
IMAGE FILE FORMATS
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro forma
 
File types pro forma(1)talia
File types pro forma(1)taliaFile types pro forma(1)talia
File types pro forma(1)talia
 
Technical File Presentation Version 2
Technical File Presentation Version 2Technical File Presentation Version 2
Technical File Presentation Version 2
 
File types pro forma(2)
File types pro forma(2)File types pro forma(2)
File types pro forma(2)
 
File types pro forma
File types pro formaFile types pro forma
File types pro forma
 
File types pro forma(1) 2-2
File types pro forma(1) 2-2File types pro forma(1) 2-2
File types pro forma(1) 2-2
 
file types pro forma
file types pro formafile types pro forma
file types pro forma
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro forma
 
Graphic File Formats
Graphic File FormatsGraphic File Formats
Graphic File Formats
 
File types
File typesFile types
File types
 
File types.
File types.File types.
File types.
 

Último

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 

Último (20)

The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 

Understanding common graphic file formats for the web

  • 1.
  • 2. Graphic Image File. Indexed color file, for raster (pixmap) data only. Primarily for synthetic, somewhat flat images such as logos, diagrams, navigation buttons, etc. Technically GIF and its LZW compression algorithm are ―lossless,‖ but since it supports indexed color only (8-bit or less), you often have to permanently throw away image data prior to (or in the process of) exporting your master file as a GIF. Don’t be confused by Photoshop’s Save for Web options for GIF, where you’ll see a ―lossy‖ checkbox: that just rearranges the pixel patterns slightly, prior to exporting the GIF, to enhance the compression. GIF being a ―lossless‖ format means that, unlike with JPEGs (a lossy format), you could possibly open a GIF repeatedly, edit it, and re-save it back out again without necessarily degrading it. That’s not ideal, unless you really know what you’re doing. It’s generally best to go back to the master file — often a PSD — for editing, and then re-export the GIF.
  • 3. GIF is my best Web option for images with flat, solid colors — the sort of images one normally create in vector drawing programs such as Illustrator. Of course I love to put my Illustrator images on the Web in their original vector form, but for the most part that is not possible (but see SVG lower down in this table). So I export our vectors to raster formats like GIF or PNG for the Web.
  • 4. JPEG Joint Photographic Experts Group. Compressed, lossy file format, for raster (pixmap) data only. Mostly for phototype images on the Web. Can hold RGB data; many compression levels and other options available.  Also be careful not to edit JPEG files if at all possible; go back to the original master file (PSD, TIFF, or whatever) for editing and then re-export a new JPEG with your changes. JPEG compression always involves data loss and degradation; editing JPEGs is just corrupting the corruption — it’s degrading!
  • 5. I have to be careful not to edit JPEG files if at all possible; go back to the original master file (PSD, TIFF, or whatever) for editing and then reexport a new JPEG with my changes. JPEG compression always involves data loss and degradation; editing JPEGs is just corrupting the corruption — it’s degrading!
  • 6.   Portable Network Graphics. The newest of the three major Web graphics file formats, with more features than GIF or JPEG. PNG’s use is growing slowly over time, especially as newer browsers come into play. It’s already a reasonable replacement for many GIFs (but not for animated GIFs); but for photo-type images, JPEG will usually be more efficient.
  • 7. Lossless compression which means I could use it as an editable format, although I probably should not in most cases. Multi-bit transparency map (alpha channel), even for photo-type images. Metadata for color management (gamma and ICC color profile), although this is something of a tease since most browsers do not support those things. Can hold either RGB data (like a JPEG) or indexedcolor data (like a GIF) — but not CMYK, since that is designed for the Web, not for print.
  • 8. Scalable Vector Graphics. Attempt to introduce a standard vector format for the Web. Wouldn't you love to put flat-color or other simple graphics (like logos and diagrams) online in compact, scalable vector form? The W3C has approved this Adobe-sponsored XML derivative. Not really usable yet in most real-world projects, because browser support is still spotty — but improving. The only Web vector format widely used at present is to embed images in Flash, but that’s not really a substitute for SVG (you wouldn’t create a Flash file just to hold a non-animated scalable logo, for example).
  • 9. Using SVG would not be a suitable option for me at this time because browser support is spotty.
  • 10. PostScript is a page-description language that some programs can generate and some printers (the expensive kind) can print from. A .ps is a simple text file that results when you tell a program to send its PostScript instructions to a file on your hard drive instead of to a printer; it’s therefore called a ―print to disk file.‖ (It’s also sometimes called a ―pure PostScript file‖ or a ―PostScript dump.‖)
  • 11. There are basically three things I can do with a .ps file: send it to a printer which should then print the original page, not the PostScript text convert it to PDF via Acrobat Distiller or if I had a PostScript programmer edit it directly in a text editor. I am not a PostScript programmer but, being rather geeky for a creative type, I would have to be able to make some simple, useful changes within .ps files on occasion. As with any programming code, I have to be careful one tiny mistake and the whole thing may not work.
  • 12. Encapsulated PostScript. A useful but flaky extension of the basic PostScript file Encapsulated PostScript. EPS is essentially a PostScript file in an ―envelope.‖ It usually — but not always — includes a rasterized preview in TIFF or PICT, plus some metadata. EPS was originally the native format of Illustrator, back in the primordial days of PostScript..
  • 13. Pros: can contain clipping path, true font data, various kinds of metadata; widely accepted. Cons: previews optional & nonstandard; sometimes contains insufficient data but you wouldn’t know because the preview can be misleading; file format has evolved so is nonstandard; may only print properly to PostScript printers; can be flaky at times.
  • 14.  Adobe Illustrator's proprietary file format — closely related to, but not the same as, EPS.  The Adobe Illustrator program’s proprietary format originally was EPS. Illustrator’s current .ai format is essentially an extension of that original EPS format, broadened to accommodate Illustrator’s newer capabilities. A few other programs may support .ai files, but it’s a moving target as Illustrator evolves. Most other programs stick to the original, more generic form (EPS).
  • 15. AI has about the same as EPS , so the Pros and Cons are about the same Pros: can contain clipping path, true font data, various kinds of metadata; widely accepted. Cons: previews optional & nonstandard; sometimes contains insufficient data but you wouldn’t know because the preview can be misleading; file format has evolved so is nonstandard; may only print properly to PostScript printers; can be flaky at times.
  • 16.  Portable Document Format, also known as ―Adobe Acrobat format. Adobe has been slowly moving towards PDF as a universal file format (especially within its own product line), but it’s not clear whether it will ever replace most proprietary and generic graphic file formats. You might like to visit Adobe’s PDF Tech Center online. Still to come: discussion of prepress variants of PDF with more specific specs: PDF/X-1a PDF/X-3
  • 17. Cons: Content formatted for Print – A PDF file is usually formatted to the size of a printed page like A4 or Letter, not to the size of a screen. This makes it difficult to read online as the user needs to spend more time scrolling through the content as they read. Most PDF files have been converted from a document format and as such, are long and boring to read in an online environment. Pros: Protecting Intellectual Property – If you have a portion of content that you do not want copied by visitors, then PDF is the way to go. This format also enables the creator to insert information that stays with the content so readers always know exactly where it came from.
  • 18. PSD stands for ―Photoshop document.‖ It’s an application-specific proprietary format, but because of Photoshop’s dominant position in the pixel-editing world, PSD has become something of a quasi-standard. A number of other programs, even some that don’t come from Adobe, support PSD as an additional file format — but usually as read-only or for import/export purposes, not as their true
  • 19. Pros: Changes are a lot faster (including changes to colors, and to some extent to fonts). When you're laying the page out as HTML, you're showing the client something a lot closer to what the final product will look like. They can see the effects of a liquid layout by changing the size of the window. Cons: Not all visual designers can create a mockup in HTML. It will have to be a two person task. An HTML person and a Photoshop person.
  • 20. A newer (and basically unrelated) meaning of ―raw‖ — more formally called Camera Raw — has become very common with the rise of digital photography. Some midrange, and all high-end, digital cameras have the ability to save images with no lossy compression (as opposed to the JPEGs that are more common as a digital camera format). Essentially, they’re saving the full information that their sensors capture. Camera Raw isn’t really a file format in the conventional sense because each brand of camera structures the data differently, and expects you to read the data (or transfer it to your computer), and perhaps edit it as well, using their own software. I suspect the lock-in is intentional, and of course it’s bad for consumers.
  • 21. Pro: Raw files contain the full, unaltered information as taken off the sensor, while in RGB (TIFF or JPEG) ones this information is already converted, for better or worse, using the current camera settings. Performing that conversion on a PC, you can use more powerful and/or most up-to-date software, possibly better than the camera firmware. Cons: With raw files you need to do the conversion before you can edit, print, or even view your images; an extra step.
  • 22. Tagged Image File Format. Raster only. Most widely used format for photos in prepress world (although EPS is also used for this purpose). Cross-platform. There are many variations of TIFF — in fact, it’s really a whole family of file formats — and you can’t assume that a program that “supports TIFF” will understand all of them. Variations include compressed (lossless LZW, or other methods) vs. uncompressed; RGB vs. CMYK; 24 bit vs. 48 bit; and a variety of TIFF-based alternative file formats, such as TIFF IT (widely used by ad agencies). TIFF is really designed for use by professional graphic designers. Although the format itself is relatively trouble-free, the numerous variations are likely to confuse nonprofessionals trying to match individual TIFFs to the programs and processes that support them.
  • 23. Pros: most reliable, widespread format for raster data. Can hold almost any resolution, color scheme, etc. I like this format because it’s uncomplicated and (unlike EPS) rarely causes trouble. Cons: can’t hold vector data; large, and sometimes slow to print; Mac and PC have slightly different flavors (although most Mac apps support both); many nonstandard ―improved‖ versions floating around.
  • 24. Common but Windows-only raster format. BMP is very common in the Windows world, but is not crossplatform. It’s not supported by professional prepress processes or by Web browsers, and so is only appropriate for internal use within the local Windows environment.
  • 25. Pros: Bitmap files may be easily created from existing pixel data stored in an array in memory. Retrieving pixel data stored in a bitmap file may often be accomplished by using a set of coordinates that allows the data to be conceptualized as a grid. Pixel values may be modified individually or as large groups by altering a palette if present. Bitmap files may translate well to dot-format output devices such as CRTs and printers. Cons: They can be very large, particularly if the image contains a large number of colors. Data compression can shrink the size of pixel data, but the data must be expanded before it can be used, and this can slow down the reading and rendering process considerably. Also, the more complex a bitmap image (large number of colors and minute detail), the less efficient the compression process will be.
  • 26. Unlike JPEGs, GIFs, and BMP images, vector graphics are not made up of a grid of pixels. Instead, vector graphics are comprised of paths, which are defined by a start and end point, along with other points, curves, and angles along the way. A path can be a line, a square, a triangle, or a curvy shape. These paths can be used to create simple drawings or complex diagrams. Paths are even used to define the characters of specific typefaces.
  • 27. Pros: Vector files are useful for storing images composed of line-based elements such as lines and polygons, or those that can be decomposed into simple geometrical objects, such as text. More sophisticated formats can also store 3D objects such as polyhedrons and wire-frame models. Vector data can be easily scaled and otherwise manipulated to accommodate the resolution of a spectrum of output devices. Cons: Vector files cannot easily be used to store extremely complex images, such as some photographs, where color information is paramount and may vary on a pixel-by-pixel basis. The appearance of vector images can vary considerably depending upon the application interpreting the image. Factors include the rendering application's compatibility with the creator application and the sophistication of its toolkit of geometric primitives and drawing operations.
  • 28. Most images you see on your computer screen are raster graphics. Pictures found on the Web and photos you import from your digital camera are raster graphics. They are made up of grid of pixels, commonly referred to as a bitmap. The larger the image, the more disk space the image file will take up. For example, a 640 x 480 image requires information to be stored for 307,200 pixels, while a 3072 x 2048 image (from a 6.3 Megapixel digital camera) needs to store information for a whopping 6,291,456 pixels.
  • 29. Pros: The geographic location of each cell is implied by its position in the cell matrix. Accordingly, other than an origin point, e.g. bottom left corner, no geographic coordinates are stored. Due to the nature of the data storage technique data analysis is usually easy to program and quick to perform. Cons: The cell size determines the resolution at which the data is represented. It is especially difficult to adequately represent linear features depending on the cell resolution. Accordingly, network linkages are difficult to establish.