Computer Graphics Different Images File - PowerPoint Presentation

Slide1

Computer Graphics

Different Images FileSlide2

Introduction

When working with digital image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.Slide3

Files Used on the

Web

Gif, jpg and PNG files are all three used for the web. 

The

difference is the resulting image.

Each

one has its place for use on websites, and jpeg images can also be used in print files as well, although they need to be print resolution.

Web

images are typically 72 dpi, making them load quickly.Slide4

Gif

Gif images are great for creating very low resolution files for your website.

They

support transparency, which is great.

Transparency

allows you to place the gif over any color background or even photos, and you won’t see a border or background in the image

.

All you will see is the icon.  Slide5

Gif [cont.]

You typically use a gif for simple logos, icons, or symbols.

Using

a gif for photos is not recommended, because gifs are limited to 256 colors.

In

some cases you can use even less.

The

less colors that are in your image, the smaller your file size will be.Slide6

Gif [cont.]

Gif files also support a feature called interlacing, which preloads the

graphic.

It

starts out blurry and becomes focused and crisp when it is finished downloading.

This

makes the transition for your viewer easier, and they don’t have to wait as long to see logos or icons on your site.

Gifs also support animation. Gifs don’t support the level of animation that Flash files do, but it still allows you to add movement or transitions to your site, without a lot of programming or

coding.

More

advanced web designers and developers tend to use

jQuery

to create animated

effects.

Gif files are also compressed, which gives them a small file size.Slide7

Gif [cont.]

You mainly use a gif file format for logos and graphics with solid areas of color.

You wouldn’t use a photographic image, or a graphic with gradients.Slide8

Dither

Transparency

Dither is a method to disperse pixels, so that a gif can transition into its background easier. This was before PNG, which supports levels of opacity. You can choose to have no dither, Diffusion, Pattern, or Noise Transparency dither. Diffusion spreads out the edge pixels in order to let some of the background sow through. Pattern does the same thing, but uses a repeating pattern around the edges. Noise is straightforward and uses noise around the edges to feather the edge pixels.Slide9

Dither [cont.]

In some cases it is possible to perform three one-dimensional dithering operations instead of one three-dimensional one. Consider for instance the following palette

:

It is made of the eight possible red/green/blue combinations made of 0 and 1 values:

Red

0

0

1

1

0

0

1

1

Green

0

0

0

0

1

1

1

1

Blue

0

1

0

1

0

1

0

1Slide10

Dither [cont.]

One way of dithering an image using this palette is to convert the image into three greyscale images (separating the red, green and blue channels), dither each

subimage

to two

colors

separately and recombine the images into three channels. For instance, if at a given pixel the red channel is dithered to 1 and the green and blue channels are dithered to 0, the final pixel will be [1 0 0] which is the

color

red.

Separate-space dithering works by splitting the image into three red, green and blue channels. Each of this channel is treated as a greyscale image that is then dithered to black and white using any dithering method seen previously. The resulting images are then treated again as three red, green and blue channels and recombined into the final image

:Slide11

Dither [cont.]

Here are the results with serpentine Floyd-Steinberg dithering applied to each channel. On the left, no

color

correction, as The Gimp or Photoshop would do; on the right, gamma-corrected dithering

:Slide12

Dither [cont.]Slide13

Dither [cont.]

Diffusion:Slide14

Dither [cont.]

Pattern:Slide15

Dither [cont.]

Noise:Slide16

Jpeg

Joint Photographic Experts Group

Jpeg files can be relatively small in size, but they still look crisp and

beautiful.

Jpegs

support up to 16.7 million colors, which makes them the right choice for complex images and

photographs.

With the wide range of colors, you can have beautiful imagery without a bulky file size.With

new responsive techniques, you can also have flexible images without large loading

times.

There

are also progressive jpegs, which preload similar to interlaced

gifs.

They

start out blurry, but come into focus as their information loads.Slide17

PNG

Portable Network Graphics

PNG files were developed to build upon the purpose of

gifs.

Designers

need the ability to incorporate low-resolution images that load quickly but also look great,

too.

This is where PNG comes in.

PNG-8

does not support transparency, but PNG-24 and PNG-32

do.

PNG

transparency is different from Gif transparency, because they can have different levels of

transparency.

Gifs are either transparent or opaque. Below is a comparison of how a gif will look if the edges of the image are blurred or they are semi transparent:Slide18

You will notice that the edges are rough and pixelated. Gifs are best for crisp edged graphics. Below is the same file, but saved as a png-24:

PNG

Portable Network GraphicsSlide19

You will notice in the PNG file above that the edges are blurred or feathered, just as we had set it up in our Photoshop file. This will allow for some nice effects for websites and images.

PNG files are lossless, which means that they do not lose quality during editing. This is unlike jpegs, where they lose quality. PNG files tend to be larger than jpegs, because they contain more information, and are lossless. PNG files do not support animation. For this purpose, a gif should be used

.

PNG

Portable Network Graphics