SlideShare a Scribd company logo

Optimize Images for Web Performance

•Download as PPT, PDF•
•
T
Tasawr Interactive

Optimizing images for websites is important to improve page load times, save bandwidth and storage space. There are three key ways to reduce image file sizes - lowering bit depth, resolution, and dimensions. The most common image formats - GIF, JPEG, and PNG - each have strengths and weaknesses regarding file size and quality. Tools are available to analyze images and automatically optimize them to balance quality and efficiency for web use.

1 of 15
Prepared By: Md Mosaddek Hossain Tasawr Interactive 16 Feb 2010
What is optimization ? ,[object Object]
Why we optimize “image” ? ,[object Object],[object Object],[object Object],[object Object]
Optimizing Images ,[object Object],[object Object],[object Object],[object Object],[object Object]
Image File Formats ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GIF — Graphics Interchange Format ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PNG - Portable Network Graphics ,[object Object],[object Object],[object Object],[object Object]
True color PNG IE 7 and up IE 6 and earlier
JPEG — Joint Photographic Experts Group ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Optimizing sprites
CSS Sprites … CSS: HTML:
Image optimizing tools ,[object Object],[object Object],[object Object],[object Object],[object Object]
For Example
Thank you !!!
Any Question ???

Recommended

Image file types in html5
Image file types in html5Image file types in html5
Image file types in html5Wesley Chan
 
Graphic File Formats
Graphic File FormatsGraphic File Formats
Graphic File Formatsbs07sjh
 
Bmsc1103
Bmsc1103Bmsc1103
Bmsc1103cool_beans
 
Picture Formats
Picture FormatsPicture Formats
Picture Formatscallum12
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formatskatyfleetham
 
TYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVEC
TYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVECTYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVEC
TYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVECMathankumar S
 
Paniting programs presentation
Paniting programs presentationPaniting programs presentation
Paniting programs presentationElisa MacGoun
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formatsRuby Hooper
 

Recommended

Image file types in html5
Image file types in html5Image file types in html5
Image file types in html5Wesley Chan
 
Graphic File Formats
Graphic File FormatsGraphic File Formats
Graphic File Formatsbs07sjh
 
Bmsc1103
Bmsc1103Bmsc1103
Bmsc1103cool_beans
 
Picture Formats
Picture FormatsPicture Formats
Picture Formatscallum12
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formatskatyfleetham
 
TYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVEC
TYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVECTYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVEC
TYPES OF IMAGE FILE FORMAT - MATHANKUMAR.S - VMKVECMathankumar S
 
Paniting programs presentation
Paniting programs presentationPaniting programs presentation
Paniting programs presentationElisa MacGoun
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formatsRuby Hooper
 
Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework Nicholas Aldous
 
Image Files Formats
Image Files FormatsImage Files Formats
Image Files FormatsSarah Fernetich
 
Images For Web Use
Images For Web UseImages For Web Use
Images For Web Usealconceptz
 
Basic Image Editing, Part 2
Basic Image Editing, Part 2Basic Image Editing, Part 2
Basic Image Editing, Part 2MarZatul30
 
Image file format
Image file formatImage file format
Image file formatarthvedkalyan
 
File types pro forma
File types pro forma File types pro forma
File types pro forma Jack Head
 
University-BMSC 1103
University-BMSC 1103University-BMSC 1103
University-BMSC 1103guest9223c7
 
Digital graphics file formats
Digital graphics file formats Digital graphics file formats
Digital graphics file formats Ellie Marsh
 
Digital imaging101 ann ware unit 4 dtp 1
Digital imaging101 ann ware unit 4 dtp 1Digital imaging101 ann ware unit 4 dtp 1
Digital imaging101 ann ware unit 4 dtp 1pamdlynnbrown
 
File format help sheet version 2
File format help sheet version 2File format help sheet version 2
File format help sheet version 2bennyboyhunt
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro formaOlliePull
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formatsthomas-armstrong
 
Helpsheet 2
Helpsheet 2Helpsheet 2
Helpsheet 2hiletman
 
File format help sheet completed
File format help sheet completedFile format help sheet completed
File format help sheet completedKColliver
 
Helpsheet 2
Helpsheet 2 Helpsheet 2
Helpsheet 2 hiletman
 
File Types Pro Forma
File Types Pro FormaFile Types Pro Forma
File Types Pro FormaJamie Ellis
 
file types lecture notes
file types lecture notesfile types lecture notes
file types lecture notesFinlay Jackson
 
Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)KAZEMBETVOnline
 
Different types of graphics formats
Different types of graphics formatsDifferent types of graphics formats
Different types of graphics formatssanaan umar khan
 
Technical file
Technical fileTechnical file
Technical filesamgh1995
 
Lab#2 illustrator
Lab#2 illustratorLab#2 illustrator
Lab#2 illustratorYaowaluck Promdee
 
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYIMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYMarkCesarVillanueva
 

More Related Content

What's hot

Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework Nicholas Aldous
 
Images For Web Use
Images For Web UseImages For Web Use
Images For Web Usealconceptz
 
Basic Image Editing, Part 2
Basic Image Editing, Part 2Basic Image Editing, Part 2
Basic Image Editing, Part 2MarZatul30
 
File types pro forma
File types pro forma File types pro forma
File types pro forma Jack Head
 
University-BMSC 1103
University-BMSC 1103University-BMSC 1103
University-BMSC 1103guest9223c7
 
Digital graphics file formats
Digital graphics file formats Digital graphics file formats
Digital graphics file formats Ellie Marsh
 
Digital imaging101 ann ware unit 4 dtp 1
Digital imaging101 ann ware unit 4 dtp 1Digital imaging101 ann ware unit 4 dtp 1
Digital imaging101 ann ware unit 4 dtp 1pamdlynnbrown
 
File format help sheet version 2
File format help sheet version 2File format help sheet version 2
File format help sheet version 2bennyboyhunt
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro formaOlliePull
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formatsthomas-armstrong
 
Helpsheet 2
Helpsheet 2Helpsheet 2
Helpsheet 2hiletman
 
File format help sheet completed
File format help sheet completedFile format help sheet completed
File format help sheet completedKColliver
 
Helpsheet 2
Helpsheet 2 Helpsheet 2
Helpsheet 2 hiletman
 
File Types Pro Forma
File Types Pro FormaFile Types Pro Forma
File Types Pro FormaJamie Ellis
 
file types lecture notes
file types lecture notesfile types lecture notes
file types lecture notesFinlay Jackson
 

What's hot (17)

Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework
 
Image Files Formats
Image Files FormatsImage Files Formats
Image Files Formats
 
Images For Web Use
Images For Web UseImages For Web Use
Images For Web Use
 
Basic Image Editing, Part 2
Basic Image Editing, Part 2Basic Image Editing, Part 2
Basic Image Editing, Part 2
 
Image file format
Image file formatImage file format
Image file format
 
File types pro forma
File types pro forma File types pro forma
File types pro forma
 
University-BMSC 1103
University-BMSC 1103University-BMSC 1103
University-BMSC 1103
 
Digital graphics file formats
Digital graphics file formats Digital graphics file formats
Digital graphics file formats
 
Digital imaging101 ann ware unit 4 dtp 1
Digital imaging101 ann ware unit 4 dtp 1Digital imaging101 ann ware unit 4 dtp 1
Digital imaging101 ann ware unit 4 dtp 1
 
File format help sheet version 2
File format help sheet version 2File format help sheet version 2
File format help sheet version 2
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro forma
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formats
 
Helpsheet 2
Helpsheet 2Helpsheet 2
Helpsheet 2
 
File format help sheet completed
File format help sheet completedFile format help sheet completed
File format help sheet completed
 
Helpsheet 2
Helpsheet 2 Helpsheet 2
Helpsheet 2
 
File Types Pro Forma
File Types Pro FormaFile Types Pro Forma
File Types Pro Forma
 
file types lecture notes
file types lecture notesfile types lecture notes
file types lecture notes
 

Similar to Optimize Images for Web Performance

Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)KAZEMBETVOnline
 
Different types of graphics formats
Different types of graphics formatsDifferent types of graphics formats
Different types of graphics formatssanaan umar khan
 
Technical file
Technical fileTechnical file
Technical filesamgh1995
 
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYIMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYMarkCesarVillanueva
 
Week 6 Task File Formats
Week 6 Task File FormatsWeek 6 Task File Formats
Week 6 Task File Formatsguest2cf876
 
File Formats Re-Submission
File Formats Re-SubmissionFile Formats Re-Submission
File Formats Re-Submissiontomwaumsley
 
Technical File Presentation Version 2
Technical File Presentation Version 2Technical File Presentation Version 2
Technical File Presentation Version 2WildOakForrest
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossaryhalo4robo
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossaryAmaanGDesign
 
Paniting programs presentation
Paniting programs presentationPaniting programs presentation
Paniting programs presentationElisa MacGoun
 
DIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesDIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesRasan Samarasinghe
 
Stem 71 24 multimedia elements - graphics
Stem 71 24 multimedia elements - graphicsStem 71 24 multimedia elements - graphics
Stem 71 24 multimedia elements - graphicsKelly Bauer
 
File types pro forma(2)
File types pro forma(2)File types pro forma(2)
File types pro forma(2)Joe Young
 
All About Graphics
All About GraphicsAll About Graphics
All About Graphicsmegweb
 

Similar to Optimize Images for Web Performance (20)

Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)Mult media (graphics,animations,sounds and videos)
Mult media (graphics,animations,sounds and videos)
 
Different types of graphics formats
Different types of graphics formatsDifferent types of graphics formats
Different types of graphics formats
 
Technical file
Technical fileTechnical file
Technical file
 
Lab#2 illustrator
Lab#2 illustratorLab#2 illustrator
Lab#2 illustrator
 
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYIMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
 
Week 6 Task File Formats
Week 6 Task File FormatsWeek 6 Task File Formats
Week 6 Task File Formats
 
File Formats Re-Submission
File Formats Re-SubmissionFile Formats Re-Submission
File Formats Re-Submission
 
Technical File Presentation Version 2
Technical File Presentation Version 2Technical File Presentation Version 2
Technical File Presentation Version 2
 
Grade 8 image file format
Grade 8 image file formatGrade 8 image file format
Grade 8 image file format
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossary
 
File types
File typesFile types
File types
 
Integrating media
Integrating mediaIntegrating media
Integrating media
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossary
 
Paniting programs presentation
Paniting programs presentationPaniting programs presentation
Paniting programs presentation
 
Unit 78 technical file
Unit 78 technical fileUnit 78 technical file
Unit 78 technical file
 
DIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesDIWE - Multimedia Technologies
DIWE - Multimedia Technologies
 
Stem 71 24 multimedia elements - graphics
Stem 71 24 multimedia elements - graphicsStem 71 24 multimedia elements - graphics
Stem 71 24 multimedia elements - graphics
 
File types
File typesFile types
File types
 
File types pro forma(2)
File types pro forma(2)File types pro forma(2)
File types pro forma(2)
 
All About Graphics
All About GraphicsAll About Graphics
All About Graphics
 

More from Tasawr Interactive

Basic Knowledge on MySql Replication
Basic Knowledge on MySql ReplicationBasic Knowledge on MySql Replication
Basic Knowledge on MySql ReplicationTasawr Interactive
 
Adobe Flash History and Basics
Adobe Flash History and BasicsAdobe Flash History and Basics
Adobe Flash History and BasicsTasawr Interactive
 
Deploy Rails Application by Capistrano
Deploy Rails Application by CapistranoDeploy Rails Application by Capistrano
Deploy Rails Application by CapistranoTasawr Interactive
 

More from Tasawr Interactive (7)

Basic Knowledge on MySql Replication
Basic Knowledge on MySql ReplicationBasic Knowledge on MySql Replication
Basic Knowledge on MySql Replication
 
Html Css Mistakes
Html Css MistakesHtml Css Mistakes
Html Css Mistakes
 
Adobe Flash History and Basics
Adobe Flash History and BasicsAdobe Flash History and Basics
Adobe Flash History and Basics
 
Deploy Rails Application by Capistrano
Deploy Rails Application by CapistranoDeploy Rails Application by Capistrano
Deploy Rails Application by Capistrano
 
Localization in Rails
Localization in RailsLocalization in Rails
Localization in Rails
 
Magento Exclusive
Magento ExclusiveMagento Exclusive
Magento Exclusive
 
Mysql Indexing
Mysql IndexingMysql Indexing
Mysql Indexing
 

Optimize Images for Web Performance