Computer Graphics Different Images File

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.

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.

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.  

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.

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.

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.

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.

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 1 Green Blue

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:

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:

Dither [cont.]

Dither [cont.] Diffusion:

Dither [cont.] Pattern:

Dither [cont.] Noise:

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.

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:

PNG Portable Network Graphics 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 Graphics 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.