Unit 2 -Digital Imaging

Requirements of Graphic Format Types for Web Publishing

On the web, you want your pictures to look their best while at the same time you don't want to impact the user's experience by having a web site full of huge pictures that take forever to download. So, there is a trade off between image quality/size and speed. A web master could fill his site up with beautiful bit map pictures that take so long to down that the user would leave in disgust because the site was so slow. On the other hand, another web master could use low quality images that load up quickly on a page but just aren't nice to look at because they are grain or pixelated.

Using the correct graphic formats for images will assist in make sure that the web master gets both good quality images and a decent download rate so the visitor to the site gets the best of both worlds.

Optimizing

When creating digital images in a program such as Adobe Fireworks, Photoshop, Illustrator or Gimp, the images are created in layers. A layer is simply one image stacked on top of another. A detailed image can have many many layers. The processing of optimizing takes all of those layers and flattens them into a single image that can be stored and viewed on the web.

When working in a program such as Fireworks, when you SAVE (or SAVE AS) an image, you are actually saving it with the layers still intact so that it can be reopened later and can be edited further. To optimize in a program like Fireworks, you chose EXPORT which will then allow you to save a digital image as either a JPEG, GIF, PNG or other digital format. Fireworks has a nice EXPORT WIZARD that determines what the image is being used for and then will advise the user which formats are best. It also allows you to see what your image will look like when it is saved in the various formats and let's you compare side by side possible options that could be used to save the optimized image.

To optimize an image, it is compressed to a smaller size. There are two types of compression: Lossless and Lossy. Lossless means that the image is made smaller, but with no change in quality. Lossy means the image is made smaller, but there is a loss of quality.

JPEG versus GIF versus PNG versus BMP

The JPEG (or JPG) format stands for Joint Photographic Experts Group. The JPEG format is best for photographs. It is a lossy compression, so as the size gets smaller, the quality gets worse. It has a palette of thousands of colors and is great for photographs, but the lossy compression means it's bad for logos and line drawings.

JPEG has three different formats: Baseline, Baseline Optimized and Progressive.
Baseline (Standard) - This is the original JPEG format that is recognized by all web browsers.
Baseline Optimized - This JPEG format option provides optimized color and slightly better compression. It is supported by all modern browsers - the best choice for JPEG files today.
Progressive - This is an out of date JPEG format that displays gradually as it downloads, starting out blocky, and gradually getting clearer. It doesn't make the image download any faster, but gives the illusion of speed since the blocky image is loaded right away on a slow connection. With the majority of internet users on high speed connections today, progressive JPEG is rarely used anymore.

The GIF format stands for Graphic Interchange format. It is a lossless format meaning there is no lose of data when it is saved; however, the GIF format only has a palette of 256 colors which means it is terrible for photographs. The GIF format does allow for both transparency and for animation. It is best for logos, line drawings and simple pictures.

The PNG format stands for Portable Network Graphics. PNG was created as an improved replacement for GIF's. It is a lossless compression.

PNG comes in two formats: PNG-8 and PNG-24.
PNG-8 is really a good replacement for GIFs; however, it has a few drawbacks. It cannot support animation like GIF can and not all older browsers can support it. PNG-8 can only store 256 colors, like GIFs. The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.
PNG-24 is combines lossless compression with thousands of colors, just like JPEG. It's very much like BMP, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than JPEG. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, which very little improvement in visible quality.

The BMP format stands for Bit Map. It is lossless but there is no compression at all. So, BMP images are HUGE and so unnecessarily large that nobody ever really uses this format.

Observations

Having never worked with Photoshop and having not used Illustrator in over four years, this assignment was a bit of a challenge for me. Also, my observations about things I liked in Fireworks may be easier to do in either PS or AI.

I enjoyed making the vector images a lot, you can make very complex and interesting designs in Fireworks very quickly. For instance, the color splatter wheel I did is 12 colored lines with a paint splatter stroke. The last image on my vector page is a single line drawn with the pen tool on a radial gradient background. I also found it really easy to use masks in Fireworks to allow background images to only partially show through to the top layer.

My favorite Raster tool was the Creative/Auto Vector Mask tool which allowed me to make very complex looking collages in a matter of minutes.

When I optimized my designs, I saved all of them as JPG's. Fireworks has a great Export Wizard which allowed me to compare how an image will look when optimized in different formats. I saw that all my designs would have lost color if I had saved them as GIF's (The gradients looked really different as the color transitions were no longer smooth but rather choppy). There was no difference between JPG and PNG to my eye and the JPG's were smaller, so that was my final choice.

The ability to "round-trip" between Fireworks and Dreamweaver made editing the images simple after I had been critiqued that some of the fonts I had used were hard to read. I simply clicked the edit in "FW" button, made my changes and hit done and my images and my pages were updated.

Adobe Kuler

Adobe Kuler is an internet application that allows the user to generate color schemes for websites or other projects based on color theory. Create your own color wheel here.

WOW Slider

WOW Slider is a JQuery application that display multiple images in a sliding panel or slide show. The user downloads their front end application (free for the basic model) and follows simple instructions to create beautiful slide shows on their web pages. You can see a demo and download it here.

Fireworks Tips

entheosweb is a website with a lot of nice tutorials for learning to use Adobe Fireworks. This is where I got the ideas for making the collages on my "raster" page. There are all kinds of tricks and cheats for using Fireworks. They also have tutorials on Dreamweaver and Adobe Flash. Check it out here

I.A.B.

The I.A.B. or Interactive Advertising Bureau is the agency the sets the industry standards for Online advertising. For example, the size of a web page's leader board should be set to 728 pixels by 90 pixels (as seen on the left) and a web pages billboard should be set to 970 pixels by 250 pixels (as seen at the top of the "vector" and "raster" pages). You can see all the Online standards here.

morgueFile.com

A great resosurce for free reference images is morgueFile.com This website has over 300,000 stock photo that can be used on a website at no cost. Browse through the images on morgueFile here.

Lolly Cakes Story

Lolly Cakes is my dog and her image is used a lot on this site along with her best friend Maggie May. Lolly died of cancer in 2008. You can read her story here.

Canvas Art from WOW Slider

The artwork done of the WOW Slider page was creating using the html canvas along with an html form and some Java Script that I wrote. You can draw your own artwork similar to it here.