SlideShare a Scribd company logo
1 of 60
2010年Webrebuild年会广州站 网络图像优化 WebRebuild  stevenpan
选择格式
INDEX01_选择格式 真色彩jpg、png24、png32
INDEX01_选择格式 当真色彩图像,使用GIF或PNG8后? PNG8: 256种色 原图:大于256色 GIF :256种色
INDEX01_选择格式 调色板gif、png8
INDEX01_选择格式 当调色板图像,使用JPG或PNG24后? PNG24: 23.4 KB PNG8:7.7 KB JPG14.5 KB
INDEX01_选择格式 小图用PNG8
INDEX01_选择格式 57 X 57 PNG24:8.1 KB GIF:3.1 KB  PNG8:3.0 KB
INDEX01_选择格式 一些简单的图像
INDEX01_选择格式 JPEG不适合保存图形分明线条简单的图像。 GIF:  1450byte PNG8:  907byte JPG:  1850 byte
优化方法
INDEX02_优化方法 GIF 动画压缩
INDEX02_优化方法 优化前 177 KB 优化后 107 KB
INDEX02_优化方法
INDEX02_优化方法   ImageMagick ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用,图片的旋转、组合,文本,直线,多边形,椭圆,曲线,附加到图片伸展旋转。ImageMagick是免费软件:全部源码开放,可以自由使用,复制,修改,发布。它遵守GPL许可协议。它可以运行于大多数的操作系统。ImageMagick的大多数功能的使用都来源于命令行工具。  http://www.imagemagick.com.cn/ Gifsicle *Batch mode for changing GIFs in place. * Prints detailed information about GIFs, including comments. * Control over interlacing, comments, looping, transparency... * Creates well-behaved GIFs: removes redundant colors, only uses local color tables if it absolutely has to (local color tables waste space and can cause * viewing artifacts), etc. * It can shrink colormaps and change images to use the Web-safe palette (or any colormap you choose). * It can optimize your animations! This stores only the changed portion of each frame, and can radically shrink your GIFs. You can also use transparency to make them even smaller. Gifsicle’s optimizer is pretty powerful, and usually reduces animations to within a couple bytes of the best commercial optimizers. * Unoptimizing animations, which makes them easier to edit. http://www.lcdf.org/~eddietwo/gifsicle/
INDEX02_优化方法 隔行扫描
INDEX02_优化方法 逐行扫描 18.7KB 隔行扫描  21.1KB
INDEX02_优化方法 Photoshop Fireworks
INDEX02_优化方法 GIF vs PNG
INDEX02_优化方法 GIF 15.9 KB PNG8  13.3 KB
INDEX01_选择格式 一些简单的小图像
INDEX01_选择格式 宽15像素  高11像素 单一的17种红色 PNG8: 218 byte GIF: 205 byte
INDEX02_优化方法 JPEG压缩品质
INDEX02_优化方法 品质80% 品质85% 品质95% 品质90%
INDEX02_优化方法 100%品质  79K 80%品质  19K
INDEX02_优化方法 12KB 9KB 5KB
18 KB 22 KB 20 KB 15 KB
INDEX02_优化方法 删除 锐化颜色边缘
INDEX02_优化方法 101 KB 79 KB
INDEX02_优化方法 优化后品质80%     79 KB 优化前品质80%     101 KB
INDEX02_优化方法 渐进JPEG
标准JPEG 12.4KB 渐进JPEG 10.9KB
INDEX02_优化方法 Photoshop Fireworks
INDEX02_优化方法 JPEG图像噪点
INDEX02_优化方法 没有噪音  13,711KB 5 %噪音 14,817KB 10 %噪音  17,408 KB
INDEX02_优化方法 纯色  192 bytes 5%噪音  26,426 bytes 10%噪音 26,457 bytes
INDEX02_优化方法 在Photoshop中去除噪点: 1.打开图片(废话)。 2. 图像—模式— Lab颜色。 3. 转到通道面板。 4.将a通道进行高斯模糊数值在15左右,b通道也同样处理。 5.回到Lab通道(点一下Lab那里就可以了)。 6.滤镜 — 杂色— 取出杂色(有的版本叫去斑)。 7.最后可以使用模糊工具调整一下比较生硬的图像。
INDEX02_优化方法 JPEG 2000
原图 48.9KB JPEG压缩  1.85KB JPEG2000 压缩  1.79KB
INDEX02_优化方法 JPEG2000详细资料 http://baike.baidu.com/view/300613.htm?fr=ala0_1_1
INDEX02_优化方法 PNG格式
INDEX02_优化方法   ,[object Object],调色板图像,支持半透明。 ,[object Object],真色彩,不支持透明。 ,[object Object],真色彩,支持半透明。 Fireworks Photoshop PNG 的格式
INDEX02_优化方法 比PNG32更小的替代品
INDEX02_优化方法 PNG32 58KB ? 18KB
INDEX02_优化方法 Video
INDEX02_优化方法 Alpha  PNG
INDEX02_优化方法 Alpha PNG3226.9KB Alpha PNG8   8.23KB
INDEX02_优化方法
优化工具
GIF 及 PNG 优化工具
INDEX03_优化工具 http://www.phpied.com/give-png-a-chance/
INDEX03_优化工具 http://www.phpied.com/big-list-image-optimization-tools/
INDEX03_优化工具
INDEX03_优化工具
INDEX03_优化工具 Fireworks vs Photoshop
INDEX03_优化工具
INDEX03_优化工具 Fireworks Photoshop
INDEX03_优化工具 TweakPNG
INDEX03_优化工具
结语 感谢大家的参与和支持!

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

潘杰茂 网络图像优化 V21