SlideShare a Scribd company logo
1 of 14
Download to read offline
IMAGE FORMATS
WHEN and WHY to use them on the web.
Illustrator CC for Web Design: Image Optimization @justinseeley
JPG GIF PNG
THE BIG THREE
Illustrator CC for Web Design: Image Optimization @justinseeley
JPG
JPGJoint Photographic Experts Group
Illustrator CC for Web Design: Image Optimization @justinseeley
JPG
PROS and CONS
✓ 24-bit color
✓ Continuous tone
✓ Smaller file size
Lossy format
No Transparency
Compression artifacts
Illustrator CC for Web Design: Image Optimization @justinseeley
JPG
WHEN TO USE IT
✓ Photographs
✓ Keeping file sizes small
✓ When transparency isn’t required
Illustrator CC for Web Design: Image Optimization @justinseeley
GIFGraphics Interchange Format
GIF
Illustrator CC for Web Design: Image Optimization @justinseeley
PROS and CONS
✓ Transparency
✓ Animations
✓ Lossless
Limited to 256 colors
Large file sizes
Bad continuous toneGIF
Illustrator CC for Web Design: Image Optimization @justinseeley
WHEN TO USE IT
✓ Animated GIFs
✓ Simple icons and flat graphics
✓ Basic logos with limited transparencyGIF
Illustrator CC for Web Design: Image Optimization @justinseeley
PNGPortable Network Graphics
PNG
Illustrator CC for Web Design: Image Optimization @justinseeley
PROS and CONS
✓ Lossless
✓ Small file size
✓ Transparency
Not good for photos
No animation
Older browser supportPNG
Illustrator CC for Web Design: Image Optimization @justinseeley
WHEN TO USE IT
✓ If file size doesn’t matter
✓ Logos and line art
✓ Complex transparency (drop shadows, etc.)PNG
Illustrator CC for Web Design: Image Optimization @justinseeley
THE CHOICE IS YOURS
Illustrator CC for Web Design: Image Optimization @justinseeley
There is no right or wrong, but choose wisely.
Illustrator CC for Web Design: Image Optimization @justinseeley
TRUST YOUR EYES
Look for problems in color, clarity, and file size before exporting.
Illustrator CC for Web Design: Image Optimization @justinseeley
KEEP MOBILE IN MIND
Images need to load fast and look great on mobile. Adjust accordingly.

More Related Content

What's hot

What's hot (6)

Poster step by-step
Poster step by-stepPoster step by-step
Poster step by-step
 
How to do Image SEO?
How to do Image SEO?How to do Image SEO?
How to do Image SEO?
 
Producing a film review
Producing a film reviewProducing a film review
Producing a film review
 
Edited images
Edited imagesEdited images
Edited images
 
Hotdesking Feedback
Hotdesking FeedbackHotdesking Feedback
Hotdesking Feedback
 
Editing images
Editing imagesEditing images
Editing images
 

Viewers also liked

Digital image and file formats
Digital image and file formatsDigital image and file formats
Digital image and file formatsRam Chandran
 
Compressed image file formats
Compressed image file formatsCompressed image file formats
Compressed image file formatsdyyddi
 
Image file formats
Image file formatsImage file formats
Image file formatsBob Watson
 
dFuse: An Optimized Compression Algorithm for DICOM-Format Image Archive
dFuse: An Optimized Compression Algorithm for DICOM-Format Image ArchivedFuse: An Optimized Compression Algorithm for DICOM-Format Image Archive
dFuse: An Optimized Compression Algorithm for DICOM-Format Image ArchiveCSCJournals
 
A comprehensive study of different image super resolution reconstruction algo...
A comprehensive study of different image super resolution reconstruction algo...A comprehensive study of different image super resolution reconstruction algo...
A comprehensive study of different image super resolution reconstruction algo...IAEME Publication
 
Linked in tips how to share your posts to multiple linkedin groups
Linked in tips how to share your posts to multiple linkedin groupsLinked in tips how to share your posts to multiple linkedin groups
Linked in tips how to share your posts to multiple linkedin groupsEntrepreneur Mastermind Groups
 
How to Install the Tracking Code in Weebly
How to Install the Tracking Code in WeeblyHow to Install the Tracking Code in Weebly
How to Install the Tracking Code in WeeblyBannersnack
 
“Finding the Right Stories for Your Brand”
“Finding the Right Stories for Your Brand”“Finding the Right Stories for Your Brand”
“Finding the Right Stories for Your Brand”Content Marketing World
 
What Content Marketing and Pottery Have in Common
What Content Marketing and Pottery Have in CommonWhat Content Marketing and Pottery Have in Common
What Content Marketing and Pottery Have in CommonKatai Robert
 
Biotek pengolahan limbah_cair
Biotek pengolahan limbah_cairBiotek pengolahan limbah_cair
Biotek pengolahan limbah_cairShoetiaone
 
Латеральный маркетинг
Латеральный маркетингЛатеральный маркетинг
Латеральный маркетингErmolina Lera
 
ExtronEtrainingCertificate
ExtronEtrainingCertificateExtronEtrainingCertificate
ExtronEtrainingCertificateJayamariappan M
 
Excelentes dibujos de julian beever
Excelentes dibujos de julian beeverExcelentes dibujos de julian beever
Excelentes dibujos de julian beeverSalvador Mata Sosa
 

Viewers also liked (20)

image formats
image formatsimage formats
image formats
 
Digital image and file formats
Digital image and file formatsDigital image and file formats
Digital image and file formats
 
Compressed image file formats
Compressed image file formatsCompressed image file formats
Compressed image file formats
 
Image Files Formats
Image Files FormatsImage Files Formats
Image Files Formats
 
Image file formats
Image file formatsImage file formats
Image file formats
 
dFuse: An Optimized Compression Algorithm for DICOM-Format Image Archive
dFuse: An Optimized Compression Algorithm for DICOM-Format Image ArchivedFuse: An Optimized Compression Algorithm for DICOM-Format Image Archive
dFuse: An Optimized Compression Algorithm for DICOM-Format Image Archive
 
A comprehensive study of different image super resolution reconstruction algo...
A comprehensive study of different image super resolution reconstruction algo...A comprehensive study of different image super resolution reconstruction algo...
A comprehensive study of different image super resolution reconstruction algo...
 
Linked in tips how to share your posts to multiple linkedin groups
Linked in tips how to share your posts to multiple linkedin groupsLinked in tips how to share your posts to multiple linkedin groups
Linked in tips how to share your posts to multiple linkedin groups
 
How to Install the Tracking Code in Weebly
How to Install the Tracking Code in WeeblyHow to Install the Tracking Code in Weebly
How to Install the Tracking Code in Weebly
 
“Finding the Right Stories for Your Brand”
“Finding the Right Stories for Your Brand”“Finding the Right Stories for Your Brand”
“Finding the Right Stories for Your Brand”
 
Paytm (2)
Paytm (2)Paytm (2)
Paytm (2)
 
Types of accounts
Types of accountsTypes of accounts
Types of accounts
 
What Content Marketing and Pottery Have in Common
What Content Marketing and Pottery Have in CommonWhat Content Marketing and Pottery Have in Common
What Content Marketing and Pottery Have in Common
 
Biotek pengolahan limbah_cair
Biotek pengolahan limbah_cairBiotek pengolahan limbah_cair
Biotek pengolahan limbah_cair
 
Латеральный маркетинг
Латеральный маркетингЛатеральный маркетинг
Латеральный маркетинг
 
Lorenzoysucazo
LorenzoysucazoLorenzoysucazo
Lorenzoysucazo
 
LATIHAN BAB 6
LATIHAN BAB 6LATIHAN BAB 6
LATIHAN BAB 6
 
Argentometri II
Argentometri IIArgentometri II
Argentometri II
 
ExtronEtrainingCertificate
ExtronEtrainingCertificateExtronEtrainingCertificate
ExtronEtrainingCertificate
 
Excelentes dibujos de julian beever
Excelentes dibujos de julian beeverExcelentes dibujos de julian beever
Excelentes dibujos de julian beever
 

Similar to Image File Formats for Web Designers

Similar to Image File Formats for Web Designers (20)

Chapter 23: Web Images
Chapter 23: Web ImagesChapter 23: Web Images
Chapter 23: Web Images
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the Web
 
Hour 7
Hour 7Hour 7
Hour 7
 
Digital Imaging
Digital ImagingDigital Imaging
Digital Imaging
 
Raster graphics
Raster graphicsRaster graphics
Raster graphics
 
Ways to optimize images for the Web.pptx
Ways to optimize images for the Web.pptxWays to optimize images for the Web.pptx
Ways to optimize images for the Web.pptx
 
About graphics-on-web
About graphics-on-webAbout graphics-on-web
About graphics-on-web
 
Graphics
GraphicsGraphics
Graphics
 
Jpeg Vs Gif Vs Png
Jpeg Vs Gif Vs PngJpeg Vs Gif Vs Png
Jpeg Vs Gif Vs Png
 
Email marketing-notes-0
Email marketing-notes-0Email marketing-notes-0
Email marketing-notes-0
 
Images For Web Use
Images For Web UseImages For Web Use
Images For Web Use
 
Html graphics
Html graphicsHtml graphics
Html graphics
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 
Image Optimization
Image OptimizationImage Optimization
Image Optimization
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
 
The Mobile Inbox 201: Design & Coding
The Mobile Inbox 201: Design & Coding The Mobile Inbox 201: Design & Coding
The Mobile Inbox 201: Design & Coding
 
Ppt ch08
Ppt ch08Ppt ch08
Ppt ch08
 
Ppt ch08
Ppt ch08Ppt ch08
Ppt ch08
 
File types pro forma power point
File types pro forma power pointFile types pro forma power point
File types pro forma power point
 
CH11 Graphics Notes
CH11 Graphics NotesCH11 Graphics Notes
CH11 Graphics Notes
 

Recently uploaded

slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxCapitolTechU
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxheathfieldcps1
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryEugene Lysak
 
PART A. Introduction to Costumer Service
PART A. Introduction to Costumer ServicePART A. Introduction to Costumer Service
PART A. Introduction to Costumer ServicePedroFerreira53928
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdfVikramadityaRaj
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17Celine George
 
The impact of social media on mental health and well-being has been a topic o...
The impact of social media on mental health and well-being has been a topic o...The impact of social media on mental health and well-being has been a topic o...
The impact of social media on mental health and well-being has been a topic o...sanghavirahi2
 
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPost Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPragya - UEM Kolkata Quiz Club
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticspragatimahajan3
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfbu07226
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxShibin Azad
 
How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17Celine George
 
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & EngineeringBasic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & EngineeringDenish Jangid
 
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...Sayali Powar
 
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTelling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTechSoup
 
Neurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeNeurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeSaadHumayun7
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfQucHHunhnh
 
The Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational ResourcesThe Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational Resourcesaileywriter
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya - UEM Kolkata Quiz Club
 

Recently uploaded (20)

slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
PART A. Introduction to Costumer Service
PART A. Introduction to Costumer ServicePART A. Introduction to Costumer Service
PART A. Introduction to Costumer Service
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17
 
The impact of social media on mental health and well-being has been a topic o...
The impact of social media on mental health and well-being has been a topic o...The impact of social media on mental health and well-being has been a topic o...
The impact of social media on mental health and well-being has been a topic o...
 
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPost Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptx
 
How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17
 
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & EngineeringBasic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
 
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
 
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTelling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
 
Neurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeNeurulation and the formation of the neural tube
Neurulation and the formation of the neural tube
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
 
The Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational ResourcesThe Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational Resources
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 

Image File Formats for Web Designers

  • 1. IMAGE FORMATS WHEN and WHY to use them on the web. Illustrator CC for Web Design: Image Optimization @justinseeley
  • 2. JPG GIF PNG THE BIG THREE Illustrator CC for Web Design: Image Optimization @justinseeley
  • 3. JPG JPGJoint Photographic Experts Group Illustrator CC for Web Design: Image Optimization @justinseeley
  • 4. JPG PROS and CONS ✓ 24-bit color ✓ Continuous tone ✓ Smaller file size Lossy format No Transparency Compression artifacts Illustrator CC for Web Design: Image Optimization @justinseeley
  • 5. JPG WHEN TO USE IT ✓ Photographs ✓ Keeping file sizes small ✓ When transparency isn’t required Illustrator CC for Web Design: Image Optimization @justinseeley
  • 6. GIFGraphics Interchange Format GIF Illustrator CC for Web Design: Image Optimization @justinseeley
  • 7. PROS and CONS ✓ Transparency ✓ Animations ✓ Lossless Limited to 256 colors Large file sizes Bad continuous toneGIF Illustrator CC for Web Design: Image Optimization @justinseeley
  • 8. WHEN TO USE IT ✓ Animated GIFs ✓ Simple icons and flat graphics ✓ Basic logos with limited transparencyGIF Illustrator CC for Web Design: Image Optimization @justinseeley
  • 9. PNGPortable Network Graphics PNG Illustrator CC for Web Design: Image Optimization @justinseeley
  • 10. PROS and CONS ✓ Lossless ✓ Small file size ✓ Transparency Not good for photos No animation Older browser supportPNG Illustrator CC for Web Design: Image Optimization @justinseeley
  • 11. WHEN TO USE IT ✓ If file size doesn’t matter ✓ Logos and line art ✓ Complex transparency (drop shadows, etc.)PNG Illustrator CC for Web Design: Image Optimization @justinseeley
  • 12. THE CHOICE IS YOURS Illustrator CC for Web Design: Image Optimization @justinseeley There is no right or wrong, but choose wisely.
  • 13. Illustrator CC for Web Design: Image Optimization @justinseeley TRUST YOUR EYES Look for problems in color, clarity, and file size before exporting.
  • 14. Illustrator CC for Web Design: Image Optimization @justinseeley KEEP MOBILE IN MIND Images need to load fast and look great on mobile. Adjust accordingly.