A otimização de imagens para a web é uma tarefa diária para quem trabalha com o webdesign ou publica artigos com imensas imagens. Um exemplo desses artigos são os artigos de inspiração com Wallpapers. Em Outubro de 2010, publicámos o artigo 25 Wallpapers Escuros de Alta Resolução e Qualidade Impressionante e por lapso, não fizémos a otimização das imagens em miniatura, limitámo-nos a redimensionar a imagem. Quer isto dizer que, das 25 imagens que o artigo tem, todas elas eram carregadas na sua totalidade (o tamanho total das fotografias, algumas delas com mais de 2mb! ) cada vez que um leitor abria o artigo, descarregando mais de 40mb, ao invés de serem carregadas as miniaturas otimizadas. Criando uma otimização com miniaturas, só é carregada a imagem original com todo o seu tamanho cada vez que o leitor carregue na imagem para a abrir. Com uma quantidade de visitas muito acima da média, em que atingimos mais de 11 mil visitas únicas e mais de 19 mil páginas vistas, esta situação criou uma sobrecarga no servidor e levou a que o servidor entrasse em colapso.

Poderá ler um artigo criado sobre o assunto pelo colega Paulo Faustino, 10 Formas de Lidar com Picos de Tráfego em seu Blog. Para o guiar em como fazer a otimização de imagens para a Web e evitar surpresas deste género, trazemos-lhe um Guia de Otimização de Imagem para a Web em Adobe Fireworks!

1. TIPOS DE FICHEIRO

Existem vários tipos de ficheiros disponíveis actualmente, sendo que os mais utilizados são o .jpg, .png e o .gif. As imagens em formato .gif podem ter tamanhos muito pequenos, embora muitas das vezes percam alguma qualidade. As imagens em formato .jpg têm mais qualidade, mesmo que guardadas com um nível de qualidade inferior, como veremos mais à frente. Pessoalmente gosto bastante de trabalhar com os ficheiros .png, principalmente porque gosto de trabalhar com o Adobe Fireworks e o formato de ficheiro .png é amplamente suportado por esta aplicação, e também porque o tamanho dos ficheiros é bastante apetecível, iremos perceber porquê mais à frente. Sugerimos a si caro leitor, a leitura do Guia de Comparação entre Fireworks e Photoshop!

2. COMPARAÇÃO ENTRE .JPG E .PNG

A utilização de imagens com formato .PNG pode ser um pouco enganosa, pois o ficheiro pode ser bastante trabalhado ainda. Quando necessitamos de fazer um print screen de algo para incluir num artigo e essa imagem é guardada no formato .PNG, normalmente tentamos fazê-lo com a máxima qualidade possível, e o ficheiro fica com um tamanho considerável. Usando a mesma aplicação para fazer o print screen, fizémos um teste com o formato .JPG e o formato .PNG – O resultado em termos de tamanho de ficheiro é o que figura abaixo:

Como poderá verificar, o tamanho do ficheiro .JPG é quase o dobro do tamanho do ficheiro .PNG. De salientar que ambos os print screen foram feitos usando a máxima qualidade possível em ambos os tipos de ficheiro. Em termos de comparação, o ficheiro .PNG está ótimo, mas será que não dá para fazer melhor? Bom, fique a saber que aquele ficheiro está em “bruto” ainda, é como um diamante à espera de ser trabalhado!

3. OTIMIZAÇÃO DO FICHEIRO .PNG

Já dentro da aplicação Adobe Fireworks, abrimos o ficheiro .PNG do print screen efectuado. É um ficheiro com as dimensões 1260 x 880 (não ligámos aos tamanhos standard) a 24 bits. De momento este ficheiro tem o tamanho de 221kb, mas nós queremos melhor. Então comecemos a explorar as opções disponíveis no programa:

Para a extensão .PNG temos disponíveis o PNG 8, PNG 24 e PNG 32. Vejamos a comparação entre eles:

PNG8 ( 46,6 KB )

PNG24 ( 169 KB )

PNG32 ( 188 KB )

É visível uma pequena diferença de qualidade entre o PNG 8 e o PNG24 e PNG32. No entanto, não é uma diferença significativa que justifique utilizar os outros formatos de ficheiro, com tamanhos 3 ou 4 vezes maiores. Ainda assim, o ficheiro original tinha 221kb, e exportando nesses formatos, em todos eles o ficheiro teve uma diminuição de tamanho.

No entanto, em imagens com efeitos e mais trabalhadas, essa diferença de qualidade é bastante notória utilizando o PNG8, forçando-nos a utilizar pelo menos o PNG24, veja a comparação abaixo:

FICHEIRO ORIGINAL ( 188KB )

PNG 8 ( 36,9 KB )

PNG 24 ( 124 KB )

PNG 32 ( 136 KB )

Em PNG 8 surgem limites nos gradientes, algo que não queremos de todo. No entanto, não notámos diferenças entre o ficheiro original e os formatos exportados PNG 24 e PNG 32, excepto no tamanho.

A sugestão que fazemos aos nossos leitores é que utilizem o formato PNG 8 sempre que ele puder ser aplicado. As diferenças de tamanho dos ficheiro justificam por si só a utilização deste formato. É certo que haverá milhares de pessoas que preferem utilizar outro tipo de formatos na web, e terão as suas justificações para tal. Pessoalmente prefiro a utilização dos ficheiros .PNG pelas razões que já apresentei anteriormente.

4. SUGESTÃO DE UTILIZAÇÃO

Como começámos por referenciar no inicio deste artigo, o colapso do servidor deveu-se sobretudo a uma sobrecarga da largura de banda, impulsionado pelo grande tráfego na Escola Criatividade. Para evitar situações desse género, siga os nossos conselhos:

  1. Ao incluir imagens grandes no seu artigo, crie primeiro uma miniatura dessa imagem. Dessa forma você poderá poupar tráfego no seu servidor e irá evitar estar a carregar desnecessáriamente a imagem original. Introduza a miniatura no artigo e meta o link para a imagem original. Desta forma você assegura que as imagens originais, de grande tamanho, só irão ser abertas por quem as quer abrir.
  2. Escolha utilizar o formato de ficheiro que melhor se adequa àquilo que necessita e com o qual está melhor familiarizado. No entanto não feche a porta a outras opções válidas.
  3. Não olhe apenas para o tamanho do ficheiro. Se você quer manter a qualidade do seu website, mantenha uma boa qualidade nos seus artigos. Imagens distorcidas e com pigmentação não são bem vistas pelos seus leitores.

E VOCÊ, O COMO OTIMIZA AS SUAS IMAGENS PARA A WEB?

Cabe a si decidir qual o formato a utilizar, dependendo das suas preferências e das necessidades. No entanto gostaríamos imenso de contar com a sua participação neste artigo, partilhando a sua experiência e recomendações à comunidade Escola Criatividade, ou mesmo adicionando algo que julgue faltar neste artigo. Contamos consigo!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jóni Oliveira
    21 de abril de 2011

    Excelente Diogo, infelizmente ainda existem muitas pessoas que não otimizam as imagens que metem nos sites.. já vi imagens acima de 500Kb em sites… onde só queriam mostrar aquela imagem em baixa resolução.

    Abraço



    • Diogo Espinha
      21 de abril de 2011

      Olá Jóni, obrigado pela tua visita e comentário!
      De facto ainda existem muitas pessoas que não prestam a devida atenção à otimização de imagens, e nem sequer sabem o que isso lhes pode custar.

      Abraço!



  2. Cuidados com a pele
    24 de abril de 2011

    Boa dica e bastante útil.



  3. Bruno Costa
    26 de abril de 2011

    Gostei do post. Gosto muito de utilizar o formato .PNG, mas há processos que prefiro utilizar .JPG pela facilidade de geração do mesmo.



  4. Holtz
    26 de abril de 2013

    Ótimo post. Sua redação é ótima e bem detalhada, dinâmica e super didática. Por causa desse post, vou acessar mais vezes esse site. Parabéns!
    Deu uma luz para minha dúvida! hahahahha valeu!



  5. Matheus Ailton
    27 de novembro de 2013

    Excelente dicas, Parabéns! eu particularmente gosto e uso bastante o ficheiro .JPG eu acho melhor porque acho melhor, também é flexível para otimizar, utilizando o Fireworks mesmo, usa pela questão de qualidade e praticidade. Uso mais pra imagens que requerem mais qualidade ou seja com mais pixels em sua forma. Vlw pelas dicas Escola Criatividade.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz