Web上的图像优化技术

Web上的图像优化技术

没有样式或图像的纯文本网站的时代已经过去。一个有效的网站可能会使用有趣的照片或图形来告知和启发访问者。尽管现在可以通过CSS实现许多图像效果,例如阴影,渐变和形状变换,但在几乎所有情况下仍需要图像文件。

但是添加图像会导致网站缓慢,复杂,如果没有适当优化,可能会导致访问者数量减少,进而带来利润。

为什么要优化?

研究表明 您的网站加载时间越长,您将失去的访问者越多。实际上,如果完全加载需要三秒钟或更长时间,将有近一半的人口离开网站。此外,移动设备的普及程度通常比台式机或笔记本电脑慢,并且您确实需要减少页面加载时间。

优化图像可减小文件大小,并帮助您更快地加载网站。幸运的是,有几种技术和应用程序可以使优化变得更容易。

独立应用程序

图像优化

选择图像优化

图像优化 是一个免费的Mac OS X应用程序,用于压缩任何类型的图像。它’易于使用,并且在调整多张图像大小时相对较快。实际上,此博客文章中使用的图像是使用ImageOptim批量压缩的。

我的开发者Tim指出,还有一个 可以在GitHub上使用ImageOptim CLI。只需安装它,即可设置别名以快速压缩图像文件夹。查看以下示例:

ImageAlpha

opt-imagalpha

从为我们带来ImageOptim的创作者中, ImageAlpha 是专门为PNG图像类型创建的Mac OS X应用程序。它带有许多选项,包括友好的IE6透明度。就像ImageOptim, ImageAlpha 也是免费的。

收缩奥马蒂克

选择收缩

收缩奥马蒂克是适用于所有系统的免费Adobe Air应用程序。它处理JPG,PNG和GIF文件类型的批量压缩。

暴动

暴动

对于Windows爱好者,有 暴动。 暴动代表“自由基图像优化工具”并与大多数Windows版本兼容。 暴动 适用于JPG,PNG和GIF文件类型。

JPEG迷你

opt-jpegmini

JPEG迷你 是适用于Windows和Mac OS X的功能强大的JPEG优化器。有30天的免费试用版。试用一些网站演示,以了解可以节省多少空间而不损失质量。

网络应用

如果独立应用程序不是’您的事,下面举几个Web应用程序。

小小PNG

opt-tinypng

小小PNG 是一个独立的Web应用程序,允许压缩PNG图像。它’s非常有效,还带有开发人员API。

闻一闻

选择性打击

m 是最初由Yahoo开发的网络应用程序,并由数名开发人员保留。它适用于大多数图像。还有一个 基于Smush.It的WordPress插件。

压缩器

选择压缩

压缩器 是另一个用于压缩图像的Web应用程序。 压缩器之所以与众不同,是因为它还能够压缩SVG图像,使其非常适合缩小徽标和其他与SVG相关的图像。

编码和编程技术

如果您是开发人员或程序员,则可以使用几种非常强大的CLI技术来压缩图像。让我们来探讨一些命令行的乐趣。

图像魔术

opt-imagemagick

图像魔术是一个命令行工具,可让您以几乎任何可以想象的方式编辑图像。许多功能之一是在转换图像时设置质量标志,这将使您可以减小文件大小。此外,您可以从图像中剥离元数据以挤出更大的文件大小。从主页安装ImageMagick,然后尝试以下示例图像代码:

  • 从图像中剥离所有EXIF /元数据
  • 将质量设置为85%,您可以并且应该使用此数字以使其达到所需的位置。我发现80%至85%的效果最佳,而质量却没有明显下降。
  • 设置压缩类型。
  • 设置新图像的名称,在本例中为compressed.jpg。

在许多情况下,通过在图像上设置非常小的高斯模糊,可以使文件大小更小。 看到这个StackOverflow评论 更多细节。这只是涉及ImageMagick功能的冰山一角。我强烈建议您安装它并查看文档,以了解您可能会想到哪些很棒的主意。

Gificle

opt-gifsicle

We’ve谈到了JPEG,PNG,SVG和常规GIF,但是动画GIF呢?那里’也是一个工具。 Gificle是另一个功能非常强大的动画GIF CLI工具。尽管在为GIF设置动画方面可以做各种事情,但我们将重点介绍如何压缩动画GIF。从网站上安装Gifsicle,然后在动画图片上尝试以下代码:

才华横溢的开发人员 David Walsh在博客文章中提到了其他压缩选项 我鼓励您看看。务必 查看Gifsicle文档 对于使用此工具可以完成的所有巧妙操作。

WordPress的

关于WordPress图像优化的注意事项:WordPress将自动尝试粉碎上传的媒体图像。但是,根据我的经验,列出的其他工具可以比内置的WordPress优化器做得更好。我建议您使用上述技术减小图像尺寸,然后将图像上传到WordPress。这样您将获得最大的压缩效果。

到目前为止,您可以使用几种工具来压缩和最小化几乎所有图像类型。这样做只需要花几秒钟的时间,从长远来看,最终将为您节省金钱和访客。

您有最喜欢的应用程序或技术来优化图像吗?一世’d喜欢在评论中听到有关它们的信息。

德鲁·道格拉斯(Drew Douglass)

德鲁·道格拉斯(Drew Douglass)的更多帖子