<
Menu

Tableless


featured-image3

Sobre organizar informação

experiencia

Experiência deve ter começo, meio e fim

webintents

WebIntents – Framework para WebApps

feature4

Favicons


Imagem post: Qualidade de Imagens e densidade de pixels

Qualidade de Imagens e densidade de pixels

Entenda melhor sobre densidade de pixels em aparelhos como o iPhone 4 e outros dispositivos que carregam Android.

Você se lembra quando planejavamos nossos layouts para resoluções acima de 1024? Chega ser engraçado lembrar que um dia fizemos websites para 640×480, pensando que a resolução de 1024×768 eram a minoria dos usuários. Os tempos mudaram e naturalmente diversas outras resoluções apareceram por conta de novos dispositivos, melhores monitores e etc. Acontece que na web nada é tão fácil assim. A gente se livra de um problema, mas aparece outro no lugar.

Este ano eu estou trabalhando a maior parte do tempo em um monitor fullHD. Notei uma diferença gritante ao digitar código pela primeira vez em um monitor desses. E não são apenas os monitores que estão mudando para uma resolução decente. Também, seguindo o ciclo natural, dispositivos menores estão recebendo a dádiva de ter a alta resolução em suas telas. E isso, meu caro, é uma dádiva para o usuário, para você é mais trabalho. ;-)

Pixels não são mais como eram antigamente

Na minha época de escola – nem tanto tempo assim – os professores me ensinaram que o átomo era indivisível. Era incrível por que eu, como criança, me divertia tentando entender como algo poderia ser tão pequeno que não pudesse ser partido ao meio, ficando menor… Mas aí eu descobri que os prótons, os elentrons e outras partículas subatomicas existiam também…

A mesma coisa aconteceu com o pixel. O pixel sempre representou a menor unidade da sua tela. Para os designers, o pixel é a unidade central. É onde tudo se baseia: medidas, tamanhos, alinhamentos etc… Mas o pixel não é mais como era antigamente.

Com o advento das telas HD em aparelhos móveis, o conceito de pixel mudou um pouco muito. Quando a tela retina display do iPhone 4 foi lançada o queixo de todo mundo caiu. A Apple conseguiu apertar quatro pixels onde apenas caberia um. Logo o pixel pode ser definido como a menor unidade na tela, como você já conhece ou pode ser baseada em uma unidade chamada hoje em dia de “pixel referência” ou do inglês reference pixel: que significa que esse novo “pixel” é uma referência ótica de unidade.

Para entrar em detalhes, leia o que é um pixel. Vai te ajudar a entender melhor.

Densidade de pixels

A sigla PPI (que é diferente de DPI) significa Pixel Per Inch, ou seja, é o número de pixels que seu dispositivo pode conter em uma polegada. Quanto mais pixels em uma polegada, mais nítida a imagem é.

Os aparelhos como o iPhone 4 e outros que carregam Android tem uma densidade de pixels muito alta. Ou seja, eles conseguem comprimir um grande número de pixels em suas telas, tornando as imagens melhores. O problema é que as imagens que criamos hoje podem parecer ruins nesses dispositivos. Algo parecido como aumentar uma imagem pequena no Photoshop, entende? Ela fica toda pixelada, sem qualidade nenhuma. Isso por que você está aumentando o tamanho de uma imagem que é pequena e não tem pixels suficientes para dividir pelo tamanho que você definiu.

Entenda fazendo um teste: Vá até o site da Apple utilizando SAFARI. Agora, dê um zoom em alguma imagem. Veja como ela parece pixelada por causa do zoom. Agora abra o Inspector do seu navegador, vá até o console e coloque as duas linhas abaixo:

[cc lang="javascript"]
AC.ImageReplacer._devicePixelRatio = 2
new AC.ImageReplacer()
[/cc]

A imagem foi trocada para uma imagem com o dobro de tamanho da imagem original para que ela ficasse melhor em telas com alta densidade de pixels… Veja a diferença. Eu vi esse truque aqui.

Ações para otimizar

Existem algumas atitudes que vocês já pode tomar agora para poder chavear estes aparelhos e entregar uma experiência melhor para seus usuários.

Utilize media queries

Media Queries são um chuchuzinho. Você pode utilizar uma regra chamada device-pixel-ratio para detectar qual CSS servir dependendo do pixel-ratio do dispositivo. Não precisa ser maníaco e servir vários CSS para vários pixel-ratios… Você vai ficar doido se fizer isso.

Abaixo veja uma tabela de exemplos de aparelhos com seus valores de pixel-ratios:

Dispositivo Resolução device-pixel-ratio
Android LDPI 320×240 0.75
Iphone 3 & Android MDPI 320×480 1
Android HDPI 480×800 1.5
Iphone 4 960×640 2.0

Agora, como seria o CSS:

[cc lang="css"]

[/cc]

Eu sugiro que você se limite apenas para o pixel-ratio 2. Do jeito que as coisas estão andando, os aparelhos de pixel-ratio menor do que 2 desaparecerão logo e os aparelhos com pixel-ratio igual a 1 são maioria e você já faz versões para eles, já que não precisam de fallbacks.

Considere chavear versões de imagens

Este é um problema que ainda não existe uma solução inteligente e definitiva.
A ideia é tentar evitar que o usuário baixe duas imagens iguais, mas de tamanhos diferentes para cada tipo de necessidade. Logo, existem vários fallbacks, em Javascript ou linguagens server-side para servir apenas a imagem necessária.

O pessoal da Clound Four escreveu um artigo muito interessante sobre isso.

Há outros artigos bons por aí. Eu estou dando uma lida em vários para tentar escrever um artigo mais simples aqui no Tableless. Mas o assunto é muito vasto e ninguém tem uma opinião definida ainda. Isso não é útil apenas para a situação dos aparelhos hires, mas também para encontrarmos maneiras de servir imagens menores para versões de sites mobiles.

Text rendering

Você consegue melhorar muito a leitura dos usuários utilizando a propriedade text-rendering.

[cc lang="css"]
h1, h2, h3 { text-rendering: optimizeLegibility; }
[/cc]

Esta propriedade melhora muito a leitura quando o usuário dá o zoom nos aparelhos móveis e também corrige suporte de ligaduras e kerning. Coisa linda.

Text Smoothing

A propriedade font-smoothing é útil agora! A leitura melhora demais em monitores normais e previne serrilhamentos ocasionais quando utilizandos @font-face.

[cc lang="css"]
body * {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
[/cc]

Tente usar CSS3

Tente usar e abusar dos efeitos do CSS como sombras, gradientes, bordas arredondadas e etc. Além de facilitarem sua vida evitando a criação de imagens desnecessárias, elas ajudam na velocidade de carregamento do site.

Considere utilizar SVG

Já tem alguns que estão começando a utilizar SVG para facilitar a vida. Para ícones, SVG é ótimo. Você consegue reutilizá-los em diversos tamanhos, aumentando o diminuindo de acordo com a sua necessidade e também do aparelho. Veja um exemplo que a Smashing Magazine escreveu.

Novo elemento HTML

O W3C já criou um grupo chamado Responsive Images Community Group para a criação de elementos do HTML que facilitam a entrega de assets dependendo do contexto. Eles estão propondo um novo elemento que identifica as dimensões do dispositivo, velocidade de rede, densidade de pixels e outros pontos para servir melhor imagens e outros assets dependendo do contexto.

Muitos artigos para ler

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://about.me/diegoeis/

Mais posts do autor

Comentários (14)

  • http://crpwebdev.com/ Caio Ribeiro Pereira

    Sensacional esse post! Parabéns!

    Vo deixar nos favoritos pois utilizarei no futuro essas dicas!!

    Realmente esses pequenos detalhes fazem a diferença em um layout totalmente responsive.

  • http://twitter.com/tarciozemel Tárcio Zemel

    Muito bom artigo, com dicas que não se vê em qualquer lugar!

    Só uma dúvida: o seletor “body *” com todos os vendors prefixes para font-smoothing não causa nenhum problema maior com performance?

  • http://tableless.com.br Tableless

    Depende do que você trata como performance Tárcio. Levando em consideração que os browsers vão ignorar os prefixos que não são seus, é como se fosse uma propriedade só. Mas tem a quantidade de texto e etc… mas acho que não gera um problema não.

  • http://twitter.com/tarciozemel Tárcio Zemel

    Agora, falando somente quanto ao seletor, “body *” é tranquilo? O CSS “pegar” todos descendentes de “body” não impacta na performance? Isso que queria saber. :-)

  • Pingback: Dispositivos retina display e HD | Tableless » Web Design

  • Lucas Módena

    Coisa linda esse post.

  • http://www.nosqlbr.com.br Suissa

    Uma nova tecnica será a de image-set via css. http://www.frontendbrasil.com.br/artigos/css-image-set-uma-forma-para-servir-imagens-em-alta-resolucao-design-responsivo/

  • Roy Schulenburg

    DPI é dots per inch, pixel é PPI. Note no próprio Photoshop que a medida é PPI e não DPI. Pixel e pontos são medidas diferentes.

  • http://www.facebook.com/xangelbr Ricardo Lüders

    Muito bom este artigo.

  • Pingback: Retina.js – Imagens para telas retina | Tableless

  • Chris Benseler

    Diego, é meio off do título do post, mas você citou o uso de SVG para criar ícones. Uma das boas técnicas usadas a anos no desenvolvimento web é criar css sprites para ícones, que ficam como background (já que são imagens de layotu e não de conteúdo) de elementos (h1, h2, a, span, etc…). Você vê uma forma de conciliar esse conceito de css sprite em background com SVG?
    Abs!

  • João Firmino

    Muito bom! gostei das considerações relacionados ao Text Smoothing e SVG, sempre bom ressaltar isso para quem ta começando com mobile

  • Luki Nunes

    na boa , esse post Foi demais parabéns !

  • Biusbiro

    Ótimo post, ajudou a compreender legal