图像优化需求

Question

我使用像100pulse.com这样的工具测试了我的网站加载性能，这些工具显示我的网站因图像优化不当而花费了不寻常的时间加载。任何人都可以提出良好的图像优化技术来改善我的网站响应时间吗？

Answer 1

图片优化

图像压缩有损或无损：有损通过丢弃原始文件中的信息而起作用，无损保留所有原始数据（但文件大小往往更大）。

通过选择性地减少图像中的颜色数量，存储数据所需的字节更少。效果几乎是不可见的，但它在文件大小上产生了很大的差异！ 因此，这会缩短页面下载时间

有各种各样的图像压缩算法采用不同的方法来减小文件大小，下面列出的工具使用了大量的方法来最小化图像的大小。

TinyPNG （https://tinypng.com/）

TinyPNG使用智能有损压缩技术来减少PNG文件的文件大小。

OR

TinyJPG （https://tinyjpg.com/） 对于JPG文件

参考： http://websitespeedoptimizations.com/ImageOptzPost.aspx

Answer 2

可以通过几种方法来优化图像。

• 图像压缩-您可以将两种压缩应用于图像：有损和无损。无损压缩是在不改变图像质量的情况下压缩文件的一组技术。另一方面，在有损压缩的情况下，图像质量会降低，以生成较小尺寸的图像。
• 图像格式-PNG格式最适合徽标或具有任何透明度的图像，而照片应作为JPG。 WebP是一种图像格式，它封装了JPG和PNG的所有优点，但提供了更好的压缩率，但尚未实现100％的浏览器支持。
• 图像大小-通常，在浏览器的CSS高度和宽度发生变化的情况下，将最大尺寸的图像传递到网站（基本上，网站使用客户端调整大小）。当实际需要较小的图像时，加载较大的图像将导致网站加载缓慢。即使正确调整缩略图的大小，也可以大大缩小页面尺寸，并帮助其更快地加载。
• 优化投放-使用CDN。是的，您交付图像的方式也有很大的不同。 CDN将有助于减少延迟并帮助更快地加载您的网站。

这些只是一些基础知识，但是它们确实需要一些时间和精力，因此，我建议您使用图像优化工具为您完成此工作。检出ImageKit，它可以实时完成工作，并与全局映像CDN捆绑在一起。

Answer 3

您可以使用此 Smushit 来优化图片，在不损坏质量的情况下缩小尺寸。

http://developer.yahoo.com/yslow/smushit/

他们会为您提供更长时间的解释，说明它为什么很酷，在制作某些手机游戏和Flash应用时，它确实对我很有帮助。

Answer 4

如果你想进入它，那么我完全建议你阅读本指南：https://images.guide/

如果您只想一劳永逸地为您的网站解决问题，您可以尝试https://piio.co

集成非常简单，您只需将<img src="image.jpg" />更改为<img data-piio="image.jpg />并在HTML中包含JS库。

完全披露（这是我的创业公司），但我们正在努力让人们不再需要担心图像优化。

Answer 5

给图像带来一些抨击爱情。

“sips -s formatOptions 60 image / path” 对于图像/路径，您也可以直接拖动图像。

你也可以尝试调整图像大小以节省速度

“sips -Z 800 image / path”

此代码将保持宽高比

用于非技术解决方案 TinyPNG（https://tinypng.com/）

高级用户尝试（guetzli）优化一张图片可能需要几分钟，但确实很好。