文章标签

Gatsby 在处理和处理图像方面做得很好。例如，它可以帮助您节省图像优化的宝贵时间，因为您无需自己手动优化每个图像。

通过插件和一些配置，您甚至可以设置…

Gerry McGovern:

网络充斥着无用的图像。这些陈词滥调的库存图像根本没有传达任何有价值、有趣或有用的信息。它们是最糟糕的数字污染形式之一，因为它们占用页面上的空间，

那里有很多网站想要帮助您处理图像。他们会做一些事情，比如优化您的图像并帮助您以高性能的方式提供它们。

这真是件好事。从任何指标来看，图像都是网站资源的主要部分，我们 notoriously 糟糕地优化它们，以及做所有我们能做的事情来降低它们的性能影响。因此，您使用一些服务来帮助您更好地交付图像。明智之举。他们中的许多人会让管理和优化图像变得容易得多。但我认为他们不是一个不费脑筋的选择。有很多事情需要考虑，比如做出不会让你陷入困境的选择。

我最近找到了一种动态更新任何产品图像颜色的解决方案。因此，只需一个 <img /> 产品，我们就可以用不同的方式对其进行着色以显示不同的颜色选项。我们甚至不需要任何…

让我们来看看一种超级轻量级的方式来为一组任意大小的照片创建水平砌体效果。将任何一组照片投射到它上面，它们将无缝对齐，没有任何间隙。

解决方案…

假设您在 <img /> 中使用一个 800×600 像素的图像。它真的会在您的网站上显示为 800 像素宽吗？它很可能不会。我们倾向于将图像放入灵活的容器中…

IntersectionObserver 使延迟加载 变得比以前容易得多，而且效率也更高，但要真正正确地做到这一点，您仍然需要删除 src 等等，这很麻烦。它肯定不像

<img 

我第一次使图像响应式时，它就像编写这四行代码一样简单

img {
  max-width: 100%;
  height auto; /* default */
}

尽管这对作为开发人员的我来说有效，但它不是…