image optimization
DESCRIPTION
This slides were presented by Mosaddek Hossain who works as a promising web developer at tasawr. This slides are beneficial to know how the images used in the web pages can be optimizedTRANSCRIPT
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 ???