Nadav Soferman ha escrito una excelente publicación sobre los errores comunes que se pueden cometer cuando los desarrolladores intentan hacer que las imágenes respondan:
Cualquiera que sea la solución o el marco de diseño receptivo que elija, todavía necesita generar y entregar múltiples versiones de cada imagen. El desafío de encontrar las resoluciones que mejor se ajusten, que son los puntos críticos de respuesta para cada imagen específica, es común para todos los enfoques y marcos.
Lo que me sorprende especialmente es que necesitamos servir una cantidad diferente de imágenes escaladas dependiendo de la imagen en sí para obtener las mejores ganancias de rendimiento posibles. Una imagen puede requerir cinco versiones, mientras que otra puede requerir nueve.
Nadav también nos guía a través de una nueva herramienta llamada Responsive Breakpoints que ha sido diseñada para resolver muchos de estos errores comunes. Si cargamos una imagen, la aplicación nos permitirá descargar las imágenes reducidas, nos mostrará cuáles son los puntos de corte óptimos para esa imagen en particular y luego nos dará un ejemplo claro con marcado para que podamos agregarlo directamente a nuestros diseños.
Esta herramienta maneja la creación de imágenes y srcset creación de atributos, pero también he soñado con una herramienta automatizada para sizes creación de atributos. Por ejemplo, la página en la que desea utilizar la imagen se carga en un iframe. El iframe cambia de tamaño alrededor de un grupo, observa lo que sucede con el ancho de la imagen y registra los cambios dramáticos (que probablemente sean puntos de interrupción). Luego crea inteligentemente el atributo de tamaños basado en esa información. #Idea de HotApp. Lo que también me recuerda lo bueno que sería establecer un <meta> etiqueta con información de tallas, ya que los diseños cambian.
Enlace directo →