Nadav Soferman 撰写了一篇关于开发人员尝试使图像响应式时可能犯的常见错误的文章
无论您选择哪种响应式设计解决方案或框架,您仍然需要生成并提供每个图像的多个版本。 对于所有方法和框架来说,找到最合适的解析度(即每个特定图像的响应式断点)的挑战是常见的。
特别让我惊讶的是,为了获得最佳的性能提升,我们需要根据图像本身提供不同数量的缩放图像。 一张图像可能需要五个版本,而另一张图像可能需要九个版本。
Nadav 还带我们了解了一个名为 响应式断点 的新工具,该工具旨在解决许多这些常见错误。 如果我们上传一张图像,该应用程序将允许我们下载缩小的图像,向我们展示哪些是该特定图像的最佳断点,然后会提供一个带有标记的清晰示例,以便我们可以将其直接添加到我们的设计中。
此工具处理图像创建和 srcset
属性创建,但我一直梦想着一个用于 sizes
属性创建的自动化工具。 例如,您打算在其中使用图像的页面将在 iframe 中加载。 iframe 会进行一些大小调整,观察图像宽度发生了什么变化,并记录戏剧性的变化(这很可能是断点)。 然后,它会根据这些信息智能地创建 sizes 属性。 #HotAppIdea。 这也让我想起,在设计发生变化时,在 <meta>
标签中设置大小信息会多么有用。