gpt带我学图片知识

前言

对于以内容消费为主的网站或软件，图片的重要性不言而喻。具体案例可以参考小红书，淘宝等热门软件。而作为开发这些软件的程序员的我们，应该去学习图片的基本知识，知道如何通过合理优化图片，实现在减小带宽和服务器压力，缩小包体积的同时给页面带来更快的加载速度，提升用户体验。

为了快速的了解以及运用图片相关知识，作者通过与chatgpt的不断对话学习到了图片的类型、各类图片的优缺点、图片的使用场景、图片压缩算法。

程序员该了解的图片知识

众所周知，每一门学问，如果真要细究的话，那都是深不可测的，图片也不例外。所以在我看来，作为程序员我更应该了解的是图片在编程领域的作用，因此就有了我和gpt的以下对话。

"无所不知"的chatgpt给了我一些很好的关于图片知识的学习方向，而我对其中图片的格式以及如何去优化图片比较好奇。

图片的基本类型、优缺点、使用场景

于是我对于它给出的第一个答案进行深入询问。

我对于它的回答还算满意，但是感觉还有可以做的更好的地方。 分别是

1. 帮助我分类好并通过表格的方式来展现以便于我更好的理解与记忆。
2. 我认为它给出的答案并不够全面，因为据我所知还存在svg这样的矢量图，并且兼容性方面的知识没有输出

所以这里的答案我决定自己来总结一下

图片格式	支持透明	动画支持	压缩方式	兼容性	相对原图大小	适应场景
jpeg	不支持	不支持	有损	所有	由画质决定	轮播图、背景图等
gif	支持	支持	无损	所有	由帧数和每帧图片大小决定	简单颜色，动画
png	支持	不支持	无损	所有	由png色值位数决定	需要透明时
webp	支持	不支持	有损和无损	所有(除IE、Safari和 IOS 设备 )	由压缩率决定	复杂颜色及形状，浏览器平台可预知
svg	支持	支持	无损	所有(IE8以上)	由内容和特效复杂度决定	简单图形，需要良好的放缩体验，需要动态控制图片特效

图片的压缩算法

上面的回答中提到了关于有损压缩和无损压缩，不是特别了解，预计我继续问。

总结：图片压缩算法是一种减小图像文件大小的技术，目的是为了在尽可能保证图片质量的情况下减少图片体积。

有损压缩和无损压缩

该算法又分为有损压缩和无损压缩, 两者的区别是

总结一下：

1. 有损压缩和无损压缩的原理不同，前者通过损失图像质量的方式来缩小图片文件大小。后者则是通过去除图像中冗余数据和重复模式来减小文件大小，因此不会损失图片质量，但是压缩力度小
2. 有损压缩不可逆，压缩后无法完全恢复原始图像。后者可逆可恢复原始图像。
3. 有损压缩压缩力度大，图片体积一般能够显著减小。无损压缩力度较小。

压缩图片平台推荐

一. TinyPNG -- Compress WebP, PNG and JPEG images intelligently

评价：好用，但不开源，只有 http 调用，且限流，需要把图片传输到国外服务器。

二. 在线图片压缩 - docsmall 在线图片压缩工具,在线图片压缩软件

评价：支持压缩质量选择，但每天只能压缩30m文件。

图片实际使用建议

1.不要滥用png

对于没有透明度和极端清晰度要求的图片应当尽可能转成 jpg。原因是jpg使用有损压缩，压缩后的体积会更小并且图片质量与png并不会相差很大。

2.非重要场景图片可放在cdn上

重要场景包括部分流量很大的页面的首屏等场景，放在cdn可以有效减少包体积。