Enquanto os dispositivos móveis e tábua À medida que finalmente dominam o mundo, a tecnologia da web está na corrida para acomodar o número cada vez maior de telas. No entanto, conceber ferramentas para acompanhar este fenômeno nos traz uma nova série de problemas, com uma das últimas palavras a surgir: “Responsivo na web” . Esse é o desafio de fazer a web funcionar na maioria dos dispositivos, senão em todos, sem diminuir a qualidade da experiência do usuário. Em vez de projetar um conteúdo que caiba em um desktop ou laptop, as informações devem estar disponíveis para celulares, tablets ou qualquer superfície conectada à web. No entanto, esta evolução do web design responsivo Provou-se difícil e às vezes doloroso.

Embora possa ser quase trivial acomodar informações textuais, a parte complicada surge quando consideramos conteúdo como imagens responsivas, infográficos, vídeos e assim por diante, que já foi projetado com computadores desktop em mente. Isso não só levanta a questão de ser capaz de exibir o conteúdo corretamente, mas também de como o próprio conteúdo é consumido em diferentes dispositivos. Os usuários de smartphones são diferentes dos usuários de computadores desktop. Coisas como planos de dados e velocidade de processamento devem ser lembrados. O Google começou a destacar sites que são otimizados para celular nos resultados de pesquisa, com algumas especulações se isso levará a um aumento substancial no ranking desses sites. As soluções anteriores focavam nisso lançando subdomínios que eram apenas móveis (e redirecionados), mas isso aumentou a complexidade e rapidamente se tornou desatualizado. (Nem todos os sites têm a capacidade de pagar esta rota).

Na pesquisa responsiva de imagens para a web

Nesse ponto, os desenvolvedores e designers podem garantir que o carregamento de seu site seja otimizado para usuários que estão em sites móveis. Mais de 20% do tráfego da web agora vem de usuários móveis e o número está crescendo. Com as imagens ocupando os maiores blocos de conteúdo de dados, o dimensionamento se tornou uma prioridade, incluindo soluções do lado do servidor e front-end. Para discutir essas soluções de correção de redimensionamento, primeiro precisamos entender as deficiências atuais de vincular imagens.

O tem apenas o atributo source vinculado diretamente à própria imagem. Você não tem como determinar o tipo correto de imagem necessária sem quaisquer acréscimos.

Não podemos colocar todos os tamanhos de imagem incluídos no HTML e usar regras CSS para colocar display:none para tudo, menos para a imagem correta? Essa é a solução mais lógica em um mundo lógico perfeito. Mas, dessa forma, os navegadores podem ignorar todas as imagens não expostas e, teoricamente, não baixá-las. No entanto, os navegadores são otimizados além da lógica comum. Para tornar a página renderizada o mais rápido possível, o navegador visualiza o conteúdo vinculado, mesmo antes que as folhas de estilo e os arquivos JavaScript sejam totalmente carregados. Em vez de ignorar as grandes imagens destinadas a Área de Trabalho , acabamos baixando todas as imagens, resultando em uma página muito maior para carregar. A técnica somente CSS funciona apenas para imagens que são planejadas como fundos porque podem ser definidas em folhas de estilo (usando consultas de mídia )

Então, o que um site deve fazer?

Soluções de back-end para escalabilidade de imagem

Exceto para sites / subdomínios somente para celular, continuamos farejando o user-agent (UA) e o usamos para fornecer o tamanho correto de imagens ao usuário. No entanto, qualquer desenvolvedor pode testemunhar o quão não confiável essa solução pode ser. Novos tópicos do UA aparecem o tempo todo, tornando cansativo manter e atualizar uma lista abrangente. E, é claro, isso nem leva em consideração o quão pouco confiável e fácil de contornar os tópicos do UA são para começar.

Imagens personalizáveis

No entanto, vale a pena considerar algumas soluções de servidor secundário. Imagens personalizáveis é uma ótima solução para aquelas matrizes de imagens responsivas preferenciais de back-end. Não requer nenhum marcação especial, mas por outro lado, ele usa um pequeno arquivo JavaScript e faz a maior parte do trabalho pesado em seu arquivo de back-end. Ele usa PHP e um servidor nginx configurado. Também não depende de nenhum rastreamento de UA e, em vez disso, verifica a largura da tela. Imagens adaptativas funcionam bem para dimensionar imagens, mas também são úteis quando imagens grandes precisam direção da arte Por exemplo, redução de imagem por técnicas como corte e rotação, não apenas dimensionamento.

Toque Sencha

Sencha Touch é outra solução de back-end para imagens de design responsivas, embora seja melhor chamada de solução terceirizada. O Sencha Touch redimensionará a imagem de acordo ao rastrear o UA. Abaixo, um exemplo básico de como esse serviço funciona:

Também existe a opção de especificar tamanhos, caso não desejemos que o Sencha altere seu tamanho automaticamente. No final do dia, as soluções de servidor secundário (e terceirizadas) exigirão recursos para processar a solicitação antes de enviar a imagem correta de volta. Isso leva um tempo precioso e, portanto, retarda a jornada de solicitação-resposta. Uma solução melhor seria se o próprio dispositivo determinasse qual recurso solicitar diretamente e o servidor respondesse corretamente.

Soluções de front-end

Recentemente, houve grandes melhorias no lado do navegador para resolver problemas de imagem responsiva.

O elemento foi introduzido e aprovado nas especificações HTML5 pelo W3C. No momento, não está disponível em todos os navegadores, mas não demorará muito para que isso aconteça. Até então, contamos com polyfills Javascript para o elemento. Polyfills também são uma ótima solução para navegadores legados que não possuem esse elemento.

Também é o caso de atributo srcset atributo que está disponível para vários WebKits baseados em navegador para o elemento . Isso pode ser usado sem qualquer JavaScript e é uma ótima solução se os navegadores que não são webKit forem ignorados. É um bom recurso temporário para os raros casos em que outras soluções não são suficientes, mas não deve ser considerado uma solução abrangente.

Picturefill

Picturefill é uma livraria polyfill para o elemento. É uma das bibliotecas mais populares no grupo de soluções de front-end para escalabilidade de imagem e problemas relacionados. Existem duas versões; Picturefill v1 simula o elemento usando span enquanto o Picturefill v2 usa o elemento entre os navegadores que já o possuem e fornece polyfill para os legados, (por exemplo, para IE> = IE9). Tem algum limitações e interferências , principalmente para Android 2.3 - que, aliás, é um exemplo de como o img srcset vem ao resgate. Aqui está uma amostra do marcação para usar o Picturefill v2:

Para melhorar o desempenho para usuários com planos de dados limitados, o Picturefill pode ser combinado com carregamento lento . No entanto, a biblioteca pode oferecer suporte de navegador mais amplo e lidar com casos estranhos em vez de depender de patches.

Imager.js

Imager.js é uma biblioteca criada pela equipe de BBC Notícias para conseguir que as imagens responsivas tivessem uma abordagem diferente da usada no Picturefill. Ao tentar trazer o item para navegadores não suportados, Imager.js concentra-se em baixar apenas as imagens apropriadas enquanto observa as velocidades da rede. Ele também incorpora carregamento lento sem depender de bibliotecas terceirizadas. Funciona colocando elementos de placeholder e substitua-os por elementos . O código mostrado abaixo exibe este comportamento:

new Imager({ availableWidths: [480, 768, 1200] });

O HTML renderizado terá a seguinte aparência:

new Imager({ availableWidths: [480, 768, 1200] });

O suporte do navegador é muito melhor do que o Picturefill ao custo de ser uma solução mais pragmática do que progressiva.

Source Shuffling

Source Shuffling aborda este problema de um ângulo ligeiramente diferente do resto das bibliotecas front-end. Parece algo saído do pensamento da escola “móvel primeiro”, onde serve a menor resolução possível por padrão. Ao detectar qual dispositivo tem a tela maior, ele muda a fonte da imagem para uma maior. Parece mais um hackear e menos como uma livraria totalmente crescida. Esta é uma ótima solução principalmente para sites móveis, mas significa que o download duplo de recursos para desktops e / ou tablets é inevitável.

Outras bibliotecas JavaScript notáveis ​​são:

• HiSRC - Um plugin jQuery para imagens responsivas. Confiar no jQuery pode ser um problema.

• Mobify.js - Uma biblioteca geral para conteúdo responsivo, incluindo imagens, folhas de estilo e até JavaScript. 'Capture' o dOM antes do carregamento do recurso. Mobify é uma biblioteca poderosa e abrangente, mas pode ser um exagero se o objetivo for apenas ter imagens responsivas.

Em resumo

No final do dia, cabe ao desenvolvedor decidir qual abordagem usar no web design responsivo de imagens para sua base de usuários. Isso significa que a coleta e o teste de dados lhe darão uma ideia melhor de qual abordagem usar.

Para resumir, pode ser útil considerar a lista de perguntas abaixo antes de decidir sobre a solução apropriada para imagens responsivas.

• Os navegadores legados são um problema? Se não forem, considere o uso de uma aproximação mais moderna (por exemplo, Picturefill, attribute srcset).

• O tempo de resposta é crítico? Se não for, opte por uma solução de back-end ou terceirizada.

• As soluções devem ser internas? As opções terceirizadas estão obviamente fora de questão.

• Há muitas imagens no site tentando fazer a transição para imagens responsivas? Existem preocupações sobre a validação ou rótulos semânticos (ou rótulos não semânticos)? Isso exigirá uma solução de back-end para orientar as solicitações de imagem para algo como Imagens Adaptáveis.

• A direção de arte é um problema (especificamente para imagens grandes com muitas informações)? Uma biblioteca como a Picturefill pode ser uma solução melhor para esse cenário. Além disso, qualquer uma das soluções de back-end também pode funcionar.

• Há alguma preocupação com o JavaScript? Qualquer solução de front-end estará fora de questão, deixando opções como back-end ou terceirizado que dependem do rastreamento UA.

• Existe uma prioridade para tempos de resposta em dispositivos móveis em relação aos tempos de resposta em computadores? Uma biblioteca como o Source Shuffling deve ser a mais apropriada para esse caso.

• É necessário fornecer um comportamento responsivo a todos os aspectos do site, não apenas às imagens? Mobify poderia funcionar melhor.

• O mundo perfeito foi alcançado? Portanto, use apenas a aproximação CSS display:none!