Sobre a biblioteca de imagens responsiva about-responsive-image-library
A Biblioteca de imagens responsiva é um módulo do JavaScript que ajusta dinamicamente a qualidade de imagens veiculadas no Dynamic Media e incorporadas em páginas da Web responsivas. Além disso, oferece qualidade de imagem aprimorada em dispositivos com telas de alta densidade. A biblioteca também pode renderizar com agilidade os resultados do Recorte inteligente e do Recorte inteligente.
URLs de demonstração section-4f72c1dc38bf4e03acfa5205733a05a5
O caso de uso mais simples da Biblioteca de imagens responsiva é definir uma lista de valores de pontos de interrupção para a largura da imagem. Essa lista garante que a representação apropriada seja carregada e exibida quando uma imagem for redimensionada devido a alterações no layout da página da Web feitas por um usuário ao redimensionar a janela do navegador ou alterar a orientação do dispositivo. A biblioteca monitora continuamente o tamanho da imagem na tela e, sempre que uma nova largura de ponto de interrupção é atingida, ela obtém uma nova representação de imagem da Dynamic Media.
Este é um exemplo simples onde a imagem responsiva está dentro de um container que ocupa 50% da largura da página da Web. Toda vez que a janela do navegador é redimensionada, a largura do contêiner muda. Quando a largura da imagem atinge um dos pontos de interrupção configurados, que são definidos como 200, 400, 600 e 800 pixels para fins ilustrativos, uma nova representação é baixada e exibida. O objetivo é evitar o carregamento de imagens grandes desnecessárias e economizar largura de banda na rede.
Clique no URL para abrir a página da Web, redimensionar a janela do navegador e monitorar o tráfego de rede.
O exemplo de Bootstrap a seguir ilustra o mesmo caso de uso em uma página da Web. De acordo com o Bootstrap CSS, a célula de layout à qual a imagem responsiva é adicionada pode ter uma das seguintes larguras: 360, 720 e 940 pixels. Esses valores são exatamente os que são passados como pontos de interrupção para a Biblioteca de imagens responsiva. Dessa forma, a Dynamic Media garante que a largura de banda da rede do cliente seja usada com eficiência. Além disso, também garante que a imagem seja exibida no tamanho exato necessário, considerando o layout da página da Web atual, sem que nenhum artefato visual seja dimensionado no navegador do lado do cliente.
Clique no URL para abrir a página da Web, redimensione a janela do navegador para obter diferentes pontos de interrupção de layout e monitorar o tráfego de rede.
Casos de uso mais avançados incluem a associação de diferentes Predefinições de imagem, comandos do Servidor de imagens, ou ambos, a diferentes valores de ponto de interrupção.
Neste próximo exemplo, são usadas Predefinições de imagem de qualidade e formato de imagem diferentes para tamanhos de pontos de interrupção diferentes. Para um ponto de interrupção pequeno, uma predefinição de baixa qualidade é aplicada, o que força o Servidor de imagens a retornar a imagem de GIF compactada somente para seis cores. Um ponto de interrupção médio está usando uma Predefinição de imagem configurada para JPEG com alta compactação. O maior ponto de interrupção está associado a uma predefinição de imagem de alta qualidade usando PNG sem perdas. Esse método garante que imagens de alta qualidade sejam entregues a esses dispositivos, com base no pressuposto de que dispositivos com telas maiores têm maior largura de banda e poder de processamento.
Clique no URL para abrir a página da Web, redimensione a janela do navegador da Web de maior para menor e observe como a qualidade da imagem diminui.
Além das Predefinições de imagem, é possível associar comandos específicos do Servidor de imagens a pontos de interrupção. O exemplo a seguir mostra como é possível cortar gradualmente a imagem do banner na região de interesse à medida que o tamanho da imagem na tela se torna menor. Aqui, o maior ponto de interrupção não tem comandos do Servidor de imagens, portanto, a imagem do banner é totalmente visível. No ponto de interrupção médio aplica corte moderado, tornando visível apenas o executor com o texto "Em execução". Em um ponto de interrupção pequeno, mais cortes são aplicados para que somente o produto seja exibido.
Clique no URL para abrir a página da Web e redimensionar a janela do navegador. Observe como a imagem corta gradualmente à medida que passa de um tamanho maior para um menor.
Requisitos do sistema section-35ea9e9c79cc43d7bcefdc240340fba4
Hardware e software do servidor
- Dynamic Media Image Serving 6.0.1 ou posterior.
Requisitos mínimos do navegador do cliente
- Microsoft® Windows® 7 ou posterior; macOS X 10.8 ou posterior.
- Firefox 23, Safari 6, Chrome 29, IE 9 ou posterior.
- iOS 6 ou posterior.
- Certificado no iPhone3GS ou posterior e iPad2 ou posterior (somente navegadores nativos).
- Android™ OS 2.3 ou posterior.
- O Internet Explorer em dispositivos móveis não é compatível no momento.