让响应式图像节省每一比特：Sizer工具

让响应式图像节省每一比特：Sizer工具

在我们谈论响应式图片多年之后，您是否曾停下来思考过，向窄视口发送非响应式图像会带来多大的传输成本？在无线网络中，有多少字节被白白浪费了呢？

Sizer工具正是为了解决这个问题而诞生的。它评估了通过调整图像大小以适应不同视口来节省资源的可能性，旨在帮助你在性能预算范围内优化图片加载。

使用方法

只需简单的命令行操作，Sizer就能开始工作：

./sizer.py <URL>
./bulkSizer <Text file with URLs>

运行上述命令，Sizer将对指定的URL或批量URL列表进行处理。

结果展示

除了屏幕上的摘要结果，详细的结果会保存到你的/tmp/目录下。每个网站都会有一个独立的目录，其中包含了原始图片、优化后的图片和按不同视口尺寸调整后的图片，以及各个视口的结果日志。

依赖项

Sizer依赖以下组件：

• Python
• PhantomJS
• image_optim（一个CLI版本的ImageOptim）
• ImageMagick
• python-slugify
• python-magic

针对不同的操作系统，Sizer提供了安装脚本：

• 在Ubuntu/Debian上运行ubuntu_install.sh。
• 在OSX上运行osx_install.sh。
• 其他Linux系统，请自行安装相关依赖。
• 如果你正在使用Windows，那就试试安装Ubuntu吧：）

工作原理

Sizer的工作流程如下：

1. getImageDimensions.js是一个PhantomJS脚本，用于下载指定URL的内容，并输出所有内容图像及其尺寸。
2. downloadr.py负责下载图像资源。
3. resizeBenefits.py利用getImageDimensions.js的结果来调整图像大小，查看调整后文件的大小。同时，它还会使用image_optim对原图进行无损优化，以观察能省下多少空间。
4. sizer.py则按照多种视口尺寸循环执行这些任务。增加视口尺寸虽会延长运行时间，但可以提供更全面的数据。

关于名字

就像创建者在README中提到的，“Sizer”这个名字是在周六诞生的。有时候，简单直接的命名也能深入人心！

总结起来，Sizer是一个强大的工具，无论你是开发者、设计师还是网站管理员，都能从中受益。通过智能地调整和优化图像，Sizer可以帮助你降低带宽消耗，提升网页加载速度，从而提供更好的用户体验。现在，就动手试试看吧！