我正在创建简单的 html 网站。我为设计提供了 figma。当我从中导出图像时图玛在 1x(png) 上它的图像质量不好，为了获得好的质量，我必须以 2x 或 3x 导出它们，这也会将图像大小增加 2x/3x。
我知道我可以更改图像的渲染大小，但上传图像的大尺寸会导致网站性能下降。我们能以某种方式从 figma 导出质量好但大小相同的图像吗？或任何修复方法？
谢谢！
【问题讨论】：
标签： html image performance web figma
所以你想从你的 Figma 设计中导出一些图像，以便直接在你的网站上使用。您希望优化图像，以便它们加载速度快，同时具有高质量。
确保选择正确的图像格式。如果您的图像是照片或包含大量渐变，请使用 JPG。 - 如果您的图像主要由平面形状和颜色组成，请使用 PNG。
导出 Figma 图像后，您可以立即使用 3rd 方图像优化工具使它们具有更小的文件大小。
有多种方法可以做到这一点，例如使用Photoshop's Save For Web 功能，或使用免费的在线图像优化器，例如TinyPNG、Kraken、ImageCompressor、Image Optimizer 等。
您还可以使用图像优化器插件导出 Figma 图像，例如 OlivePress 或 TinyImage Compressor。但是这些我没试过，所以你要自己测试。请注意，TinyImage 是半免费/半付费的。
【讨论】：