图片工具
图片转 Base64 · 共 1 个工具
这个分类目前只有一个工具：图片与 Base64 data URL 的互转。它是全站最小的分类，但它回答的问题在每个前端项目里都会出现——什么时候把图片内联进 HTML 或 CSS 才是划算的？
简短的答案是：小图标和动态生成的图可以，照片几乎从不。data URL 是所在文档的一部分，因此无法被单独缓存，会让 HTML 膨胀约三分之一，并且在承载它的文档下载完成前一直阻塞渲染。
什么时候该内联图片？
- 内联：资源很小（几百字节到 2 KB 左右）、只在一个页面使用、且减少请求数有意义时——站点图标、加载动画、极小的 logo、动态生成的占位图。
- 保留为文件：在多个页面使用、需要被单独缓存、或超过几 KB 时。额外一次请求的成本，低于每次加载页面都多传这些字节。
- 注意格式：Base64 不压缩，编码后体积约为原来的 4/3。JPEG 与 WebP 本身已是压缩格式，它们的 data URL 会很大；SVG 是文本，内联相对划算。
本分类的全部工具
本分类的深度指南
常见问题
为什么 Base64 会让图片变大？
因为 64 个可打印字符每个只承载 6 位，而原始文件每字节是 8 位。每 3 个字节变成 4 个字符，正好增加三分之一，另加填充。Base64 也不再压缩，所以这个增长是叠在原始体积之上的。
data URL 图片会被缓存吗？
不会被单独缓存。浏览器缓存的是包含它的 HTML 或 CSS 文档，因此每次该文档加载都会重新传输这些编码字节。相对地，独立的图片文件只取一次，可在多个页面和多次访问间复用。
支持哪些图片格式？
浏览器能解码的格式都支持——PNG、JPEG、WebP、GIF、SVG、BMP，以及在较新浏览器中的 AVIF。转换在本地完成，文件不会被上传，所以实际限制是你的可用内存，而不是服务端的体积上限。