略问题使用 srcset 和尺寸将不同

somratislmsobur

的图像传送到不同的屏幕在技术上是可行的element 和Picturefill（或类似的）polyfill；但所有这些图像变体都必须创建、调整并融入现有 CMS 的逻辑中。这并不容易。 卷起袖子，提高您的用户体验技能：使用智能界面设计模式 ，Vitaly Friedman 的 10 小时视频库。数百个真实示例和现场用户体验培训。免费预览。 跳转至目录 ↬ 功能面板 最重要的是，还必须生成响应式图像标记并将其添加到 HTML 中，如果新的图像变体在某个时刻发挥作用（例如 WebP 等文件格式或大型横向/纵向变体），则标记会要被更新。所需的额外工作量通常会带来麻烦 - 因此，如果您有完美的产品镜头，您需要手动创建移动、纵向、横向和更大视图的变体，或者构建插件和扩展以某种方式自动化。

该过程。 压缩图像技术 压缩图像技术：文件尺寸加倍，以最差的质量保存。 有时变通办法也很有效。其中之一是压缩图像，这是一种巧妙的技术，表明压缩级别比其物理尺寸产生更大的差异。因此，用 Scott Jehl 的话来说，“假设网站上以相同尺寸显示两张相同的图像，如果一张图像经 Whatsapp 号码列表 过高度压缩且尺寸远大于显示尺寸，那么其中一张图像的文件大小可能会明显小于另一张图像。 ” 所以基本上我们可以放大给定的图像，在 Photoshop 中以最差的质量保存它，然后让浏览器进行重新缩放——平均而言，通过网络发送的实际图像尺寸会更大，但尺寸会小大约 50-65 %。文件大小。现在，这是一个很大的区别。它在实际项目中也有效。 缺点：我们将工作转移给客户端，如果用户选择。



保存图像，他们将得到一个相当次优的版本。它也不能帮助我们制作艺术指导的图像。这并不是我们正在寻找的一个干净的解决方案。 魔鬼就在……后端！  一个常见的场景是在 CMS 中集成某种后端逻辑，允许内容管理者上传图像、为每个给定图像定义焦点并动态生成每个图像的所有裁剪变体。 使用 imgix 裁剪熵。 使用imgix 自动兴趣点裁剪，使用crop=entropy参数进行智能自动裁剪。 “裁剪”是一个棘手的问题，如果您完全可以在没有艺术指导的情况下调整图像大小并允许浏览器选择它认为最适合的图像，那么这不会是一个大麻烦 - 您可以使用ImageMagick或任何其他图像编辑工具来重新缩放，或者 CMS 插件可以为您处理它：例如Mobify.js API、WordPress 核心中的响应式图像，还有Drupal 的解决方案。 然而，如果。