Which One Of These Animation Formats Supports Transparency?

Back to Class V page »

Web Graphic Formats

Purpose

• Visual/Artful Entreatment — maintains visitor involvement and attention
• Create Visual Construction — clarify information bureaucracy (remember typography and hierarchy here)
• Communicate ideas visually

Our sites are usually quite boring without the use of graphics.

Web Graphics Guidelines

• Web graphics should fit in with the purpose, organization and style of the site
• Large (file size) graphics add load time to a page — avoid.
• Graphics should help focus visitor's attention on what's important on the page
• Avoid abrasive images, animations, gratuitous effects — they get old fast without purpose.
• Graphics should never be used for text content, except if a header necessitates including a logo.. This diminishes search engine indexing, accessibility, etc.
• Brand graphics accessible with alternate text.
• Make certain there is sufficient contrast when using text in graphics and then they are legible. This is particularly important when using background images.

Web Graphic Formats

There are 3 file formats for graphics used on the web: JPG, GIF, and PNG. Each of these file formats are designed with a specific purpose in mind, so information technology is important to understand the differences when we apply them in our websites.

JPG

The JPG epitome format was designed to efficiently shop and compress realistic images and artwork (both in color and greyscale). The JPG format does a very good job of compressing images with lots of colors and gradations in colors. Think of a JPG as a highly compressed photograph.

The JPG format is non capable of saving whatsoever transparencies. If transparency is needed in the groundwork of your image, y'all must choose a different format.

When saving images in the JPG format, you can choose the level of pinch to balance the file size and paradigm quality. File size is directly related to the actual size (in pixels) of the image. A larger pixel size volition e'er result in a larger file size.

Examples of images that should be saved in the JPG format:

GIF and PNG

The GIF and PNG image formats utilise what is called "index-colour". They store a minimized color palette in the image file and keys to where those colors should be located in the image. File size for GIF and PNG images is generally related to the number of colors used. Eatables numbers of colors are: two, iv, 8, 16, 32, 64, 128, 256.

The GIF and PNG paradigm formats are ideal for images with flat colors (no gradients) and hard edges. Common examples of these types of images are logos, logotypes, and illustrations without gradients.

Transparency

The GIF and PNG formats also both support transparency. If y'all need any level of transparency in your paradigm, you must use either a GIF or a PNG.

GIF images (and also PNG) back up 1-color transparency. This basically means that y'all tin can save your epitome with a transparent groundwork.

Let'due south use the Proficient Nutrient logo equally an instance. This has to be an epitome file because we're using fancy type and too a graphic of an apple in place of the a. We want our logo to sit on a low-cal green background colour. Hither's our background colour nosotros're saving the logo on.

If we saved the logo as a JPG, nosotros'd exist stuck with some kind of groundwork color.

JPG will non give united states of america transparency

Evidently, having a background colour in this situation is not ideal. If we salvage the image as a GIF, we can employ a transparent background color.

The GIF give u.s. a transparent background. Observe the band around the text.

Using a GIF prototype with a transparent background allowed us to put our epitome on a different colour background. Notice the white band around the paradigm though. This is because GIF images can only use i-colour transparency. Nosotros cannot slowly fade to transparency. There volition e'er be a colored band around the image. We can change the color of the ring, merely this means we must know ahead of time what color background we are going to be using.

Variable Transparency

The PNG file format is capable of saving variable levels of transparency. This is known equally the alpha channel. Using variable transparency, we tin actually utilise transparencies as a gradient.

The easiest mode to demonstrate variable transparency is through an instance. Below is the same image twice, on two dissimilar background colors.

Find how the groundwork colour simply fades into the picture.This volition work less well if you save every bit png8. Be sure to salve as png24.

Going back to our Proficient Food logo, we can utilise the aforementioned technique to brand sure our logo blends to any background color.

GIF vs. PNG

Yous might be wondering at this point how to know when to use a GIF or a PNG. GIF is an older file format going back to the early 1990'due south. We used to use information technology for really obnoxious image animations (in fact, nosotros still do). GIF is the only file format that tin can accomplish this. But, unless yous're planning on doing something for Facebook or MySpace, you probably do not want to use an animated GIF.

The PNG format is the newer and improve format. We used to apply GIF for compatibility reasons, but by now, any browser that does not support PNG is a really quondam browser. The PNG format uses a amend pinch scheme than GIF so the file sizes are generally smaller. Additionally, PNG images can be further compressed using a compression tool like Smush.information technology.

Prototype Format Summary

JPG

Used for photographs or any type of prototype with smooth transitions between colors. Does not support transparency.

PNG

Used for images with flat colors and hard edges, such as logos, logotypes, and illustrations without gradients. Tin can have either single or multiple levels of transparency.

GIF

Older format. Don't by and large need to use information technology, but know that it exists.

Back to Class Five page »

Source: http://web.simmons.edu/~grabiner/comm244/weekfive/image-formats.html#:~:text=The%20GIF%20and%20PNG%20formats,image%20with%20a%20transparent%20background.

Posted by: williamsundis1972.blogspot.com

Share this post