如何缩短图片转换后的Base64字符串以优化代码显示？

以下是几个实用的处理方法：

• 将Base64单独存储为文件
  把超长的Base64字符串保存成独立的.b64文件（比如my-image.b64），然后在代码里通过路径引用：

  <img src="./my-image.b64" alt="示例图片">
  

  这样既不影响图片显示，又能把冗长的Base64从主代码中剥离，大幅提升代码可读性。

• 先压缩图片再转Base64
  先用图片压缩工具（在线或本地压缩软件均可）对原图进行无损/轻度有损压缩，再将压缩后的图片转为Base64。压缩后的图片体积大幅减小，对应的Base64字符串长度也会显著缩短，同时基本不会影响图片显示效果。

• 利用编辑器的代码折叠功能
  如果不想修改代码结构，大部分主流编辑器（比如VS Code、WebStorm）都支持代码折叠。你可以给Base64块加上折叠标记：

  <!-- #region 图片Base64 -->
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...（超长内容）" alt="示例图片">
  <!-- #endregion -->
  

  之后就能一键折叠这块内容，不影响查看其他代码行。

内容的提问来源于stack exchange，提问作者Alchemy