Illustrator

Intro to Adobe Illustrator for the web.

WEEK 8

There are several lines of thought to slicing graphics.

Optimizing images
when you can repeat or stretch a single small image to fill a larger space,
creating mouse rollovers and clickable image maps
animating portions of a large image.

Optimizing Images:

When you are building a web page - Smaller is faster. The larger the images or media file...the longer it will take to load and the higher your bounce rate.

Sometimes slicing a single image can allow you to create faster load and reduce the time it takes to load. This is not always the case... we will explore several ways in which we can optimize our images.

Create a Smaller Gif:

Crop your image down to just what you need... Pixel reduction is one of the best ways to minimize file size. Color reduction is another way to reduce the file size. Play with the color palette to view the image in multiple color modes and remove unnecessary colors.

Reduction of the number of frames used in an animated gif will also reduce file size. Avoid useless animation. It is a good rule to only use something as needed and not because you can.

Dithering is something we covered briefly in class... It can help to make the image look better but it also increases file size.

Lossy option will reduce the file size a lot but also generally takes away from image quality.

Interlacing will increase the file size.

JPEG ISSUES

"Most mid- to low-range digital cameras save images to the storage card in JPEG format. This is a compressed file format that permanently, irreversibly loses quality each time the image is saved--that's why it is often called a "lossy" format." - From about.com

In the above quote we talk about digital cameras but the point I want to make is that image quality WILL BE LOST PERMANENTLY. It can not be regained. Imagine trying to make a grey color with black and white paint. Once they mix you can't undo what you have done. When saving for the web... the lower the compression, the bigger the file size... the higher the compression... the lower the file size and the lower the quality...meaning save it as PSD before you save as a jpg if you don't want to loose image quality.

Samples on why slice from ABOUT.COM

Excellent sample in three parts on slicing for the web. Click Here

WHY OPTIMIZE: ULEAD ARTICLE on optimizing