Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prepared By: Md Mosaddek Hossain Tasawr Interactive 16 Feb 2010
What is optimization ?  <ul><li>The procedure or procedures used to make a system or design as effective or functional as ...
Why we optimize “image” ? <ul><li>Improve page load time. </li></ul><ul><li>Save bandwidth. </li></ul><ul><li>Save disk sp...
Optimizing Images <ul><li>Optimizing images for the web is a tricky business. You have to get the right balance between  f...
Image File Formats <ul><li>Choosing the right file format to save your images in is of vital importance.  </li></ul><ul><l...
GIF —  Graphics Interchange Format <ul><li>GIF was developed in the late 1980's and it is still widely used. </li></ul><ul...
PNG -  Portable Network Graphics <ul><li>PNG was developed around 1995, became a W3C recommendation in 1996, and has been ...
True color PNG IE 7 and up  IE 6 and earlier
JPEG —  Joint Photographic Experts Group <ul><li>JPEG capable of storing 24 bits-per-pixel and using 16 million colors </l...
Optimizing sprites
CSS Sprites … CSS: HTML:
Image optimizing tools <ul><li>http://www.sitereportcard.com </li></ul><ul><li>http://www.imageoptimizer.net/Pages/Home.as...
For Example
Thank you !!!
Any Question ???
Upcoming SlideShare
Loading in …5
×

Image Optimization

1,512 views

Published on

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 optimized

  • Be the first to comment

  • Be the first to like this

Image Optimization

  1. 1. Prepared By: Md Mosaddek Hossain Tasawr Interactive 16 Feb 2010
  2. 2. What is optimization ? <ul><li>The procedure or procedures used to make a system or design as effective or functional as possible, especially the mathematical techniques involved. </li></ul>
  3. 3. Why we optimize “image” ? <ul><li>Improve page load time. </li></ul><ul><li>Save bandwidth. </li></ul><ul><li>Save disk space. </li></ul><ul><li>Save servers (and energy and the planet) </li></ul>
  4. 4. Optimizing Images <ul><li>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. </li></ul><ul><li>There are three key areas where bytes can be shaved off your graphics: </li></ul><ul><li>- bit depth (number of colors) </li></ul><ul><li>- resolution </li></ul><ul><li>-dimension </li></ul>
  5. 5. Image File Formats <ul><li>Choosing the right file format to save your images in is of vital importance. </li></ul><ul><li>There are three image formats in constant use on the net — </li></ul><ul><li>- GIF </li></ul><ul><li>- JPG and </li></ul><ul><li>- PNG . </li></ul><ul><li>When choosing the format for your image, you should always be conscious of both the image’s quality and file size . </li></ul>
  6. 6. GIF — Graphics Interchange Format <ul><li>GIF was developed in the late 1980's and it is still widely used. </li></ul><ul><li>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. </li></ul><ul><li>GIF can only display 256 colors. </li></ul><ul><li>GIF can be animated and </li></ul><ul><li>GIF can have a transparent background. </li></ul><ul><li>GIF support all browser. </li></ul>
  7. 7. PNG - Portable Network Graphics <ul><li>PNG was developed around 1995, became a W3C recommendation in 1996, and has been widely implemented in most Web browsers as soon as 1998. </li></ul><ul><li>PNG images supports true colors up to 64 bit, gray scale and indexed colors. </li></ul><ul><li>PNG can have a transparent background. </li></ul><ul><li>PNG transparency support all browser except IE6 and earlier </li></ul>
  8. 8. True color PNG IE 7 and up IE 6 and earlier
  9. 9. JPEG — Joint Photographic Experts Group <ul><li>JPEG capable of storing 24 bits-per-pixel and using 16 million colors </li></ul><ul><li>Great for photographs, graphic artwork, banner ads, etc </li></ul><ul><li>Full-color information </li></ul><ul><li>Disadvantage: </li></ul><ul><li>Loss of image quality </li></ul><ul><li>Longer page load time than the GIF Format </li></ul>
  10. 10. Optimizing sprites
  11. 11. CSS Sprites … CSS: HTML:
  12. 12. Image optimizing tools <ul><li>http://www.sitereportcard.com </li></ul><ul><li>http://www.imageoptimizer.net/Pages/Home.aspx </li></ul><ul><li>http://www.stanleyshilov.com/online-tools/image-compression </li></ul><ul><li>http://tools.dynamicdrive.com/imageoptimizer </li></ul><ul><li>http://developer.yahoo.com/yslow/smushit </li></ul>
  13. 13. For Example
  14. 14. Thank you !!!
  15. 15. Any Question ???

×