14 个可在浏览器中运行的免费图像和设计工具

图像工作有一个特定的问题：工作通常很小，但提供的工具却非常多。您需要从英雄图像中删除 400 KB，或者获得设计师提到的十六进制值，或者生成一个尚未制作的图标。这不需要订阅。

下面的 14 个工具涵盖了准备图像、处理颜色、生成 CSS 效果以及遗漏的小型制作资产。每个都在本地运行，这对于图像比对于文本更重要：您刚刚压缩的照片通常是您尚未发布的照片​​。

大多数图像问题实际上都是重量问题。 A page that feels slow is usually carrying images that are larger than their display size, in the wrong format, at a quality setting nobody ever questioned.

你应该压缩多少？诚实的答案是：直到看起来不对劲，然后后退一步。对于摄影英雄图像，70% 到 80% 的质量通常与正常观看尺寸下的原始图像无法区分。对于徽标、屏幕截图或任何具有平坦颜色和硬边的内容，请使用 PNG 并进行更严格的压缩 - 这些增益更多，损失更少。

一个实用的经验法则：对于英雄图像来说，任何低于 200 KB 的内容都可以，对于缩略图来说，低于 80 KB 的内容都可以，如果不能低于 300 KB，则可能存在尺寸问题，而不是质量问题。

将图像转换为 Base64 数据 URI 会删除 HTTP 请求，这听起来像是一个纯粹的胜利。通常情况并非如此。编码后的字符串大约比二进制文件大三分之一，它无法单独缓存，并且会使您的 CSS 或 HTML 膨胀。

仅当图像很小（低于几千字节）且仅使用一次且至关重要时才内联。单个电子邮件模板中的小图标是典型的案例。对于跨页面重复或大于几千字节的任何内容，将其作为文件提供并让浏览器缓存它。

清楚这是做什么的。它消除或遮盖了可见标记。它无法重建底层像素——被覆盖的信息已经消失，并且没有过滤器将其重新发明出来。结果范围从当标记位于普通背景上时不可见到当标记位于细节上时出现明显的污点。

还有一件事值得明确地说：删除别人的水印并发布结果在大多数司法管辖区都是版权问题，并且无论您是否会被抓住，都属于许可违规行为。此工具适用于从您自己的图像或您已许可的库存中删除标记。

颜色是小错误变得非常明显的地方。无法访问的对比度、实际上是 HSL 三元组的十六进制值、在显示器上看起来连贯但在投影仪上看起来浑浊的调色板。

关于颜色工具的一个警告：它们都假设您的显示器已校准并且查看页面的人有眼睛。这两种假设都不安全。这就是比起主观组合更喜欢对比检查组合的原因。

手动编写渐变或分层阴影确实是一项令人不快的任务。语法很繁琐，你看不到你正在生成什么，好阴影和坏阴影之间的区别就是几个像素的模糊。

解决这四个问题的秘诀就是克制。两个阴影——一个紧密的深色阴影和一个宽阔的柔和阴影——被解读为物理高度。一个影子读起来像是十五年前的网站。生成、复制、然后删除，直到您无法辨别它的存在。

这是整个集群在做一项真正的工作。一个页面需要一个带有背景图像、标题和按钮的英雄，但目前还没有构建这些内容。

五种工具，没有设计套件，每个输出都是一个可以直接粘贴到代码中的值。

我的图像上传到任何地方了吗？ 没有。压缩、调整大小和 Base64 转换都在您的浏览器中进行，这就是没有文件大小限制和上传队列的原因。

压缩图像会降低质量吗？ 根据定义，总是如此。问题是它是否可见。在 70% 到 80% 的质量和正确的尺寸下，通常情况并非如此。

为什么调整大小后的图像看起来仍然很大？ 十有八九你在调整大小之前进行了压缩，或者当照片保存为 JPEG 更好时，你却保存为 PNG。

我可以将它们用于客户工作吗？ 可以，没有归属权，也没有商业限制。

它们可以在手机上使用吗？ 可以，但在手机上调整大照片的大小和压缩取决于设备的内存而不是服务器。

在压缩之前调整大小，在争论颜色之前检查对比度，保持阴影微妙，并且永远不要忘记网站图标。无论如何，这就是设计套件为您做的大部分事情。