站点的图像优化:使用jpegtran进行批处理| optipng | PNGOUT

  1. 先决条件
  2. 我们使用图像推荐
  3. 档案结构
  4. 工作简要说明
  5. 拾遗
  6. x64(又名andi)

没有图像的网站 - 不合时宜。 很多人都认为,这并不缺乏常识。 请记住,您最近一次访问该网站有多长时间以及您已经访问了多长时间?

文本数据比图像小得多。 但众所周知,人们会爱他们的眼睛。 因此,图片将成为故事的毋庸置疑的优势。

一般而言,在谈到文本时,我们指的是其内容和方便的视觉呈现,包括段落,列表,引号,表格。 然而,这还不够,甚至新闻网站都试图提供记者的图像。

一般而言,在谈到文本时,我们指的是其内容和方便的视觉呈现,包括段落,列表,引号,表格。 然而,这还不够,甚至新闻网站都试图提供记者的图像。

让我们从需要图像的假设开始。 这些可以是照片,图表,只是解释图片。

很久以前,当普京看起来并不永恒时,我创建了我的第一个医疗门户网站。 有必要将图片放到地图集中。 很明显,很难想象没有图片的身体的解剖结构,更需要用文字描述。 不用多说,我上传了图片到bmp(未压缩格式)。 我不得不说他们称面团了吗? 而且,有些浏览器不知道如何显示这样的图片。

为什么要优化图像呢? 一个简单的例子是照片。 现代手机拥有8,12甚至更高像素的相机。 12MP对应于4000×3000像素的图像。 根据场景的复杂程度,这相当于2-5兆字节的大小,甚至更多。 十几张照片 - 页面大小膨胀了很多。 图像适合内容区域,这意味着浏览器必须首先下载所有内容,缩放它,然后才显示它。 对于弱者 处理器 或者少量的RAM - 一场灾难。

现在假设用户正在通过手机观看该网站。 在这种情况下,页面加载可能不会等待。 因此,图片需要预先缩小。

有人会说这没有意义;现代CMS在下载图像时会自动生成缩略图。 但是每个人都有他们的网站VPS或VIP费率吗? 下载一个12 MP图像可能会出来,但要处理它,PHP将需要为存储分配35+兆字节(理论上,实际上更多),然后仍然知道创建一个较小的副本多少。 廉价关税立即陷入资源过剩。 一个好的主机会要求用户不再这样做,坏的人会忽略它,因为只有钱对他来说很重要,而不是服务的表现。

所以,我们决定采取正确行动。 我们初步缩小图像,然后将它们上传到网站。 所以发动机更容易,而人。 是一切 不是真的

许多编辑器保留包含附加信息的原始块(元信息,文件的非图像部分)。 例如,如果您在手机上拍摄某些内容,请将文件传输到计算机,使用右键单击并选择“属性→详细信息”,您将在设备上看到数据:您拍摄的相机,快门速度,ISO等。 对于用户来说,这些信息是无用的,所以你可以摆脱它。

好吧,想一想,一大块。 那是什么,包含了大量信息? 想象一下。 有时你会得到数百千字节的数据。 就在今天,他们发送了一个584 KB大小的徽标。 与此同时,有用的信息只有14 KB! 至于我,强迫访问者从上面下载570 KB并不完全正确。

让我们总结一下小计。 为了使网站的用户更好,您需要:

  1. 减小图像的大小。 帮助任何图形编辑器。
  2. 抛出文件部分是不必要的。 实际上,用户只需要一张图片。
  3. 尝试进一步缩小图像的大小。

第一段涉及每个文件的个别工作。 这是耗时的,但它带来了最好的结果。 我们打开每个文件,剪切,缩小,然后以可接受的质量保存。

但第2和第3款可以由特别方案摆布。 用于处理图像集的软件。 Google建议使用以下程序:

  • jpg图像格式的jpegtran
  • 对于PNG图像的optipngpngout

有点关于第3页。图形编辑通常不会理会它。 它们只是保存图像,提前选择具有相同设置,量化系数和其他内容的压缩算法。 此外,许多人诚实地转移可用的元信息并添加自己的元信息,进一步增加文件大小。

先决条件

一年前,他们开始大量谈论这项服务。 PageSpeed见解 来自谷歌。 事实上,这些都是搜索巨头关于“如何做好”的建议。 只需输入网站地址并获取优化建议列表即可。 在那里,您还可以为您的站点下载已优化的资源,包括图像。 没错,这仅适用于选中的页面。

如果你有一个网站,一定要看 这篇文章 。 对于那些使用WordPress的人特别有用。

我们使用图像推荐

看起来很简单:下载Google指定的程序并通过它们运行服务器上的所有文件。 问题是这些实用程序是控制台。 他们一次只能获取1个文件。 但我们并没有白费 上一篇文章 花时间批处理文件,对吧?

文章中的信息足以创建自己的文件处理程序,所以我不会在那里绘制。 我只是建议下载我自己使用的准备好的组件。

下载档案(212 KB)

档案结构

存档包含一个文件夹[ OptimizeImg ]。 要开始,请将其解压缩到某个地方。 我把它放在c:\ temp \但是没关系。 主要的是路径不包含感叹号。

下一步。 该文件夹包含[ uploads ]子目录。 在这里,您需要放置需要处理的文件。 最好的部分是你至少可以推送文件夹/文件结构。

还有3个程序:jpegtran.exe | optipng.exe | pngout.exe是Google推荐的实用程序。 从相应的官方网站/存储库下载。 如果有疑问,或者只是想升级,请从受信任的来源下载并替换现有的来源。

最后,tulza的核心。 Batnichki:

  • 1.BAT
  • 3.bat
  • 3 GO.BAT
  • 3-OPTI-到out.bat
  • 3-外向opti.bat

第一个文件1.bat从[uploads]重新创建结构。 创建了3个附加文件夹:[jpg_jpegtran] [png_optipng] [png_pngout],其中处理了最小化的文件类型(jpg - 仅* .jpg文件,与png相同)。

3.bat顺序启动三个批处理文件执行:

  • 3-go.bat几乎与1.bat相同。 通过最小化器跳过jpg / png文件。 这项工作的结果将是3个文件夹(见上文)及相应的图像。
  • 3-opti-to-out.bat创建[png_optipng-to-pngout]文件夹,optipng + pngout处理的文件将写入该文件夹(按照此顺序)。
  • 3-out-to-opti.bat创建一个[png_pngout-to-optipng]文件夹,写入pngout + optipng处理的文件。 与前一个类似,只是以不同的顺序。

原则上,只有1.bat足以满足我们的需求。 由于上一版批处理文件中的研究和错误,出现了3x行李。 碰巧在错误期间,pngout的文件来自optipng目录。 当旧版本的发布尺寸比更新的批处理文件小1.5倍时,我感到惊讶。 结果,事实证明,双重处理可以很好地“赶上”图片。 但它需要几乎2倍的时间。 所以决定自己是否需要。

工作简要说明

  1. 下载档案
  2. 打开包装。
  3. 转到新打开的[OptimizeImg]文件夹。
  4. 所有需要刺痛的文件,复制文件夹[上传]。
  5. 运行1.bat并等待。 如果有很多文件并且它们是png,请等待很长时间。
  6. 当黑色窗口中显示有关需要按键继续的消息时,一切准备就绪。 它仍然是获取创建的文件夹的内容并通过FTP复制到托管,覆盖旧文件。

举个例子。 让你在WordPress上有一个博客。 所有图像都存储在[ / wp-content / uploads / ]中。 转到站点文件夹(通过ftp),转到[ wp-content ],然后将[ uploads ]复制到同名的OptimizeImg文件夹中。 运行1.bat并等待。 工作完成后,内容[jpg_jpegtran](我们去那里!)上传到服务器。 通过覆盖来回答对现有文件的请求。 png的一个类似技巧,但首先我们看看哪个文件夹 - [png_optipng]或[png_pngout] - 占用更少的空间,用它的内容填充它。

不要害怕损坏其他文件。 Batniki仅使用jpg / png工作,只有这些类型的图像被写入新创建的文件夹。

我希望有人会有用。 祝你好运!

拾遗

  1. [OptimizeImg]的路径不应包含感叹号 百分比
  2. 不需要以管理员身份运行脚本。 而且,在这种情况下,它们可能无法正常工作!
  3. ...

作者

不在线13个小时

x64(又名andi)

评论:2846出版物:395注册:02-04-2009