Como otimizar imagens para web

Otimizar imagens para web faz com que um site carregue mais rápido. Aprenda como otimizar imagens para web e melhore a qualidade de seu site.

Créditos: http://desenvolvimentoparaweb.com/miscelanea/como-otimizar-imagens-web-internet/

Otimizar imagens para web faz com que seu site carregue mais rápido e que seus visitantes não tenham que esperar tanto pelo carregamento. Os visitantes de seu site querem imagens otimizadas e de tamanho reduzido, portanto, é importante aprender a otimizar imagens para a web a fim de servir páginas rápidas e de qualidade. Entender o básico sobre compressão e otimização de imagens e seus formatos permite escolher não somente qual a melhor maneira de reduzir o tamanho de imagens, mas também melhorar a qualidade de imagens.

Este é um artigo traduzido do original “How to Optimize Images for Web – Image Optimization Ultimate Guide“, do blog Design Live, e a tradução (com pequenas adaptações) foi feita com autorização do autor, Michael Garmahis.

1. Retirar o excesso de espaço em branco

Às vezes uma imagem tem espaço branco ou tem um “excesso” de cor ao redor para que o texto e outros elementos não encostem na imagem. Ao invés disso, recorte esse excesso de espaço em branco e dê o espaçamento desejado usando a propriedade CSS padding.

 Continue reading

Resolução e tamanho de sites da Web

 

Atualizado em 16.3.2012 – créditos: http://www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm

A resolução do monitor de um dispositivo digital indica o número de pontos (ou pixels) que compõem a imagem que aparece na tela. Uma resolução de 1024 x 768 mostra 1024 pontos em cada uma das 768 linhas do monitor, ou seja, 786.432 pontos.

A qualidade da definição de uma imagem ou texto que aparece na tela depende da relação entre o número de pontos por polegada quadrada (ppi, pixels per inch) com que a tela está configurada, sua resolução nativa e o tamanho do monitor.

Normalmente, quanto maior o monitor, maior a resolução ou densidade dos pontos com que se pode configurá-lo – embora o iPad 3, com monitor de alta resolução, quebre um pouco esta regra. De qualquer forma, quanto maior o número de pontos (bits), mais definidas aparecem as imagens.

Do mesmo modo, quando um monitor grande é configurado com baixa resolução de pontos, pode mostrar imagens embaçadas e indefinidas, pois precisa criar pontos falsos da imagem de menor tamanho. Em alguns casos, pode “esticá-la”, para ocupar toda a sua área, ou mostrar a área ocupada pela imagem com espaços laterais neutros até os limites laterais da tela.

■ As resoluções de tela mais utilizadas atualmente pelos usuários de PCs são:

◊ 1024 x 768 pixels (975 x 720) – ainda serve de referência para o desenvolvimento de web sites . Em fevereiro de 2012, foi usada por 16.38% dos usuários mundiais (site Market Share) e por 22,27% dos usuários deste site (a segunda mais usada).

◊ 1366 x 768 pixels – um dos formatos que mais tem ganho usuários no último ano. Em fevereiro de 2012, foi usada por 13,14% dos usuários mundiais (site Market Share) e por 22,27% dos usuários deste site (a mais usada).

◊ 1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em fevereiro de 2012, foi usada por 12.72% dos usuários mundiais (site Market Share) e 7,56% dos usuários deste site.

◊ 1280 x 1024 pixels (1240 x980) – Em fevereiro de 2012, foi usada por 8,43% dos usuários mundiais (site Market Share) e por 7,8% dos usuários deste site.

◊ 1440 x 900 pixels – Em fevereiro de 2012, foi usada por 6,35% dos usuários mundiais (site Market Share) e por 8,53% dos usuários deste site.

A resolução 840 x 640 pixels (800 x 600) hoje é pouco utilizada. Em fevereiro de 2012, foi usada por apenas 1,55% dos usuários mundiais (site Market Share) e 0,78% dos usuários deste site (veja tabela de uso de resoluções por usuários deste site deste 2007).

A resolução de iPhones e iPods Touch é de 960×640, com 326 ppi de resolução. A dos iPads2 é de 1024 x 768, a dos iPads3, é de 2048 x 1536. A resolução dos tablets Galaxy, da Samsung, de 7 polegadas, é  1024 x 600, e a de 10 polegadas, 1280 x 800.

Pesquisas mostram que as telas maiores, como as de PCs, são adequadas para atividades produtivas, enquanto as menores, como as dos dispositivos móveis, são indicadas para comunicação e entretenimento. Por isto, é importante examinar os casos de uso de cada interface para priorizar o uso num tamanho ou outro, ou em todos os tamanhos.

Para facilitar o acesso de um web site projetado para PCs, definir uma medida mínima para a largura das colunas em layouts líquidos, que se adaptam à largura das telas – a adaptação irrestrita às telas estreitas dos dispositivos faz com que muitos textos fiquem ilegíveis, especialmente se o layout tiver muitas colunas.

Variações de tamanho e resolução

■ Os formatos dos dispositivos digitais estão ficando cada vez mais heterogêneos, variando entre as grandes telas para uso de PCs desktop e as telas menores para uso em movimento.

O espaço de publicação de conteúdo de sites e plataformas web precisa considerar o aumento das diferenças entre largura máxima e mínima das telas de PCs, que variam entre 320 a 2560 pixels ou mais (quando os usuários usam mais de um monitor).

O layout das interfaces web precisa também considerar a proporção entre a largura e da altura dos monitores, que apresenta grandes variações. Esta vai desde 4:3, padrão dos aparelhos de TV e PCs, comum nas larguras de 1024 a 1280dpi, até a proporção dos monitores de HDTV, wide screen (16:9, resolução 1280×720 ou 16:10, resolução 1280×800, chegando a 1680×1050 e 2560x 1600).

Em PCs, telas com a largura de 1280dpi, por exemplo, podem ter proporção mais quadrada (como a 1280 x 1024, proporção 5:4) ou mais larga. Estas diferenças de resolução e proporção aumentam ainda mais quando se considera as telas dos dispositivos móveis (Ver Dispositivos móveis : Textos em telas pequenas).

Resoluções a considerar no projeto de interfaces web

No desenvolvimento de web sites para PCs, a decisão sobre a resolução de tela a ser adotada como padrão prioritário depende do perfil da maioria dos usuários ► Exemplo.

O usuário médio que navega na internet, escreve emails e textos, faz planilhas, tende a preferir monitores com resolução mais baixa, pois, além dos dispositivos serem mais baratos, as imagens e os textos ficam mais fáceis de ver e ler. O usuário que usa programas gráficos profissionais para edição de vídeos e imagens, projetos web, visualização de imagens complexas, costuma usar monitores grandes de alta resolução.

Os usuários de jogos costumam preferir as resoluções nativas dos monitores compatíveis com a resolução dos aplicativos, pois quando se aumenta a resolução, o desempenho do jogo tende a diminuir, na medida em que existirão mais pixels a ser processados na tela.

No projeto de intranets, como as condições de acesso são conhecidas, pode-se estabelecer uma resolução padrão que serve de base para o desenvolvimento da interface.

■ Por apresentar compatibilidade com os monitores mais antigos, muitos desenvolvedores web ainda consideram a resolução de 1024 x 768 como base para o desenho de páginas, com largura-referência da interface de 960px, incluindo as dimensões do browser e de barra de rolagem laterais.

Na internet aberta, como o público e as possibilidades de configurações e situações de acesso são amplos, é mais relevante a premissa de que o layout deve se manter estruturado em diferentes configurações. Desta forma, mesmo os usuários com resoluções de tela não prioritárias podem ter uma boa experiência de uso. O tamanho ideal da página previsto no layout deve incluir o maior número de visitantes possível, com uso de diferentes resoluções. ► Exemplo

Alguns autores, como Ethan Marcotte, defendem o chamado “responsive design”, segundo o qual o design de interfaces web para um número cada vez maior de dispositivos deve considerar as diferenças de resolução como facetas da mesma experiência. Pode-se desenhar para uma experiência ideal, mas também agregar tecnologias baseadas nos padrões web para que as telas sejam renderizadas de modo adaptativo a cada mídia ► Exemplos – link externo. (2)

Agradecimentos a Herminio Vitoria, pelas dicas e pelas trocas de ideias.

Leia mais em http://www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm#ixzz1vF6Rr4L8

Imagens para web – GIF, PNG ou JPG?

O Photoshop vem melhorando constantemente seu algoritmo de compressão para imagens web. E desde que a Adobe adquiriu a Macromedia (e seu Fireworks) o processo de salvar imagens mais leves e de melhor qualidade ficou ainda melhor. A opção “save for web” é repleta de opções e, por assim dizer, armadilhas para quem não é familiarizado com a ferramenta.

Com a imagem aberta no Photoshop selecione o menu File > Save for Web ou pressione Alt+Shift+Ctrl+S.

Da janela que se abre, o que interessa pra nós são as opções da coluna direita, apresentada abaixo:

a tela de opções da ferramenta save for web do Photoshop repleta de parâmatros e filtros

 

Para efeito de comparação entre o original e o resultado final, sugiro escolher a opção “2-Up”, que mantém as imagens lado a lado (ou em cima e abaixo se ela for muito comprida na horizontal).

escolha a opção 2-Up, para exibir as imagens original e optimizada lado a lado

1. GIF, JPG, PNG-8 ou PNG-24?

São as extensões de arquivo e definem a taxa de compressão e a qualidade da imagem. Discutir sobre qual extensão é a ideal depende tão somente do tipo de imagem (foto, figura, logomarca, textura, etc.) e a abordagem pode girar em torno do conceito técnico ou gosto pessoal.

A princípio, todas essas extensões têm um só objetivo: reduzir o peso do arquivo. Tanto melhor se mantiverem a qualidade da imagem. E é aí que reside o diferencial de cada uma.

GIF e PNG-8 trabalham com compressão de imagem através da quantidade de cores que você escolhe e permitem fundo transparente. JPG tem seu algorítimo de compressão baseado na qualidade desejada (baixa, média, alta, muito alta ou máxima) e não permite transparência. Já o PNG-24 não é configurável e se baseia na quantidade de cores da imagem e transparência. É o mais fiel ao arquivo original e também o que pode gerar os arquivos optimizados mais pesados.

  • GIF (Graphics Interchange Format) serve para imagens com cores sólidas (chapadas) sem muitas nuances (degradés) em grandes áreas e permite escolher a quantidade de cores para sua composição (item 8).
    Recomendado para: logomarcas, ícones e textos (como IR para títulos, por exemplo).
  • PNG-8 (Portable Network Graphics de 8 bits), como o próprio nome já diz, é uma extensão voltada para distribuição em rede. Veio para substituir o GIF mas nem sempre gera arquivos menores que seu concorrente. Por conta disso sempre procurei, sem sucesso, um estudo científico que comparasse o algorítimo de compressão de ambos para fins de benchmarking. Sendo assim, recomendo que você teste entre um e outro para ver qual gera o menor arquivo, pois a olho nu são absolutamente idênticos. Particularmente percebo que o PNG-8 se sai melhor do que o GIF. No entanto, se tiver fundo transparente você pode esbarrar em um problema ainda conhecido: compatibilidade com o IE6.
    Também é recomendado para: logomarcas, textos e ícones.
  • JPEG (Joint Picture Experts Group) – ou simplesmente JPG – foi criado para fins fotográficos e seu método de compressão foi pensado para fins de armazenamento. Imagens de alta qualidade necessitam de maior espaço, e vice-versa. Para fins de internet, configurar a qualidade em torno de 40% (média) a 60% (alta) geram resultados mais que satisfatórios e não existe padrão específico. Tudo vai depender do original e da necessidade. Lembrando que um original ruim gera uma imagem ruim e, nesse aspecto, o JPG se assemelha muito às fotocópias impressas. Ou seja, a cópia da cópia vai piorando gradativamente. Assim, o JPG do JPG perde cerca de 20% da qualidade. Portanto, mantenha sempre a matriz para eventuais alterações e poder gerar novos JPGs.
    Recomendado para: fotos, texturas, amplos degradés e imagens de grandes dimensões em geral.
  • PNG-24 (Portable Network Graphics de 24 bits) vem sendo utilizado amplamente não só por sua fidelidade ao original mas por permitir transparência real, sem matte (explico mais adiante o item 5D). Pensando no custo-benefício, se a imagem for uma foto, o JPG sai ganhando pela compressão.

2. Tipos de optimização (GIF e PNG-8)

É a maneira com que a tabela de cores é gerada. O extinto programa Adobe ImageReady (vinculado ao Photoshop 6) chamava isso de “algoritmo de redução de cores”.

  • Perceptiva gera uma tabela de cores com base na percepção do olho humano.
  • Seletiva é semelhante a anterior, porém tenta preservar cores sem contraste e também as web-safe colors. Tende a gerar arquivos ligeiramente maiores, mas é a mais recomendada.
  • Adaptativa se baseia na porção do espectro de cores que representa a maioria das cores na imagem e, portanto, também gera arquivos um pouco maiores que a anterior.
  • Restritiva é a que mais “foge” da semelhança com o original, pois transforma todas as cores da imagem em web-safe colors. E permite que você escolha a quantidade de cores. Curiosamente é a que pode gerar o arquivo de maior tamanho. Mas isso acontece devido a inserção de novos pixels na imagem para que duas ou mais cores, próximas, tentem se parecer mais com o original. O que, de fato, nem sempre acontece. Não recomendo essa optimização pois seu uso é muito específico.

2. Tipos de optimização (JPG)

Tanto em qualidade baixa, média, alta, muito alta e máxima, a compressão do JPG pode ser:

  • Progressiva exibe a imagem aos poucos, permitindo que o usuário perceba que uma imagem está sendo carregada. Deixe esta opção marcada caso sua finalidade seja para dispositivos móveis ou de conexão mais lenta. JPGs progessivos são ligeiramente mais pesados, pois carregam informações extras para a exibição gradativa.
  • Otimizada usa uma tabela de compressão mais efetiva e reduz consideravelmente o peso do arquivo sem perda visual de qualidade. Deixe essa opção marcada sempre.

3. Quantidade de cores (somente GIF e PNG-8)

Desnecessário explicar muito. Mas procure evitar a quantidade máxima (256). A diferença visual usando a metade das cores pode ser imperceptível, já o tamanho do arquivo, não. Na maioria das vezes, botões de menu, itens de navegação e ícones podem ser exibidos muito bem com 32 ou 64 cores. E vale lembrar que você pode escolher um número qualquer de cores além das pré-definidas, mas não recomendo, exceto em casos muito específicos.

4. Dithering

exemplo da atuação do dither, que usa de ruído para imitar visualmente um degradéDither é um “ruído” aplicado intencionalmente para tornar mais homogênea a passagem de uma cor para outra, prevenindo grandes áreas de cor chapada (steps visíveis do degradé). Sem ele a imagem pode ficar com um aspecto de ilustração.

Já os 3 métodos de dithering são muito parecidos a olho nu e o único que pode alterar significativamente no tamanho do arquivo é a 3ª opção.

  • Diffusion, o método mais comum e mais utilizado, por randomização de pixels. Permite ajustar sua intensidade.
  • Pattern, por porções da cor. Padrões definidos se misturam.
  • Noise resulta num ruído mais intenso, inserindo pixels de cor não semelhantes aos seus vizinhos.

5. Transparência (somente GIF, PNG-8 e PNG-24)

exemplo de GIF e PNG com transparência por matte, que é um calço de cor para simular uma transparência real

Apesar de GIF/PNG-8 e o PNG-24 permitirem transparência, somente no PNG-24 ela é, digamos, real. No GIF e PNG-8 a transparência é obtida pormatte, uma espécie de “calço de cor”. Veja na imagem ao lado, figuras com linhas retas como o quadrado não necessitam de matte (e nesse caso nem de transparência, concorda?).

Já rotacionando o quadrado temos linhas diagonais cujo efeito serrilhado, conhecido tecnicamente comoalias gera pixels com cores intermediárias para suavizar visualmente o limite de resolução da tela. Quanto menor a resolução da tela, mais perceptível o serrilhado.

matte entra exatamente onde o anti-alias age. Os pixels transparentes gerados pelo anti-alias são “calçados” previamente pela cor de fundo para causar um melhor recorte. Então, se gerarmos um GIF/PNG-8 transparente com matte em branco, como no exemplo ao lado, o serrilhado continua perceptível em fundos que não sejam o branco, dando uma impressão de falsa transparência.

O PNG-24 acaba com essa limitação, eliminando a necessidade do matte e ampliando o uso de imagens com muitas transparências, sombras, reflexos e etc.

6. Modo Entrelaçado

Entrelaçado e Não Entrelaçado são os modos de exibição da imagem no monitor.

GIFs não entrelaçados são exibidos de cima para baixo de uma só vez. Mesmo que muito rápido, dependendo do tamanho da imagem pode gerar um efeito chamado “flickering” (cintilante) pois o espaço a ser exibida a imagem aparece antes de ela própria.

Já imagens entrelaçadas são exibidas em 4 etapas. A primeira etapa exibe as linhas 8, 16, 24, … (1/8 dos dados da imagem) a segunda as linhas 4, 12, 20, … (1/4 dos dados), depois as linhas 2, 6, 10, … (1/2 dos dados) e finalmente as linhas 1, 3, 5, … completando o carregamento.

exemplo de imagem sendo exibida em 4 etapas para exemplificar o modo entrelaçado

Felizmente, desde a chegada da internet banda larga, não existe mais perceptível vantagem ou desvantagem entre um modo e outro. No entanto, para seu conhecimento, mesmo em conexões mais lentas a desvantagem do modo entrelaçado só era percebida em arquivos muito pequenos (algo em torno de 6Kb), pois este acrescenta alguns bytes no tamanho do arquivo. Por serem pequenos, carregavam mais rápido, não havendo necessidade de mudar seu modo de exibição. Afinal, alguns bytes para um arquivo de cerca de 6Kb faz fazia mais diferença do que uns poucos kbytes para um arquivo de 200, 300, 500Kb.

7. Perfil de cor

Explicar perfis de cores vai além do propósito deste artigo. Melhor deixar essa opção sempre marcada para que toda e qualquer imagem gerada saia com o perfil de cor ideal para internet: O padrão sRGB.

8. Tabela de cores (somente GIF e PNG-8)

Mesmo que você escolha a quantidade de cores (item 3) para compressão, se a imagem contiver um número menor de cores, a tabela exibirá apenas as cores existentes, ignorando a quantidade máxima que você escolheu. Já se a imagem for muito elaborada você pode limitar o número de cores a serem exibidas. Os pequenos losangos brancos em algumas cores representam as web-safe colors. Se você for editar a tabela (remover ou adicionar cores por sua conta) evite remover qualquer uma das web-safe colors.

Penso que isso seja suficiente para que você possa gerar imagens mais leves e de maior qualidade. Se ainda restar dúvidas ou tiver alguma crítica ou sugestão, comente!

Referências: