渲染的HTML看起来像这样:

\n    \n
\n\n

El soporte de los navegadores es mucho mejor que el de Picturefill con el costo de ser una solución más pragmática que una progresiva.

Source Shuffling

Source Shuffling se acerca a este problema desde un ángulo ligeramente diferente que del resto de las librerías front-end. 这听起来像是来自“移动第一”学校的思想。, 默认情况下使用最低分辨率. 通过检测哪个设备拥有最大的屏幕, 将图像的字体更改为更大的字体. 感觉更像一个 hack 不像一个完整的图书馆. Esta es una gran solución principalmente para sitios mobile pero significa que la descarga doble de recursos para desktops y/o tablets es inevitable.

其他值得注意的JavaScript库包括:

\n
• \n

  HiSRC -用于响应式图像的jQuery插件. 依赖jQuery可能是个问题.

  \n
\n
• \n

  Mobify.js -用于响应性内容的通用库, 包括图片, 样式表甚至JavaScript. 在资源加载之前“捕获”dOM. Mobify是一个功能强大的综合库, 但它可能是过度的，如果目标只是有反应性的图像。.

  \n
\n

En Resumen

在一天结束的时候，由开发人员来决定使用哪种方法。 响应式网页设计 图像为您的用户群. Esto significa que la colección de datos y testing darán una mejor idea de qué aproximación usar.

去兜圈子, puede ser de utilidad considerar la lista de preguntas que vienen a continuación antes de decidir la solución apropiada para imágenes responsive.

\n
• \n

  传统浏览器是个问题吗?? Si no lo son, considera utilizar una aproximación más moderno (por ejemplo, Picturefill, atributo srcset).

  \n
\n
• \n

  反应时间是关键吗?? 如果不是，请选择后端或第三方解决方案.

  \n
\n
• \n

  内部解决方案? 外包选项显然被抛弃了。.

  \n
\n
• \n

  网站上有很多图像试图转换为响应性图像吗?? 是否存在关于验证或语义标记(或非语义标记)的问题?? Esto requerirá una solución de back-end para guiar las solicitudes de imágenes a algo como 适应性图像.

  \n
\n
• \n

  ¿La dirección de arte es un problema (específicamente para imágenes grandes con mucha información)? 像Picturefill这样的库可能是一个更好的解决方案。. 此外，任何后端解决方案也可以工作.

  \n
\n
• \n

  JavaScript有什么问题吗?? 任何前端解决方案将被排除在讨论之外, 这就留下了依赖于UA跟踪的后端或第三方选项.

  \n
\n
• \n

  ¿Hay alguna prioridad para tiempos de respuesta de mobile vs tiempos de respuesta de desktop? 像Source Shuffling这样的库应该是最适合这种情况的。.

  \n
\n
• \n

  是否有必要对网站的各个方面作出反应?, 不仅仅是图片? Mobify可以做得更好.

  \n
\n
• \n

  完美世界已经实现了吗? 然后只使用CSS近似 display:none!

  \n
\n