¿Cuál es la mejor manera de manejar imágenes receptivas?

Primero tienes que definir “mejor”. Mi definición sería:

1. Representa la imagen con el efecto previsto del diseñador en cualquier dispositivo o pantalla
2. Renderiza la imagen con la misma calidad que la original.
3. Consume la cantidad mínima absoluta de sistema y recursos humanos (es decir, ancho de banda, CPU, tiempo de diseñador / programador)

Aquí están los enfoques que he visto hasta ahora:

1. Cargue la imagen a tamaño completo y haga que el navegador la reduzca para adaptarse al diseño. Defina el ancho máximo de la imagen como 100% y reduzca su tamaño según el ancho de su contenedor.

Pros: requiere casi ningún esfuerzo para implementar, compatible con varios navegadores y compatible con navegadores antiguos.

Contras: a menudo descarga más datos de los necesarios y luego gasta ciclos de CPU en el cliente reduciéndolo (lento). Puede terminar con imágenes de muy baja calidad dependiendo del algoritmo de escala del navegador. No hay posibilidad de dirección artística y no se puede adaptar la imagen para pantallas tipo retina.

2. Use consultas de medios para leer las propiedades del cliente y obtener una de varias imágenes personalizadas para diferentes puntos de interrupción en su diseño. (La propuesta de extensión de imágenes sensibles a HTML y las etiquetas de atributo srcset están trabajando para incorporar este enfoque a la especificación HTML).

Pros: Descarga más rápida en dispositivos móviles. Puede manejar pantallas tipo retina. Calidad de imagen mejorada ya que las imágenes se procesaron con suerte utilizando algún método de alta calidad. La dirección artística se hace posible.

Contras: Alguien tiene que pasar tiempo procesando, recortando y gestionando múltiples versiones de la misma imagen. Más codificación: ahora debe deletrear cada versión de la imagen de alguna manera y crear consultas de medios para todos los diseños deseados. Repita lo anterior para cada imagen que sirva. Solo funcionará para navegadores que admitan CSS3 Media Queries o las nuevas etiquetas.

3. Realice el backend Optimice las imágenes para cualquier pantalla o diseño utilizando una sola imagen de origen sobre la marcha. En mi opinión, esto es equivalente a tratar las imágenes receptivas como una tarea de negociación de contenido muy similar a HTTP.

Pros: Designer no tiene que perder tiempo procesando imágenes y administrando múltiples versiones. La imagen de tamaño más óptimo se envía cada vez. Puede manejar pantallas de tipo retina y ajustarse dinámicamente para la dirección artística (aunque con un poco de esfuerzo adicional, debe saber dónde enfocarse). No se requiere marcado especial o adicional (advertencia a continuación). Compatible con navegadores cruzados y funcionará para navegadores antiguos.

Contras: tiene que capturar y transmitir información sobre el navegador del cliente y las propiedades de la pantalla. La primera vez que se carga una imagen puede ser más lenta que en cualquier otro enfoque, ya que la imagen debe procesarse (generalmente se almacena en caché para solicitudes posteriores).