Prepared By:Md Mosaddek Hossain

Tasawr Interactive16 Feb 2010

What is optimization ?

The procedure or procedures used to make a system or design as effective or functional as possible, especially the mathematical techniques involved.

Why we optimize “image” ?

Improve page load time. Save bandwidth. Save disk space. Save servers (and energy and the planet)

Optimizing Images Optimizing images for the web is a tricky business.

You have to get the right balance between file size and picture quality. It is an essential step though. Look at any webpage, and you will see that most of its load time comes from images. Your website will be needlessly slow if you don't drop the sizes of these images.

There are three key areas where bytes can be shaved off your graphics:

-bit depth (number of colors)-resolution-dimension

Image File Formats Choosing the right file format to save your

images in is of vital importance.

There are three image formats in constant use on the net — - GIF- JPG and - PNG.

When choosing the format for your image, you should always be conscious of both the image’s quality and file size.

GIF — Graphics Interchange Format

GIF was developed in the late 1980's and it is still widely used.

GIF compresses files using an algorithm called LZW(Lempel–Ziv–Welch), which keep traces of the colors and helps to reduce the size of the file.

GIF can only display 256 colors. GIF can be animated and GIF can have a transparent background. GIF support all browser.

PNG - Portable Network Graphics

PNG was developed around 1995, became a W3C recommendation in 1996, and has been widely implemented in most Web browsers as soon as 1998.

PNG images supports true colors up to 64 bit, gray scale and indexed colors.

PNG can have a transparent background.

PNG transparency support all browser except IE6 and earlier

True color PNG

IE 7 and up IE 6 and earlier

JPEG — Joint Photographic Experts Group

JPEG capable of storing 24 bits-per-pixel and using 16 million colors

Great for photographs, graphic artwork, banner ads, etc

Full-color information

Disadvantage: Loss of image quality Longer page load time than the GIF Format

Optimizing sprites

CSS Sprites

…

CSS:

HTML:

Image optimizing tools http://www.sitereportcard.com http://www.imageoptimizer.net/Pages/Home.aspx http://www.stanleyshilov.com/online-tools/image-

compression http://tools.dynamicdrive.com/imageoptimizer http://developer.yahoo.com/yslow/smushit

For Example

Thank you !!!

Any Question ???