我一直致力于创建一种新的图像格式，我称之为FUIF，或免费的通用图像格式。我知道，那是个相当自命不凡的名字。但我不能称之为免费有损图像格式（FLIF），因为这个首字母缩略词已经不可用了（见下文），而且FUIF也可以做到无损，所以它不准确要么。这个这不是我第一次制作新的图像文件格式。几年前，我创建了FLIF，一种免费的无损图像格式。对于无损压缩，FLIF与现有的替代方案相比仍然表现得相当好。但是，在实践中，无损压缩通常不是图像传输所需要的。特别是照片图像，可以从有损压缩中获益，而无损压缩在传感器噪声上浪费了宝贵的比特。FLIF根本不是为那个。一个FUIF这个名字的主要特点是发音不明确（就像GIF和HEIF）。据记录，正确的发音是/fœʏ̯f/，这实际上是我母语荷兰语中的一个单词。但是，就我个人而言，我把它叫做说英语的时候。也可以说，它应该发音为/fjuːɪf/（如"valueing"），因为U代表通用。此外，"ui"序列在英语中有很多发音方式，所以有很多选择：关于/fuːɪf/（像"fluid"）、/fuf/（像"水果"）或/fɪf/（像"吉他"）呢？但是，撇开命名和发音不谈，已经有很多图像文件格式可用了。所以，如果你想知道为什么我们需要另一个，我完全理解，我希望这篇文章（以及本系列的后续文章）能让你相信我们做。有反应网络设计终端用户观看设备的种类越来越多：从小巧的智能手表屏幕到大范围的屏幕尺寸和显示分辨率用于手机、平板电脑和平板电脑、笔记本电脑和台式电脑屏幕，一直到4K或8K电视或投影仪。然后你需要考虑网络状况，从慢速2G或3G接收不良到超高速、始终在线的光纤连接。因此，创建具有给定视窗宽度的网站或应用程序不再是可接受的。响应式网页设计（RWD）已经成为正常。那个目前在RWD中实现灵活图像的方法需要从每个高分辨率主图像创建各种缩小的图像，然后根据用户的浏览上下文将不同的图像发送给用户。这种方法有助于减少不必要的带宽消耗。想象一下，向智能手表发送4000像素宽的图像！不过，也有不利的一面。你必须创建那些缩小规模的变体并将它们存储在某处。对于web开发人员来说，RWD是一个重大的挑战，他们必须做出许多重要的决定，比如需要多少变体、什么大小以及创建和管理它们的基础设施是什么很明显，像Cloudinary这样的服务通过提供这样的基础设施、动态创建缩小的变体来帮助减少这些麻烦使用诸如响应断点之类的技术来帮助自动化所涉及的大多数任务。然而，图像处理基础设施不能用多文件方法解决一些固有的问题。例如，要传递的文件的倍增对CDN级别的缓存行为有负面影响。也很难避免这样一种可能性：单个最终用户可能最终下载同一图像的多个变体，例如，当他们的视口宽度因浏览器窗口调整或电话而改变时旋转。一文件来规范他们所有这是可能的，并希望有一个图像格式是响应的设计，这意味着您可以只使用一个文件，而不是许多缩小的变体。将这个单一的"主"文件截短到不同的偏移量会产生缩小或质量较低的图像版本，需要基本上是金字塔格式的格式，并将图像从低分辨率编码到高分辨率决议。这个这个主意并不新鲜。JPEG已经可以使用渐进式扫描脚本，您可以通过使用合适的扫描脚本截断渐进式JPEG来生成合理比例的1:8、1:4和1:2预览。层次化的JPEG和jpeg2000使这一思想更进一步。而且，虽然这种做法还没有被广泛采用，但浏览器已经逐渐呈现渐进式的jpeg格式，所以现在就可以自由地利用金字塔图像的分辨率了。然而，目前大多数的图像文件格式都放弃了渐进式解码的能力。WebP、BPG、HEIC（具有HEVC有效载荷的HEIF）和AVIF都不能逐步解码；截断一个文件只会产生图像的顶部。这是一个不幸的副作用，因为这些图像格式是从视频编解码器帧内比特流派生出来的。因此，在视频的上下文中，单个帧的渐进解码并不是真的有用。进步与响应设计相比，除了RWD的要求，人们也越来越关注加载网页和给用户一种快速体验的时间。低质量图像占位符（LQIP）、缩略图库和渐进式渲染是在下载整个图像之前在屏幕上提供aa预览的方法。"渐进式解码"和"按设计响应"类似，但不完全相同，功能：渐进解码起源于一个观看环境对每个人来说几乎相同的时代：低带宽和800x600（或后来的1024x768）的显示分辨率。每个人都应该得到相同的最终图像（整个文件），但最好是在字节慢慢到达时预览一下。相比之下，响应设计意味着不同的人得到不同的最终图像（取决于他们需要的分辨率）。即使响应按设计格式的渐进式渲染始终是可能的，但是如果网络足够快（或者，如果图像"低于折叠"），则可能不需要实际执行该操作。设计上的响应意味着"进步"，但它稍多于此。它必须从被截断的文件中得到精确的缩小后的图像，这意味着一定的机制必须找到截断的位置，然后在特定的截断偏移量下，在压缩密度和图像质量之间取得可接受的折衷。FUIF的一个主要动机是设计一种响应性强的图像格式，这意味着不再需要为同一图像生成许多变体：低质量的占位符、缩略图、许多用于许多显示分辨率的缩小版本。在不同偏移量处截断的单个文件也可以执行相同的操作事情。进来在本系列文章的后续文章中，我将讨论FUIF背后的其他设计原则，首先看看是什么使它成为一个通用的图像格式。注释福伊夫密码现在已经公开了。关于响应图像的进一步阅读具有Cloudinary的响应图像自动裁剪图像，实现响应式设计，提高图像质量响应图像：srcset和size HTML图像属性通过3个简单的步骤使网站上的所有图片都能响应响应式Web设计的最佳实践