博客

高品质图像

We'凭借我们多年建设高流量物业和包括Shortbreaks.com在内的物业列表网站的经验,我们一直在为Scrumpy建筑内部开发出新的定制成像解决方案。它'是一项强大的技术,对于我们的客户及其客户来说都是完全看不见的。

作为一种隐形技术'真正专注于为客户提供的关键改进非常重要:

  • Reduced image 重量 by up to 20% based on old images
  • 改善感知图像质量
  • 新的布局可能性
  • 移动用户的图像加载时间缩短多达80%

背景

许多游客会基于他们对度假屋整体质量的看法 关于图像的质量。它'重要的是,我们客户网站上的图像要清晰,可快速加载并 他们称赞设计。

目前的设计趋势要求使用大幅面横幅广告,这意味着'weight'大多数网站都来自页面上的图像。由于设计要求使用大横幅图像,因此我们的互联网连接和使用的设备变得更加移动,因此速度也较慢,'不能很好地相处。我们新的成像解决方案就是试图解决这个问题'weight'.

我们的目标很简单,但存在冲突:

  • 减少影像'weight'缩短页面加载时间
  • 提高图像质量以改善客户体验

实现这两个目标是困难的平衡。我们的旧方法依靠生产几种'styles'网站周围要使用的图像,其中一个用于横幅图像, 一个用于缩略图,它是 a very 广泛使用的方法。通过对旧图像进行上传,我们对它们进行了优化 各种工具 。我们旧方法的问题是添加新方法'styles'意味着重新处理旧图像,而对优化技术的任何改进都意味着再次重新处理旧图像。

新的成像解决方案使我们能够定义'styles'随时随地改善优化(新格式,新优化工具,经过调整的选项等) 并使我们能够利用图像传递方面的全新改进。

影像传送

We'重新使用全新'Client Hints' 规范 为了帮助为目标设备提供正确的图像,这有助于减少数据浪费,并确保无论使用哪种设备,图像都看起来不错。我们从本质上看屏幕的大小 并确保我们永远不会发送比这个更大的图像 帮助降低整体形象'weight'.

We'根据浏览器支持,智能地选择最佳图像格式,包括 谷歌 's WebP format。智能格式选择意味着用户现在可以以较小的文件大小获得更好的图像质量。

映像请求由我们的CDN自动缓存,请求位于全球分发网络的前端,服务器根据当前需求自动扩展。

成像系统是我们的一个项目'对在野外出行感到很兴奋,我们'致力于改善和扩展它可以为我们的客户提供的服务 websites.

未来的改进

即将进行的改进将增加后备功能'client hints'基于设备检测,流体图像尺寸调整 和DPI敏感图像意味着'High DPI'iPhone等设备将以适当的尺寸接收像素密集的图像。