Kaksi Media

Como preparar imagens de qualidade para o teu site

Optimizar fotografias para a Internet

Um pequeno acto de solidariedade pode mudar a vida de uma pessoa. Não sabemos se para sempre mas, pelo menos, num determinado momento.

Louie Cooper, de 22 anos, gere um bar em Huddersfield, Inglaterra. Conheceu Omar, um sem-abrigo, quando este lhe bateu à porta à procura de emprego. O seu negócio tinha falido e ficou sem dinheiro e casa. Apesar de não poder empregar o homem, que estava desesperado, Louie disse-lhe que teria dificuldades em arranjar um emprego se as suas roupas não fossem asseadas. Levou-o a uma loja e comprou-lhe um fato, barato, além de lhe ter dado algum dinheiro para pagar uma renda em atraso ao senhorio. Ao todo foram cerca de 50 libras.

No dia seguinte, Omar regressou ao bar de Louie e contou-lhe que tinha arranjado um emprego. Louie deu uma lição importante: pequenos gestos podem fazer uma grande diferença na vida de outras pessoas. Omar terá aprendido outra: a imagem é importante. Sobretudo para o empregador.

O empregador que agora nos interessa é o Google e também os visitantes do teu site. Ambos são conhecidos por serem exigentes.

Gostam de páginas rápidas. É também verdade que os utilizadores gostam de boas imagens que, muitas vezes, implicam um pouco mais de peso e provocam um maior tempo de carregamento.

O melhor dos mundos passa por agradar a todos. Fazer o Google feliz, servindo imagens de qualidade e leves, e os utilizadores satisfeitos porque a qualidade visual mantém-se.

Há algumas técnicas que nos podem ajudar a cumprir as duas missões.

Optimizar as imagens

O objectivo primordial é encontrar o equilíbrio entre a melhor qualidade e o ficheiro mais leve. Por vezes tudo começa na escolha do formato da imagem em conjugação com o tipo de compressão. Neste aspecto, não há nada melhor que experimentar.

Há três formatos com maior grau de utilização:

  • PNG – Possibilita melhor qualidade de imagem mas também é responsável por ficheiros maiores.
  • JPEG – Permite uma boa qualidade de imagem em ficheiros mais leves.
  • GIF – Usa apenas 256 cores e é, por isso, uma má opção para imagens estáticas. Por outro lado é uma boa escolha para imagens animadas na web.

De preferência deves usar JPEG para imagens com muitas cores e PNG para as mais simples.

Embora seja preferível guardar as fotos em JPG na maioria das vezes, pode haver casos em que prefiras usar o PNG.

Por exemplo…

  • Quando tens mesmo de guardar a imagem com a melhor qualidade possível, uma vez que o PNG guarda mais pormenores que o JPG.
  • Quando vais editar e guardar imagens diversas vezes. Mas no final, deves guardar em JPG.
  • A foto tem texto. Neste caso, porque o JPG vai reduzir a qualidade do texto. No entanto, para sites modernos e responsivos não é uma boa ideia inserir texto ‘dentro’ da foto.
  • Precisas de uma foto com um fundo transparente.

Vamos as principais características de cada um destes tipos de ficheiros.

JPG

Os ficheiros JPG são:

  • Habitualmente usados em fotos e menos em gráficos.
  • São a melhor opção para capturas de ecrã com forte conteúdo visual, como jogos, filmes e similares.
  • Não têm fundos transparentes.
  • São ficheiros mais leves em comparação com os PNG.
  • Carregam de forma mais rápida no site.
  • Editar e voltar a guardar, por norma, reduz um pouco a qualidade da imagem mas na maioria dos casos isso não se nota.
  • Por omissão, a compressão é lossy.

PNG

Os ficheiros PNG são:

  • Habitualmente usados em ilustrações e outros tipos de gráficos.
  • São a melhor escolha para ilustrações e capturas de ecrã de aplicações.
  • As imagens podem ter um fundo transparente.
  • Podes alterar as cores dos ficheiros PNG.
  • Quanto menos cores usares mais pequeno fica o ficheiro.
  • Por omissão, a compressão é lossless.

GIF

Os ficheiros GIF são:

  • Capazes de conter animações.
  • A melhor opção para gráficos simples.
  • Limitados em termos de cores.
  • Por omissão, a compressão é lossless.

Compressão Lossy ou Lossless

É outro aspecto importante. Comprimir as imagens acaba por reduzir o seu peso no servidor e melhorar o tempo de resposta no carregamento da página quando um utilizador a visita.
Há dois tipos de compressão básica que podes utilizar.

Lossy

Usa um tipo de filtro que elimina alguns dados, o que leva à sua degradação. Por isso é fundamental avaliar com cuidado o grau de tratamento que se pretende dar. Quando uma imagem é comprimida através de um método deste tipo, toda a informação não essencial é removida para sempre do ficheiro.

Lossless

Usa um filtro que comprime dados. Não reduz a qualidade mas implica que a imagem seja descomprimida antes de registar a intervenção do filtro. As imagens contém informação redundante e este tipo de compressão remove essa redundância mas também indica ao computador quais foram os dados afectados e como pode reconstruir a imagem.

Portanto, e como cada site é diferente e com objectivos diferentes de outros, o melhor é experimentares até encontrares a melhor opção para o teu caso.

Algumas recomendações

  • Se o teu site é, de alguma forma, relacionado com fotografia profissional, usa PNG e lossless.
  • Para um website sem requisitos específicos de qualidade fotográfica mas com necessidade de apresentar uma boa imagem, recomendamos JPEG e Lossless.
  • Se tens um projecto que dá preponderância às palavras e as imagens servem apenas de ilustração simples, vai para JPEG e compressão lossy.

Já sabes o que vais fazer no teu caso?

José Freitas

José Freitas

Ajudo pequenas e médias empresas e empreendedores a criar estratégias online para conseguirem melhores clientes, através da comunicação relacional. Na minha vida passada fui jornalista durante 25 anos. A comunicação é a minha praia. Viciado em café intenso e aromático.

Queres receber as nossas mensagens semanais o teu email?

As nossas mensagens são compostas por pequenos textos escritos a pensar em ti (sim a sério, a pensar em ti).

Não enviamos SPAM porque também não gostamos de o receber.