响应式图像_不要等待响应式图像
响应式图像
At long last, it appears we have our much-needed markup solution for responsive images thanks to srcset, sizes and picture. Implementation is already happening in Chrome & Opera (Blink) and Firefox (Gecko). Soon, the Blink implementation will be ported to WebKit. This is fantastic news—we’ve needed this for so long!
终于有了srcset，大小和图片，我们似乎有了我们急需的响应式图像标记解决方案。 Chrome和Opera(Blink)和Firefox(Gecko)中已经在实施。 很快，Blink实现将被移植到WebKit。 这真是个好消息-我们已经需要了这么长时间了！
Yet some are still not happy. Honestly, that’s to be expected. The responsive images debate was incredibly heated and had much in common with an episode of Game of Thrones—minus the nudity. Some folks are still unsettled by the potential verbosity of picture & friends and would prefer a server-side solution or a new image format.
但是有些人仍然不开心。 老实说，这是可以预料的。 响应式图像的争论异常激烈，与《权力的游戏》一集有很多共同点-减去了裸露。 有些人仍然对图片和朋友的潜在冗长不安感到不安，并且希望使用服务器端解决方案或新的图像格式。
The thing is—they’re not wrong. The markup solution was absolutely needed, but a server-side solution (Hello, client-hints!) would be amazing, as would a new image format. And in some cases, such solutions might even be better than what we currently have to play with.
关键是-他们没有错。 标记解决方案是绝对需要的，但是服务器端解决方案(Hello， client-hints ！)以及新的图像格式都将是惊人的。 在某些情况下，这种解决方案甚至可能比我们目前必须使用的解决方案更好。
Yet dismissing one of these three options as less than ideal misses the point. There is no ideal. There is no one-size-fits-all solution here. They each have their own important role in meeting the ultimate goal—serving great looking images to our visitors without all the current excess bloat.
然而，将这三个选项之一视为不理想就忽略了这一点。 没有理想。 这里没有一种万能的解决方案。 他们每个人在实现最终目标方面都有自己的重要作用-在没有当前多余的膨胀的情况下为游客提供精美的图像。
In fact, I’d argue they all work better when in concert. Here’s what the responsive image process looked like on a recent project I worked on:
实际上，我认为它们在协作时都能更好地工作。 这是我最近从事的项目中的响应式图像处理的样子：
- Image gets uploaded through the CMS by the content creators. 图像由内容创建者通过CMS上传。
- Server process compresses images and resizes to different dimensions. 服务器进程压缩图像并将其调整为不同的尺寸。
- A template uses these images and, based on how the image is used in the page, generates a picture element with the appropriate breakpoints. 模板使用这些图像，并根据页面中图像的使用方式，生成带有适当断点的图片元素。
- Users rejoice over faster-loading pages! 用户为加载速度更快的页面而高兴！
It’s an approach that lends itself well to future changes while making use of what we have available to us today. It also doesn’t just depend on a single approach to the task—it combines front-end markup with server-side processes to make an even better end result.
这种方法可以很好地适应未来的变化，同时利用我们今天可用的资源。 它还不仅仅依赖于单一的任务方法，它还结合了前端标记和服务器端流程，从而获得了更好的最终结果。
Since the solution was kept in it’s own little module, there is a lot of flexibility to improve it in the future. It’s currently using the slightly older picturefill markup, but it will be easy to update that to the new and improved version. When client-hints come into the fold, it won’t take much work to use that data as well to inform the creation of the picture element and reduce the markup a little.
由于解决方案保留在它自己的小模块中，因此将来有很大的灵活性来改进它。 它当前使用的是稍旧的picturefill标记，但是将其更新为新的和改进的版本很容易。 当客户提示出现时，使用这些数据来通知图片元素的创建并稍微减少标记也不需要太多工作。
It took some time to get to that point. We had to analyze what types of images were used on the site, how they needed to change for different screens, and then figure out what breakpoints to use to pull in new images.
到这一点花了一些时间。 我们必须分析站点上使用了哪种类型的图像，如何针对不同的屏幕更改它们，然后找出要使用哪些断点来引入新图像。
Then we had to build the server-side process to do the optimization and resizing, the module to generate the picture element, and the template logic to use the module. But the result of that effort is a better performing page and an image creation process that is flexible, future-friendly and fully automated.
然后，我们必须构建服务器端流程来进行优化和调整大小，生成图像元素的模块，以及使用该模块的模板逻辑。 但是，这种努力的结果是页面性能更好，并且图像创建过程灵活，面向未来且完全自动化。
So yes, keep pushing for a new image format or a new server-side solution. We could absolutely use those. But don’t let that stop you from making a better experience for the people accessing your sites today.
因此，是的，请继续寻求新的图像格式或新的服务器端解决方案。 我们绝对可以使用这些。 但是，不要因此而阻止您为今天访问您网站的用户提供更好的体验。
The tools are there now. Let’s use them.
工具就在这里。 让我们使用它们。
翻译自: https://timkadlec.com/2014/05/dont-wait-on-responsive-images/
响应式图像