调整ImageMagick使网站打开的更快！

图片一直保持我们的脚趾很长一段时间,现在他们在浏览器正在牵引,他们有一个可怕的问题:需要吗有效地调整我们的形象全部资产。 响应图像的工作方式是,一个适当大小的图像发送给每个用户——小版本用户在小屏幕上,大屏幕上大版本的用户。

神奇的网络性能,但是我们不得不面对残酷的现实,为不同用户提供不同大小的图片意味着我们首先需要创建不同的文件,和可以是一个巨大的痛苦。

许多工具自动化图像缩放,但往往他们创建大型文件,取消响应图像应该提供的性能优势。 在本文中,我们将看到如何使用ImageMagick-一个开源命令行图形编辑器来快速调整您的图片维护好视觉质量和非常小的文件大小。

大图片= =大问题

的平均网页大约是2 MB大小,约三分之二的重量从图像。 与此同时,数以百万计的人们上网3 g-or-worse连接,使一个恐怖秀使用2 MB的网站。 即使在一个快速连接,2 MB的网站会严重破坏你的计划和用户的数据让他们真正的钱。 提高网络性能,给用户更好的体验是我们的开发人员和设计人员的工作。

一般的web页面是2099 KB、2099 KB的来自图像。

响应的图像救援! 对吗? 嗯,是的,但是首先我们必须生成响应图像的资产,而且我们必须确保这些资产看起来不错,足够小的足迹来提高网站的性能。

一个非常小的网站,节省几个不同大小的每个图像直接在我们的图像编辑器是微不足道的——Photoshop甚至提供了一个方便的网络“保存”选项,文件大小保持在一个低水平。 但是对于一个大型网站的图片吗? 一个在线商店,例如,可能有成百上千的形象资产,必须创建不同大小的这些是一个巨大的任务。

ImageMagick

这就是自动图像大小方便。 一群工具做到这一点,包括GD和GraphicsMagick,但ImageMagick获得一个好的平衡能力和可用性之间在托管环境中。 ImageMagick已有近25年,是一个完整的命令行图像编辑器。 人们普遍支持的内容管理系统(CMS)等WordPress和Drupal跑步者等,结合任务咕哝着说,用在自己的自动化图像编辑,包括调整。

它也可以在桌面系统(Mac,Windows和Linux)。 如果你使用家酿在Mac,你可以安装它是这样的:

brew install imagemagick

否则,寻找你最喜欢的包管理器,或者直接从ImageMagick网站下载它。

ImageMagick提供了一个快速、简单的方法来自动化图像调整。 不幸的是,使用默认设置,它输出的大小文件通常非常大,有时比输入的图像,即使输出像素较少。 这些大文件完全否定你期望的性能从响应图像和,事实上,可以为您的用户使事情变得更糟比如果你仅仅把巨大的新资产补。

下面,我将描述这个问题存在的原因,并向您展示如何改变ImageMagick的默认设置来解决这个问题,小,美观图片。

图像缩放是如何工作的

解决这个问题的最好方法是理解它发生的原因,这意味着理解基本的图像缩放是如何工作的。

根据定义,当计算机调整图像,图像的像素的数量将会改变。 如果图像被放大,输出比输入将会有更多的像素;如果正在缩小图像,输出比输入像素将会减少。 的挑战是找出最好的方法来存储原始图像的内容在这个不同数量的像素。 换句话说,我们需要找出最好的方式添加或删除像素不改变图像是什么样子的。

虽然不常见用例,形象upsampling(即,使图像更大)可能有点容易想象,所以让我们开始。 考虑一个蓝色的4×4像素的正方形,我们想在8×8像素大小的两倍。 我们做的是采取相同的图像,将它应用于一个新的像素网格;这就是所谓的重采样,通常我们的意思当我们谈论调整图像。 重新取样我们的4×4蓝色方块8×8像素,我们需要添加额外48像素。 这些像素需要一些颜色值,确定颜色值的过程插值。 当你重采样时,调用算法来确定插值是如何工作的重采样滤波器。

我们如何重新取样一个4×4的像素广场8×8像素网格?

我们可以使用各种各样的重新取样过滤器和插值的方法来找出那些48额外的像素。 绝对简单的事情我们可以做的就是添加四行四列的像素在一些任意的颜色,比如红色。 这就是所谓的背景插值,因为空像素只是暴露背景颜色(红色)。 这是你在做什么在Photoshop中调整时使用“图像”→“画布大小”,而不是“图像”→“图像大小”。

当然,这是一个可怕的结果,当我们要调整一个形象:我们不认为新的输出图像真的看起来像原始输入图像;原广场是蓝色的,一个是蓝色和红色。 背景像素插值只能当添加(即当使图像更大或当upsampling),甚至然后调整基本上是没用的,除了作为一种手段来显示新的像素。

另一个非常简单的插值方法让我们的新像素相同的颜色作为他们的邻近像素;这就是所谓的最近邻插值。 这会产生更好的结果比背景插值,尤其对于这样一个简单的广场。

最近邻插值:upsampling广场。 (查看大版本)

将采样(即,使图像更小)与最近邻插值不是upsampling一样直观,但它有助于记住数学涉及与分数像素就可以了。 首先,新像素网格应用到这本形象。 因为有更少的像素存储图像信息,一些新网格将包含多个像素的颜色,在下面的例子中,一些像素包含两个蓝白相间的。

以这种方式输出图像的物理像素在现实世界是不可能的,虽然,每一个像素都可以只有一个颜色。 每个像素的最终颜色在新网格是由颜色的中心点。 换句话说,中心点是采样确定最后的颜色,这就是为什么最近邻插值有时被称为点取样。

最近邻插值法:将采样一个圈。

更复杂的任何行或广场,最近邻插值产生锯齿状,块状的图像。 它又快又创造了小文件,但是看起来不很好。

最在最近邻插值重采样过滤器使用某种形式的变化——他们多个样本点来确定一个像素的颜色和使用数学,试图想出一个聪明的妥协对于那些值。 双线性插值,例如,创建一个加权平均的颜色。 比最近邻插值产生更好的结果。

双线性插值。

重采样的方法之一——和特定的重采样滤波器使用会影响文件大小是影响图像的颜色。 双线性插值给出了圆平滑的边缘,但这意味着给图像更多的颜色。 原来的蓝色圆有两个颜色,蓝色和白色。 大小圈——一些像素苍白bluey-white还多。 在其他条件不变的情况下,会有更多的颜色在图像文件大小更大。 这就是为什么有时调整图像减少像素赋予了它更多的字节。

所有这一切意味着什么

为了使输出图像较小,我们还想看一看方法来减少颜色的数量在不牺牲质量。 选择一个适当的重采样滤波器有一个大的影响,但其他设置可以影响输出的颜色的数量。 我还将讨论设置,控制文件压缩和质量,消除无关的数据。

ImageMagick的最优设置

IMAGEMAGICK基础知识

ImageMagick有大量的选项和功能,找到一个好的组合这些可能会非常棘手。

我们感兴趣的两个主要ImageMagick设置,转换和mogrify。 这两个执行类似的操作,但是mogrify旨在用于多个文件,在吗转换一次只处理一个图像。

一个简单的ImageMagick操作看起来像这样:

这表示,我们希望ImageMagick的转换函数将input.jpg调整到300像素宽,然后保存到output.jpg。 的调整300年部分的一个例子是ImageMagick的许多内置函数。 每个函数使用相同的格式:-functionName选项。

使用mogrify是相似的,但语法重新排序:

mogrify-path output/-resize300*.jpg

这表示,我们希望ImageMagick的mogrify函数把所有JPEG文件在当前目录(* . jpg),调整他们300像素宽,然后拯救他们输出目录中。

函数可以结合对于更复杂的结果:

convert input.jpg-resize300-quality75output.jpg

和之前一样,这个调整大小input.jpg300像素宽,但这次也将JPEG质量设置为75之前拯救它output.jpg。

我执行数以百计的测试看到它的组合功能和选项产生最小的结果在一个可接受的质量。

测试和结果

我想保持文件大小尽可能低但质量高与Photoshop的“保存网络。 ”为此,我使用了一个主观质量衡量——我自己的意见是否输出看起来不错——和客观质量测量结构不同(DSSIM)。 DSSIM比较两个图像——在这种情况下,我测试图像和控制生成的Photoshop的“保存Web”,生成一个分数。 得分越低,图像越相似;得分为零意味着他们是相同的。 确保测试图片看起来一样的Photoshop的输出,我想要一个意味着DSSIM得分为0.0075或更低。 在去年公布的研究,RadWare发现图像对DSSIM得分为0.015的测试用户是没有区别的。

以确保没有偏见的结果离群值,我测试了40图像jpeg和png,照片、图纸和艺术线条,颜色和单色,透明和不透明。 我还测试了三个输出大小(300、600和1200像素宽)从各种输入大小。 最后,我测试了这两个有或没有形象的优化。

从我的测试中,使用以下设置运行ImageMagick结果最小的,而一般视觉与Photoshop的输出:

那是很多的,所以让我们经历每一位,看看这意味着什么。

MOGRIFY与转换

如前所述,ImageMagick操纵提供了两个类似的工具图片:转换是基本的图像编辑器和一个形象工作;mogrify主要是用于批量图像处理。 在理想的世界中,这两个工具会产生相同的结果;不幸的是,情况并非如此转换有一个错误使其忽略我建议使用(的一个设置——jpeg:fancy-upsampling =设置,下面讨论),所以使用mogrify是更好的。

重采样

选择一个重采样滤波器在ImageMagick非常复杂。 有三种方法可以这样做:

• 与调整函数你选择哪一个,

• 与过滤器设置,

• 或插入设置。

之一,这些东西就不属于这里,但是其余看起来差不多,这就是为什么我使用一个客观的质量措施。 (图片:费希尔)(查看大版本)

最明显的调整函数使用调整,但它创建文件太大。 我看了看,发现11种不同的功能缩略图做最好的工作优化质量和文件大小。 在大多数情况下,缩略图函数使用一个三步过程来调整图片:

1. 调整图像的大小,五倍的输出大小使用样品函数,它有它自己的内置重采样滤波器的类似于最近邻方法上面所讨论的。

2. 调整图像,它的最终输出大小使用基本调整过滤器。

3. 这条从图像元数据。

这意味着如果我们调整一幅500像素宽,缩略图首先调整2500像素宽使用吗样品,结果可能是块状和粗糙,正如我们在上面的示例中看到的,但是操作快速、小文件大小将产生一个结果。 然后,ImageMagick会调整这个形象从2500像素宽500像素宽调整。 这其blockiness更平滑,但是文件大小保持相当低。 最后,ImageMagick将元数据来得到一个更小的文件。

第二种方法选择ImageMagick的重采样滤波器过滤器设置。 一些(比如调整功能样品)有一个内置的重采样函数,总是使用,但是其他人(例如调整可以覆盖的)违约过滤器。 的过滤器设置被用于缩略图第二步,因为这一步使用调整。

我测试了31个不同的设置过滤器并得到了最好的结果三角形。 的三角形重采样滤波器也称为双线性插值,我上面所讨论的。 它决定了像素颜色看支持区域邻近的像素并产生一个加权平均的颜色。 我发现最好指定区域在两个像素使用这种支持——把过滤器:支持= 2设置。

第三条道路选择重采样滤波器,插入设置,将被忽略缩略图,所以这里不需要。

除了上面的设置,在默认情况下ImageMagick还使用所谓的JPEG花式upsampling一个算法,试图生产外观更好jpeg。 我发现它产生更大的文件和质量差异可以忽略不计,所以我建议关闭它——jpeg:fancy-upsampling =。

锐化

图像在缩放的时候会有点模糊,所以项目如Photoshop通常会应用一些磨练之后的图片有点爽。 我建议使用一个不清晰的过滤——尽管它的名字,实际上是锐化图像的设置不清晰的0.25 x0.25 + 8 + 0.065。

首先应用钝的过滤工作高斯模糊的形象。 前两个值是钝的过滤器半径和西格玛分别——在这种情况下,都有一个值0.25像素。 这些值通常是相同的,结合告诉ImageMagick模糊图像。 应用模糊后,过滤比较模糊的原始版本,在任何地方,他们的亮度超过给定的不同阈值(最后一个值,0.065),一定量磨的应用(第三个值,8)。 阈值和数值数量的确切含义不是很重要,只要记住一个更高的阈值意味着磨将应用较少,和更高的数值量意味着磨会更强烈的应用无论它。

颜色还原

我提到的一个大原因缩放图像得到臃肿是因为所有的额外的颜色。 所以,尽量减少颜色的数量,但没有那么牺牲质量。

减少颜色的一个方法是多色调分色法,这一过程中,梯度减少纯色的乐队。 多色调分色法降低一定数量的颜色颜色的水平——也就是说,可用颜色的数量在每个的红色,绿色和蓝色图片使用的渠道。 在最终的图像颜色的总数将在这三个颜色通道的组合。

多色调分色法可以大大减少文件的大小,但也可以彻底改变形象的样子。 只有几个颜色的水平,它创造了你可能看到的效果1970年代摇滚海报,几个离散乐队的颜色。 有许多颜色的水平——例如,136年,我建议,你得到一个更小的文件在不损失图像质量。

原始图像。 (图片:费希尔)(查看大版本)
多色调分色法可以减少图像的颜色。 (图片:费希尔)(查看大版本)

犹豫不决是一个过程,旨在减轻色带将噪声加入乐队创造的幻觉,图像颜色有更多的颜色。 理论上,犹豫不决时似乎是一个好主意多色调分色印;它帮助观众感知的结果看起来更像原来的。

犹豫不决。

不幸的是,ImageMagick bug,废墟图像这样的透明使用犹豫不决时。 所以,最好关掉犹豫不决犹豫不。 幸运的是,即使没有抖动,特里图像仍然看起来不错。

ImageMagick犹豫不决。 (图片:尼莫)(查看大版本)

颜色空间

虽然不是严格的色彩还原,设置一个图像颜色空间是一个相关的概念。 颜色空间定义了颜色可供一个图像。 下图显示了ProPhoto RGB颜色空间包含的颜色比Adobe RGB颜色空间,进而比sRGB色彩空间包含更多的颜色。 所有这些包含更少的颜色比肉眼可见。

颜色空间。 (图片:Cpesacreta)(查看大版本)

创建sRGB色彩空间的一个真正的国王在互联网。 是由W3C支持和其他标准机构;它是所需的颜色空间CSS颜色模块3级和SVG规范的假定颜色空间WebP规范,明确中引用PNG规范。 这也是在Photoshop中默认的颜色空间。 简而言之,sRGB色彩空间的选择为web平台,,假设你想让你的照片渲染可以预见的是,使用它可能是一个好主意。

质量和压缩

与JPEG等有损图像格式,质量和压缩齐头并进:压缩越高,更低的质量和更低的文件大小。 我们可以大大减少文件大小通过设置高JPEG压缩因子,但这也将大大降低质量。 平衡是必要的。

当我正在做测试,控制我用Photoshop创建JPEG图像质量的高,或60。 我发现这个设置适用于我和罢工之间的平衡质量和文件大小。 然而,在我的ImageMagick设置,我推荐质量82。 为什么?

事实证明,JPEG质量尺度不规范或标准中定义,并在编码器不统一。 一个质量60在Photoshop中可能是相同的质量40在一个程序中,质量B +在另一个和质量可笑的怪人在第三个。 在我的测试中,我发现Photoshop60是最接近质量82ImageMagick。

为无损耗图像格式PNG等质量和压缩并不相关。 高压缩并没有改变图片的样子,只有牺牲处理负载(CPU使用、内存使用和处理时间)。 假设我们的电脑可以处理这种负载,没有理由不累惨了PNG压缩。

PNG压缩在ImageMagick可以配置有三个设置,——png:压缩过滤器,——png压缩等级:和——png:压缩策略。压缩过滤是一个振动的步骤,进行图像的数据,以便将实际的压缩效率更高;我得到了最好的结果使用自适应滤波(——png:压缩过滤器= 5)。压缩级别是可以应用的压缩量,我建议这尽大努力去吗9(——png:压缩等级= 9)。 最后,压缩策略设置决定实际的算法,用于对文件进行压缩;我得到最好的结果使用默认压缩策略(——png:压缩策略= 1)。

元数据

除了实际的图像数据,图像文件可以包含元数据:关于图像的信息,如时创建并创建它的设备。 这额外的信息可能会占用空间没有提供任何好处我们的用户,通常应该删除。 以上,当描述缩略图函数,处理图像的实际大小,我提到第三步骤包括剥离元数据。 即使这是真的,缩略图不删除所有元数据,获得有利用带和——png:exclude-chunk =。 这些会影响质量。

进步的呈现

可以保存到使用jpeg和png进步或顺序呈现。 顺序呈现通常是默认:图像将负载从上到下逐行像素。 进步呈现意味着图像和呈现阶段交付。

对于jpeg,进步呈现可以发生在任意数量的阶段,确定当文件保存。 第一阶段将是一个非常低分辨率版本的完整形象;在每个后续阶段,交付更高分辨率的版本,直到最后阶段,呈现高质量的版本。

png使用一种进步呈现Adam7交错中,图像的像素在七个阶段交付基于8×8像素网格。

这两种类型的进步呈现在ImageMagick可以控制使用交错设置。 但进步呈现应该打开或不呢?

jpeg和png,进步呈现增加文件的大小,但在很长一段时间传统智慧认为值得打开因为它提供给用户带来更好的体验。 的想法是,即使完整,好的形象不负载那样迅速,用户将能够看到的东西早些时候,一些可能是总比没有的好。

不过,去年Radware发布研究进步的jpeg文件显示用户实际上倾向于用序列图像呈现。 这只是一项研究(和一个没有通过正式的同行评审过程),但是结果很有趣。 Radware的结果,结合序列图像较小的文件大小,引导我推荐的交错没有ImageMagick的设置。

图像优化

我上面提到的测试都有或没有形象的优化。 到目前为止,我所描述的设置都是我建议如果你不优化你的图片。 如果你可以优化它们,不过,我建议将改变略:我发现略有不同不清晰的设置工作更好(不清晰的x0.08 0.25 + 0.25 + 0.045与不清晰的0.25 x0.25 + 8 + 0.065没有优化),不需要使用带。

很多不同的图像优化。 我测试了image_optim,picopt和ImageOptim,所有这些图像通过一系列不同的优化运行的步骤。 我测试了这些工具单独和组合,而我发现,最好的结果来自运行通过所有三个文件,上面列出的顺序。 说,有收益递减:与image_optim第一轮优化后,额外的压缩,picopt ImageOptim实现很小。 除非你有大量的时间和处理能力,使用多个图像优化器可能是杀鸡用牛刀了。

结果(或者甚至是值得吗?)

诚然,我推荐的设置复杂,但他们绝对值得你的用户。 当我着手做这些测试,我也希望我能够大大减少文件大小不牺牲图像质量。 我很高兴地报告,使用上面描述的设置,我是成功的。

平均来说,我推荐的设置和优化文件大小减少35%相比,Photoshop的“保存Web”:

储蓄相比,Photoshop创造性的云

条件	文件大小:的意思是	文件大小:%的差异
我的设置,优化	218274个字节
我的设置,没有优化	259852个字节	19.05%
Photoshop CC,优化	260305个字节	19.28%
Photoshop CC,没有优化	299710个字节	35.26%

我的设置没有优化甚至击败Photoshop的输出与优化!

ImageMagick的默认图像缩放,相比我的建议导致较小的平均82%的文件大小:

储蓄相比,ImageMagick违约

条件	文件大小:的意思是	文件大小:%的差异
我的设置,优化	218274个字节
我的设置,没有优化	259852个字节	19.05%
调整	397588个字节	82.15%

相比,WordPress的默认图像缩放(使用ImageMagick引擎盖下面),我建议导致较小的平均77%的文件大小:

储蓄相比,WordPress

条件	文件大小:的意思是	文件大小:%的差异
我的设置,优化	218274个字节
我的设置,没有优化	259852个字节	19.05%
WordPress*	385795个字节	76.75%
*模拟使用ImageMagick和默认的设置,这些CMS的使用。 可以发现使用的特定设置GitHub库对这些测试。

相比其他CMS和使用ImageMagick的工具,我建议导致144%较小的文件大小:

储蓄相对于其他工具

条件	文件大小:的意思是	文件大小:%的差异
我的设置,优化	218274个字节
我的设置,没有优化	259852个字节	19.05%
CodeIgniter/ExpressionEngine*	340461个字节	55.98%
TYPO3.CMS*	359112个字节	64.52%
Drupal*	397588个字节	82.15%
鲈鱼*	416790个字节	90.95%
工艺CMS*	425259个字节	94.83%
grunt-responsive-images	533030个字节	144.20%
*模拟使用ImageMagick和默认的设置,这些CMS的使用。 可以发现使用的特定设置GitHub库对这些测试。

请记住,这是所有的图片视觉与ps输出,平均。

使用上面描述的设置,我可以帮你巨大的文件大小储蓄在不损害质量。 这可以是一个巨大的恩惠来你的网站的性能!

如何实现这个项目吗

我希望使用这种技术的好处是显而易见的。 对你来说幸运的是,最难的部分——弄明白所有的这一切都完成了。 尽管推荐设置明显的复杂性,实现这种在自己的项目中可以相当快速和容易。 虽然运行这个弥天大谎的命令终端每次你想调整图像可能会不方便,有更简单的选择,需要很少的混乱或大惊小怪。

BASH SHELL

大多数命令行shell允许您设置别名和函数复杂的命令。 如果你使用bash shell,您可以添加一个函数.bash_aliases(或. bashrc)文件,充当一个别名为我推荐的命令:

然后,你可以叫它是这样的:

NODE . JS

一个npm包,不出所料,imagemagick允许您使用ImageMagick通过node . js。 如果你使用这个模块,您可以添加使用我建议设置调整如下:

咕哝着说

如果你使用咕哝着说跑步作为一个任务,一个好消息:我建立了一个名叫繁重任务grunt-respimg(npm)处理我上面描述的一切。 你可以把它在你的项目通过运行:

然后,您可以运行它在你的呼噜声文件如下:

PHP

PHPImageMagick集成称为Imagick这使得它相对容易从PHP脚本中ImageMagick操作运行。 不幸的是,Imagick有点有限,并没有让你做一些事情,我建议,如设置重采样滤波器使用缩略图功能。

但是,你很幸运:我已经创建了一个名为作曲家包php-respimg(packagist)处理上面所描述的一切。 你可以把它在您的项目作曲家通过运行:

然后,你可以调整你的照片是这样的:

内容管理系统

如果使用CMS,您可能希望利用这些储蓄生成缩略图和其他缩放图像,当用户上传图像。 几个选项可用。

如果你的CMS是建立在PHP,可以烤上面的PHP的东西变成一个主题或插件。 然而,如果你的基于php的CMS是WordPress,然后不需要你去做那项工作:这是现在社会集团的插件集成到响应问题RICG响应图像作为一个实验功能。 安装插件后,所有你需要做激活这些ImageMagick设置添加以下行到你functions.php文件:

如果你不使用WordPress,不想尝试破解这CMS,大多数CMS的包括一些方法来修改图像违约(特别是质量)。 你可以得到很多好处与几个简单的CMS的配置变化。 查看文档,看看选项可用。

性能

我推荐的设置比仅仅使用显然要复杂得多调整,这种复杂性带来的性能影响。 使用我的建议将需要更长的时间和使用更多的资源在您的计算机或服务器上。 在我的测试中,我发现内存和CPU使用峰值可比,但我设置了平均2.25倍的时间比仅使用渲染图像调整独自一人。

本篇文章来自成都网站建设公司-创新互联！转载请注明！同时翻译不好请与理解！

新闻标题：调整ImageMagick使网站打开的更快！
网页路径：https://www.cdcxhl.com/news/80450.html

成都网站建设公司_创新互联，为您提供小程序开发、静态网站、网站设计公司、做网站、网站设计、服务器托管

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联