现代 CSS

响应图片断点生成器

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

四年前,Jason Grigsby问了我一个出人意料的难题: 你是如何获取响应式图片断点的?一年之后,他得到了答案: 理想情况下,我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法,并且在社区获得了一致性的好评:“太棒了!现在,它还可以实现什么呢?

扩展阅读

自今年早些时候发布以来,响应式图片断点生产器将高分辨率的原件转变为了一个具有明智srcsets按钮的<img>。现在,我们将要推出版本2,允许你对布局断点设置宽高比率,并通过智能剪裁对图片资源进行匹配,生成艺术指导的 <picture>标记。请继续向下阅读。

响应式图片断点的问与答

为什么我们需要首先构建此工具?

响应式图片对不同的人发送不同的图像资源,以适应它们特定的上下文;响应式图片就是图片根据不同情况,做出不同的响应。这种适应性可发生在多种情况中。大多数情况下,大多数的开发人员只需要自适应分辨率 —— 我们想要将高分辨率图像发送大视口或者高分辨率显示器,以及低分辨率图像发送至其余设备。Jason关于图片断点的思考就是相关适应性问题。

当我们制定图片适应不同的分辨率时,需要生成一定范围内不同大小的资源。选择一个最大的分辨率以及一个最小的分辨率,当然还有一些中间值。两个极值可以计算出页面的布局以及一些关于设备合理的假设。但是,当开发人员实现这些响应式图片时,关于如何进行大小设置就变得模糊不清。一些人甚至设置了固定的图片宽度:

breakpoints-constant-step-size

使用一种固定大小策略的,一组具有相对尺寸大小的srcset资源的矩形展示

一些人采取了一种固定大小尺寸应用于所有的情况:

breakpoints-constant-number-of-steps

采用一种固定大小策略,三组相对尺寸srcset资源的矩形展示。

一些人采用了常见的大小展示宽度:

breakpoints-common-displays

缩放到常见大小的一组相对尺寸的srcset资源的矩形展示。

当时,因为我比较懒惰,不喜欢管理过多的资源,偏爱于翻番:

breakpoints-doubling

使用加倍策略缩放的一组具有相对尺寸的srcset资源的矩形展示。

以上所有的战略都是任意的。Jason认为一定存在更好的解决方案。最终,他意识到我们没有必要按照像素考虑这些步骤。我们的目标在于“如何机智的跳转于文件之间”;这些步骤应该根据字节而定

比如说,我们有以下两张JPEGs:

bike-big-300px-opt

300px宽 (37KB)

bike-big-1200-opt

1200px宽 (333KB)

最大的原因在于我们不想给一个仅仅需要小尺寸资源的人发送宽为1200像素的资源;这是一个额外的296KB资源。但是不同的图像压缩不同;一个复杂的照片随着像素大小的增加,字节大小也会随之急剧增长。一个简单的图标增加的可能不仅仅为文件大小。如,一个宽为1000像素的PNG大小仅仅比宽为200像素的大8KB。

不幸的是,目前为止还没有工具可以生成具有一定字节大小的图片。理想情况下,你可能会想要生成整个范围内你所需要的响应式图片资源 - 不仅仅是一次仅生成一个。Cloudinary已经创建了这个工具

generator-screenshot-large-opt

并且这是一个免费开源的web应用程序。

但是,人们的需求可能会更多。

下一个需求?

我们解决了断点问题,在这一过程中创建了一种工具可以很轻松的生成自适应分辨率的图像。上传高分辨率的原图像,根据断点生成并返回相应的<img>资源。

基本的工作流 —— 上传图片,返回一个响应式图片 —— 十分具有吸引力。我们曾经关注于断点问题,但是当我们解决了这个问题,大家可能会问,“它还可以实现什么呢?”

不知道大家是否还记得我曾经说的,大多数开发人员,大多数基于一定的分辨率?有时,这并不是足够的。有时,我们想要图片的依据我们自己的方向: 艺术指导

不管什么时候,根据视觉选择图片以适应上下文。我们是“艺术指导”。一个分辨率自适应的图片无论在哪儿看起来都是相同的 - 只是需要调整大小。一个艺术指导的图像在视觉方面的改变是十分明显的。大多数时候,这意味着剪裁,要么适应一个新布局,要么当在小的物理尺寸查看时,保持着图像最重要的可见部分。

art-direction-example-image-preview-opt

在小屏幕上,我们想要放大图片的主体部分。

大家询问自动艺术指导。

...这是一个很难回答的问题!它需要知道一张图像“最重要的”一部分。比特和字节是程序最简单的部分。计算机视觉和“重要性”的模糊观点又完全是另外的事情。

如,给出这张图片...

smartdumb-uncropped-preview-opt

...一个不好的算法可能只是从中心进行剪裁:

dumbcrop-example-image-preview-opt

你所需要的是一个可以捕获小猫并智能的进行捕获的算法。

这花费了我们几个月的时间但是结果是令人喜悦的,我们做到了。并将其打包作为Cloudinary所有用户的可用功能资源

工作原理: 当你根据“自动引力”(g_auto)指定想要捕获的图片时,对图片进行一系列的测试,包括边缘测试,人脸测试以及视觉唯一性。这些不同的标准用于生成图像最重要部分的“热图”。

white_cat_g_auto_heatmap-opt

具有新比例的帧之后会重新生成图像,可能进行简单的评定并选出优胜者。这里还一个可视化的滚动帧算法(使用不同的原图像):

滚动的框架,可视化。蓝色的方块意味着优先级更高;绿色表示当前的选择。

结果?我们的猫,前面与中间:

smartcrop-example-image-preview-opt

很整洁!

显而易见,我们可以并且应该使用g_auto的机智向生产器自动添加艺术指导。经过一些标记逻辑的升级以及一些(十分吃惊)UX决策,我们做到了工具的第2版本 - 现在具有艺术指导功能。

进行实践

那么如何使用这个响应式图像断点生产器呢?

第一版本已经讲述了大部分的工作原理: 上传图片(或者选择一个预设置),设置最大与最小的分辨率,一个步骤性的大小(单位为字节!),以及资源的最大数目(或者,你可以简单使用大部分使用的一些默认值。)点击“生成”。这时,就可以得到一个可视化的结果图像的响应式断点,一些样品的标记以及一个大的“图像下载”按钮。

generator-screenshot-inputs-500-opt

generator-screenshot-outputs-500-opt

新版本有一些新的输入设置,与艺术指导相关。默认情况下是关闭的。让我们打开其中的一些并且再生一些?

generator-screenshot-art-direction-inputs-selected-preview-opt

第一个输出部分不变: 包含了我们的“桌面”图片,相应的断点表现良好。但是,下面的部分,向我们展示了新的剪裁的图像。

generator-screenshot-square-preview-opt

下面,我们有所有的我们需要的艺术指导的<picture>元素,在布局断点处进行剪裁切换。

generator-screenshot-picture-markup-preview-opt

最后,有一个鲜活的<picture>示例,展示所有标记的行为。

generator-screenshot-picture-live-opt

让我们回过头来详细的看一看艺术指导的输入。

generator-screenshot-art-direction-inputs-annotated-preview-opt

每一个大的盒子映射一种设备类型,每一种设备类型对应一种布局断点。设备类型名称下面的文字表明了特定的媒体查询,相应的触发剪裁。

下面,我们可以指定想要的设备的剪裁比率。

下面,我们根据设备类型的视口宽度指定了图片的宽度。是不是占据整个视口还是只是一部分?该工具使用百分比生成简单的标记 - 用于指定布局中图形的大小。如果你正在生产中使用此代码,你可能会想要回到示例标记以及制定这些值,以更加精确的匹配你特定的布局。但是根据你的布局,这里的粗略的估计输入还有待于进一步提升。

现在具有: 简单,艺术指导的按键。

自动化

如果你想要一次性处理多张图片,又要怎么做呢?如果你正在构建的网站有上百张或者上千张(甚者说数以万计!)的图片 - 特别是如果你正在使用用户生成的内容 - 你会想按钮变得更为简易;你将需要自动化。为此,这里有Cloudinary API,你可以调用智能剪裁以及响应式图像断点函数,赋予生成器超能力。使用API,你可以创建自定义的,优化的以及完全自动化的响应式图片工作流,用于任何类型与大小的工程。

如,这是Ruby代码,上传一张图像至Cloudinary,以16:9的比率进行智能剪裁,生成一系列的压缩的具有响应式图像断点的资源:

Cloudinary::Uploader.upload("sample.jpg",
    responsive_breakpoints: { 
        create_derived: true,
        bytes_step: 20000,
        min_width: 200,
        max_width: 1000,
        transformation: {
            crop: :fill,
            aspect_ratio: "16:9",
            gravity: :auto
        }
    }
)

如果你只是从事于前端工作,所有的这些功能可以通过URL参数设置。这里有一个Client Hints所创建的URL以及做着相同工作智能剪裁的下载,Ruby代码针对不同的设备相应的进行不同的,动态优化的资源上传:

https://demo-res.cloudinary.com/sample.jpg/c_fill,ar_16:9,g_auto,q_auto/w_auto:breakpoints/sample.jpg

所有的智能都挤进去了这个小小的URL之中了!

最终思考

转向生成器,现在它可以做的不只是获取图像断点 - 也可以获取艺术指导的捕获截取。之后为你生成所有繁琐的资源与标记;上传一个高分辨率的原件,返回所有的标记以及缩小你所需要的资源,包括一个可扩展的以及艺术指导的图像。

对了,我有提及响应式图像断点生成器是免费的了吗?并且是开源的?请试一试并给我们进行相关的反馈,可能不久的将来会有第三版本的诞生!

本文根据@Eric Portis的《Automating Art Direction With The Responsive Image Breakpoints Generator》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://www.smashingmagazine.com/2016/09/automating-art-direction-with-the-responsive-image-breakpoints-generator/

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

如需转载,烦请注明出处:http://www.w3cplus.com/responsive/automating-art-direction-with-the-responsive-image-breakpoints-generator.htmlSneaker Bar Detroit (SBD)

返回顶部