Acerca de la biblioteca de imágenes adaptables about-responsive-image-library
La biblioteca de imágenes adaptables es un módulo JavaScript que ajusta dinámicamente la calidad de las imágenes proporcionadas desde Dynamic Media e incrustadas en páginas web adaptables. Además, proporciona una calidad de imagen mejorada en dispositivos con pantallas de alta densidad. La biblioteca también puede procesar de forma interactiva los resultados de Recorte inteligente y Muestra inteligente.
URL de demostración section-4f72c1dc38bf4e03acfa5205733a05a5
El caso de uso más sencillo de la biblioteca de imágenes adaptables es definir una lista de valores de punto de interrupción para el ancho de la imagen. Esta lista garantiza que la representación adecuada se cargue y se muestre cuando se cambie el tamaño de una imagen debido a los cambios en el diseño de la página web producidos por un usuario que cambia el tamaño de la ventana del explorador o la orientación del dispositivo. La biblioteca monitoriza continuamente el tamaño de la imagen en pantalla y, cada vez que se alcanza un nuevo ancho de punto de interrupción, obtiene una nueva representación de imagen de Dynamic Media.
El siguiente es un ejemplo sencillo en el que la imagen adaptable se encuentra dentro de un contenedor que ocupa el 50 % del ancho de la página web. Cada vez que se cambia el tamaño de la ventana del explorador, cambia la anchura del contenedor. Cuando el ancho de la imagen alcanza uno de los puntos de interrupción configurados (que se establecen en 200, 400, 600 y 800 píxeles para fines ilustrativos), se descarga y muestra una nueva representación. El objetivo es evitar la carga de imágenes de gran tamaño innecesarias y ahorrar ancho de banda de la red.
Haga clic en la dirección URL para abrir la página web, cambiar el tamaño de la ventana del explorador y supervisar el tráfico de red.
El siguiente ejemplo de Bootstrap ilustra el mismo caso de uso en una página web. Según Bootstrap CSS, la celda de diseño a la que se agrega la imagen adaptable puede tener una de las siguientes anchuras: 360, 720 y 940 píxeles. Estos valores son exactamente lo que se pasa como puntos de interrupción a la biblioteca de imágenes adaptables. De este modo, Dynamic Media garantiza que el ancho de banda de la red del cliente se utilice con eficacia. Además, también garantiza que la imagen se muestre en el tamaño exacto necesario, dado el diseño actual de la página web, sin que ningún artefacto visual escale el explorador del lado del cliente.
Haga clic en la dirección URL para abrir la página web, cambiar el tamaño de la ventana del explorador para alcanzar diferentes puntos de interrupción del diseño y supervisar el tráfico de red.
Los casos de uso más avanzados incluyen la asociación de diferentes ajustes preestablecidos de imagen, comandos del servicio de imágenes o ambos con valores de punto de interrupción diferentes.
En el siguiente ejemplo, se utilizan ajustes preestablecidos de imagen de diferente calidad y formato para diferentes tamaños de punto de interrupción. Para un pequeño punto de interrupción, se aplica un ajuste preestablecido de baja calidad que obliga al servicio de imágenes a devolver la imagen del GIF comprimida solo a seis colores. Un punto de interrupción medio utiliza un ajuste preestablecido de imagen configurado para un JPEG con compresión alta. El punto de interrupción más grande está asociado a un ajuste preestablecido de imagen de alta calidad que utiliza PNG sin pérdidas. Este método garantiza la entrega de imágenes de alta calidad a dichos dispositivos, partiendo del supuesto de que los dispositivos con pantallas más grandes tienen un mayor ancho de banda y potencia de procesamiento.
Haga clic en la dirección URL para abrir la página web, cambiar el tamaño de la ventana del explorador web de mayor a menor y observar cómo se degrada la calidad de la imagen.
Además de los ajustes preestablecidos de imagen, es posible asociar comandos específicos del servicio de imágenes con puntos de interrupción. El siguiente ejemplo muestra cómo es posible recortar gradualmente la imagen del titular a la región de interés a medida que el tamaño de la imagen en pantalla se reduce. En este caso, el punto de interrupción más grande no tiene ningún comando de servicio de imágenes, por lo que la imagen del titular es totalmente visible. En el punto de interrupción medio se aplica un recorte moderado, por lo que solo es visible el ejecutor con el texto "En ejecución". En un pequeño punto de interrupción, se aplica más recorte para que solo se muestre el producto.
Haga clic en la dirección URL para abrir la página web y cambiar el tamaño de la ventana del explorador. Observe cómo la imagen se recorta gradualmente a medida que pasa de un tamaño mayor a uno más pequeño.
Requisitos del sistema section-35ea9e9c79cc43d7bcefdc240340fba4
Hardware y software de servidor
- Dynamic Media Image Serving 6.0.1 o posterior.
Requisitos mínimos del explorador del cliente
- Microsoft® Windows® 7 o posterior; macOS X 10.8 o posterior.
- Firefox 23, Safari 6, Chrome 29, IE 9 o posterior.
- iOS 6 o posterior.
- Certificado en iPhone3GS o posterior y iPad2 o posterior (solo exploradores nativos).
- Android™ OS 2.3 o posterior.
- Internet Explorer en dispositivos móviles no es compatible actualmente.