最初的步骤可能比 Photoshop 的计划更多。

1）我需要一个图像文件吗？或者我可以用别的东西吗

• 背景颜色。
• 一个 CSS 渐变。

2）我需要那个文件尺寸吗？或者我可以使用

• 一个较低的维度被放大了。
• 用什么东西掩盖低分辨率？上面的图案，模糊，变暗。
• 一种模式。
• 图像真的值得拥有高分辨率吗？

3) 文件格式是否正确？

它不是刻在石头上的，而是：

• 用于摄影的.jpg。
• 用于纯色或渐变的 PNG。标志，图表。
• 用于可缩放图像、纯色、渐变的 Svg 图像。

4）我可以使用动画的替代品吗？

• 带有优化的调色板和抖动的动画 gif。
• Css 动画。

5) 我是否为屏幕设备准备了正确的媒体查询？

• 我在那个设备上需要那个尺寸吗？

6）这里是具体的jpg压缩到位

用于摄影。确定了我需要的真实尺寸：

• 如果我能看到一些压缩伪影真的很重要吗？我可以再推一点吗？这值得么？
• 我需要在每张照片上包含颜色配置文件吗？

这是一个“心理”问题。在为网络保存时，您是否避免使用质量 25 只是因为它显示“低”并且您希望您的网站质量高？

7）还有一些细节

• 渐进式 jpg 比非渐进式使用更多的空间。
• 打开优化 jpg。
• 关闭任何模糊选项。
• 4:4:4 算法为您提供更好的质量，但更高质量的压缩更少。4:2:2 压缩更好。
• 请务必使用 rgb 文件，而不是 cmyk。
• 使用“web”上的颜色设置准备文件。这样您就可以删除颜色配置文件。

一个优化工具总是会告诉你做得更好。

算法可以用什么参数来表示。哦，您在网站上展示的肖像具有正确数量的“损失”压缩？

再次。“损失”在这里没有任何意义。

在交付最终网站设计之前，您确实应该使用更专注于并致力于优化图像的工具来优化图像。Photoshop 还可以，但我看到很多人评论说其他工具做得更好。

据我所知，ImageMagick非常适合此目的。但是，作为一个命令行菜鸟，我需要花一些时间亲自掌握它。如果您熟悉命令行，它可能非常适合您。

因为我现在没有时间掌握 ImageMagick，所以我选择寻找免费的在线优化工具，我可以在其中输入图像，它会吐出优化版本。

我发现的一些工具包括：

• Compressor.io - 很少有可调整的选项，但结果非常惊人（对我来说平均减少 60% - 80% 的文件大小）
• ImageOptimizer.net - 看起来很标准
• tinyPNG - 个人使用效果很好（能够将带有 alpha 通道的 24/32 位 PNG 转换为 8 位 PNG，同时保持透明度）

我个人没有任何理由为提供所有免费选项的附加工具付费，除非我听说有一个改变游戏规则的工具。

通过组合关键字，您可能可以找到更多免费的在线和离线工具，例如reduce image file size、image compression、PNG / JPEG / GIF optimisation tools。

根据我的经验，如果您使用 Photoshop 中的“保存为 Web”例程，这将优化 Web 图像。尽管如此，您在测试页面速度时仍然会看到优化警报，但只需查看您将实现的优化 kb。在大多数情况下，它大约为 1~5kb。我同意 Scott 的观点，即您不应该沉迷于页面速度。

如果您使用 WordPress，您可以安装优化插件，例如 EWWW 图像优化器，它将处理您上传的每张图像并将其减少一定百分比。如果客户要自己上传它，这很有用。

另一种选择是使用桌面优化软件，例如http://www.jpegmini.com/，它具有良好的压缩质量比并具有批处理功能。

在你的情况下，我认为它已经完成了。从这一点开始，您必须检查服务器端，使用强大的主机，如 Amazon S3 或类似的东西，并从那里提供文件以获得最佳性能。

如果您是 Wordpress 用户，还可以查看Optimus Image Optimizer（免责声明：我为创建插件的公司工作）进行无损图像压缩。尽管如此，与其他插件相比，此插件的一大区别在于它能够将图像转换为 WebP 格式，与 PNG 相比，它可以将文件大小减少多达 26%。

这将有助于进一步提高您的页面速度加载时间，因为图像要小得多，因此客户端下载它们花费的时间更少。