Cutting Edge

Manipulação de imagem eficaz nos sites da Web responsivos

Dino Esposito

Responsive Web design (RWD) - criar uma experiência da Web única através de um layout da Web fluido e adaptável é sem dúvida um daqueles marcos que mudarão o fluxo das coisas no mundo real.

Como um desenvolvedor da Web, você deve estar pronto para conviver lado-a-lado com um determinado fato e seu oposto exato. Por um lado, o RWD é um padrão de fato. Está se tornando um objeto indispensável para todos os sites. Por outro lado, o RWD ainda é uma metodologia em andamento, com as melhores práticas ainda sendo definidas e redefinidas. Neste artigo, eu viso proporcionar uma visão rápida do estado do RWD, enfocando nos aspectos mais fundamentais: desempenho geral e, em particular, a manipulação de imagem.

Desempenho RWD

O objetivo principal do RWD é tornar o conteúdo fácil e agradável para consumir em dispositivos, independente do tamanho e forma. Até aqui, tudo bem, mas como você faz isso?

O RWD requer uma abordagem bastante diferente para a aprovação do projeto e desenvolvimento. O ponto de verificação visual canônico quando seus clientes olham para modelos estáticos e lhes dá luz verde é um passo muito menos definido. Em vez de modelos estáticos, é provável que você apresente modelos delineados. No geral, um site responsivo é fácil de vender aos clientes, mas é um desafio explicar por que, em última análise, acaba sendo mais caro do que ter um site não responsivo clássico.

Alguns anos de experiência ajudou a consolidar algumas práticas e algumas estruturas, como o Twitter Bootstrap surgiu para ajudar na implementação de site responsivo. Mas e quanto ao desempenho?

O desempenho é atualmente o ponto delicado do RWD. Um site responsivo funciona perfeitamente quando visto através de navegadores de desktop poderosos. Seu desempenho, no entanto, tende a degradar quando consumidos através de dispositivos menores, como smartphones. O RWD não é eficaz da mesma forma para qualquer tipo de site da Web. Um portal de notícias e vídeos é mais fácil de remodelar para tornar os conteúdos utilizáveis em telas menores do que um site que tem um monte de formas e exige interação, como um site de reserva de viagem. Nesse último caso, o tamanho da tela é o fator mais importante.

A questão principal para pedir por um potencial cliente antes de iniciar uma implementação RWD é o quanto sua empresa se preocupa com as capacidades dos vários dispositivos. Se os dispositivos servem a um propósito de negócios, como a procura ou a compra de produtos ou serviços, então você não pode apenas diferenciar conteúdo com base na largura e orientação da tela plana. Uma janela de navegador de desktop redimensionada e um smartphone podem ser capazes de exibir o conteúdo usando o mesmo layout, mas eles executam em hardware diferente e têm muitas capacidades de computação diferentes. Se a empresa se preocupa com a escolha de dispositivos, essas diferenças devem ser levadas em consideração antes de tomar qualquer decisão.

A metáfora de um site

A metáfora de “um site” é a base do RWD: Existe um conjunto único de páginas de conteúdo, uma lógica de back-end, uma URL e uma marca. Existem duas formas que você pode abordar esse tipo de desenvolvimento do site RWD. Para cada exibição e independente do dispositivo, você serve a mesma marcação HTML e torna um monte de arquivos CSS diferentes disponíveis para o dispositivo. Cada arquivo CSS está vinculado a uma expressão de consulta de mídia que o navegador avalia no tempo de execução quando o tamanho da janela muda. O CSS aplicado pode mudar em tempo real, o que muda a aparência do conteúdo. Essa abordagem se baseia extensivamente nas consultas de mídia CSS3, um padrão World Wide Web Consortium (W3C) definido em bit.ly/1oVBf89. Veja como você definiria dois arquivos CSS a ser aplicados em dois diferentes tamanhos de tela:

<link type="text/css"
  rel="stylesheet"
  href="view480.css"
  media="only screen and (max-width: 480px)">
<link type="text/css"
  rel="stylesheet"
  href="view800.css"
  media="only screen and (max-width: 800px)">

A outra opção para o desenvolvimento de sites responsivos envolve o uso de Consultas de Mídia CSS3 com código JavaScript para remodelar adequadamente o Document Object Model (DOM). Essa abordagem é mais poderosa, porque dá mais controle sobre o layout. Ela também adiciona a oportunidade de baixar conteúdo específico extra para o tamanho da tela. Para detectar mudanças do tamanho da tela, você pode usar o evento de redimensionamento da janela ou o evento matchMedia. O evento matchMedia é uma implementação JavaScript de consultas de mídia. Quando o navegador detecta uma mudança na consulta de mídia especificada, ele dispara uma chamada para o seu código:

if (window.matchMedia) {
  mq800px = window.matchMedia("(min-width: 800px)"),
  mqPortr = window.matchMedia("(orientation: portrait)");
  mq800px.addListener(mq800px_handler);
  mqPortr.addListener(mqPortr_handler);
}

Quando o navegador detecta uma orientação retrato ou uma largura mínima de 800 pixels, o código invocará seus manipuladores. Você pode usar as consultas de mídia do JavaScript e do CSS dentro do mesmo site. Elas se aplicam à exibições ou páginas HTML individuais.

Assim, o padrão principal por trás do RWD é um conjunto de conteúdos com várias exibições, seja remodelar esse uso de CSS, seja algum ad hoc do JavaScript. Se você pegar a rota do CSS, você está sujeito ao que você pode fazer com CSS em uma página da Web. Você pode mover e reposicionar elementos, pode refluir conteúdo dentro de contêiners de tamanhos diferentes e flutuar blocos de conteúdo na horizontal ou na vertical. Você também pode simplesmente ocultar o conteúdo indesejado.

Com JavaScript, você pode fazer tudo isso e mais um pouco. É possível fazer alterações mais sofisticadas no layout de exibição, criar sub-árvores de DOM a partir do zero ou fazer download de novos conteúdos a partir de pontos de extremidade remotos. Com CSS, o DOM é o maior possível. Com JavaScript, ele só pode crescer até o limite de se tornar o maior possível que foi projetado.

O tamanho das soluções RWD não é um problema ao visualizar sites em navegadores de desktop. Pode até não ser um problema na maioria dos tablets. Aqueles tendem a ser poderosos o suficiente para rodar em qualquer JavaScript exigido e muitas vezes são usados através de uma conexão Wi-Fi sólida. O problema é ter sites de RWD em smartphones com conexão 3G. Nesses casos, não é tanto a quantidade de marcação e código JavaScript, são os eventos relacionados e seu impacto na segmentação que atola as coisas. O aspecto mais doloroso do RWD são as imagens.

Manipulação de imagens

O elemento img antigo faz referência das imagens. Eles são totalmente baixados e exibidos conforme especificado por atributos de largura e altura. Se você precisar de uma imagem de fundo grande para um desktop ou várias imagens grandes para um carrossel, não poderá simplesmente usar CSS para ajustar a largura e a altura. Isso não teria nenhum impacto sobre o tamanho do download. Ocultar imagens através do CSS não ajuda porque a imagem é baixada de qualquer maneira.

Existem alguns truques que você pode aplicar enquanto espera por um novo elemento HTML estar disponível. No entanto, um novo elemento HTML é um maneira generalizada em termos de suporte ao navegador. Existem algumas experiências acontecendo, mas elas não são para o horário nobre ainda. A direção parece ter um elemento cuja estrutura pisca na estrutura HTML5 do elemento de vídeo, conforme a seguir:

<picture>
  <source media="(min-width: 400px)" srcset="foo-sm.jpg, foo-sm-2x.jpg 2x">
  <source media="(min-width: 800px)" srcset="foo-md.jpg, foo-md-2x.jpg 2x">
  <img src="foo.jpg">
</picture>

Ao utilizar imagem em vez de img, você fornece uma variedade de opções para a mesma imagem lógica. Você fornece um conjunto de imagens para cada cenário de consulta de mídia e é possível fornecer várias imagens para analisar as diferentes densidades de pixels dentro de cada um dos cenários. Nesse exemplo, quando a largura da tela é de pelo menos 800 pixels, o navegador pode escolher uma imagem regular com um tamanho adequado ou uma cópia maior feita sob medida para uma densidade maior ou até mesmo para satisfazer os requisitos de direção de arte e oferecer uma imagem diferente ou um corte da imagem original, quando uma determinada consulta de mídia entra em ação. O elemento img incorporado indica o fallback e é logicamente equivalente ao que está em uso hoje. Você pode experimentar com esta abordagem utilizando o polyfill do JavaScript encontrado em bit.ly/1aVEoxb.

Outra abordagem é usar a lógica do lado do servidor como um manipulador de HTTP. O manipulador receberá a solicitação e decidirá qual é imagem para baixar. Francamente, essa abordagem pode ser um desafio. A lógica do lado do servidor precisa de algumas pistas para selecionar a imagem mais adequada. Essas pistas só podem vir a partir do navegador e devem ser colocadas na solicitação HTTP, seja com uma cadeia de caracteres de consulta, seja com cabeçalhos. Isso requer algum trabalho de script para ser feito quando as imagens são baixadas após o carregamento da página. Isso é viável, mas complicado.

Enquanto espera para o elemento da imagem, tamanho da imagem e outros aspectos da especificação RWD para se tornar padrão e disponível em todos os navegadores (apenas Chrome e Opera atualmente fornecem algum suporte), pare e reflita sobre o problema exato que você está tentando resolver.

Enquanto o usuário estiver em um navegador de desktop, o tamanho da imagem não é grande coisa. Basta apontar img para maior. Se a janela do navegador é redimensionada, a mesma imagem grande é redimensionada. Nesse ponto, já não existe um impacto no desempenho. Você quer mudar uma imagem em janelas menores para se concentrar em aspectos particulares. Nesse caso, um truque poderia ser fazer referência da imagem como fundo de um conjunto div através do CSS em vez de um elemento img simples. A vantagem é que as consultas de mídia selecionarão apenas a imagem que você quer. Você pode obter várias imagens baixadas no desktop, mas isso poderia ser um ponto insignificante. Pode haver outros problemas com as imagens de fundo se os usuários tentarem imprimir a página.

Usar as imagens de fundo ajuda quando o site RWD aparece nos dispositivos móveis. As imagens são garantidas do tamanho adequado. De qualquer forma, você precisa resolver o uso de imagens em RWD quando planejar ver o site em dispositivos que não o desktop.

Como você detecta qual tipo de dispositivo está sendo usado? Detectar dispositivos não é um pecado mortal. No entanto, detectar dispositivos com segurança é difícil e pode ser uma bagunça se você fizer isso sozinho. Você pode usar um plugin Modernizr popular para algumas formas de detecção do dispositivo do lado do cliente (bit.ly/1tfJhtf). Dessa forma, você pode modificar de forma programática o DOM para tentar obter imagens ad hoc. Essa abordagem é razoável, mas não se adapta com o número de dispositivos e pode se tornar insegura em algum ponto. A detecção do dispositivo é um assunto sério e requer especialização.

Alguns aspectos da imagem WURFL sob medida

Uma nova abordagem interessante para manipulação de imagens é o componente sob medida da Imagem (WIT) do Arquivo de Recurso Universal sem fio (WURFL). Suportado pelo mecanismo WURFL completo - o mesmo mecanismo de detecção de dispositivo usado pelo Facebook - o WIT realiza uma análise do servidor rápida do agente do usuário. Ele determina o fator de forma do dispositivo que solicita e serve uma versão redimensionada da imagem original. WIT é um serviço gratuito que requer apenas uma correção da URL da imagem:

<img src="//wit.wurfl.io/[full-url-to-your-image]">

Você anexa a URL da imagem completa para a URL do site WIT para que você possa baixar a imagem a partir do site original, redimensionar a imagem e devolver pixels para o site solicitante. As imagens são armazenadas em cache no WIT final. Isso mantém o número de solicitações para o mínimo necessário. Um grupo de parâmetros suportados permite controlar aspectos do redimensionamento como corte, dimensões e formato devolvido.

O WIT tem prós e contras. No lado positivo, ele alivia o fardo ao lidar com várias versões da mesma imagem. Tudo que requer é uma versão ligeiramente modificada da URL no elemento de imagem antiga plana. Além disso, você pode começar a usá-lo em questão de segundos.

No lado negativo, ele age como um proxy e não dirige especificamente cenários onde você também se preocupa com a densidade de pixels e não apenas com o tamanho. Em qualquer caso, não há nenhuma razão para não lhe dar uma chance. Você o encontrará em wurfl.io/#wit.

A manipulação da paisagem de imagens dentro do contexto de RWD é fluida. Alguns compromissos entre RWD e dispositivos terão de estar próximos para garantir que as coisas funcionem de forma eficaz em toda parte.

---

Dino Esposito é o co-autor de “Microsoft .NET: Architecting Applications for the Enterprise” (Microsoft Press, 2014) e “Programming ASP.NET MVC 5” (Microsoft Press, 2014). Um evangelista técnico para as plataformas Microsoft .NET Framework e Android na JetBrains e palestrante frequente em eventos do setor em todo mundo, Esposito compartilha sua visão do software em software2cents.wordpress.com e no Twitter em twitter.com/despos.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Jon Arne Saeteras