Salvar imagens para web
Publicado originalmente no blog da HE:Labs.
Já reparou quanto tempo leva para uma página carregar nos dias de hoje? Você clica em um link e espera, espera mais um pouco, para então o conteúdo aparecer. Ainda pior se acessar pela rede móvel.
O tempo que uma página leva para carregar é uma característica que deve ser observada pelos desenvolvedores. Não importa se uma página é agradável e bonita se ela não funciona corretamente. Imagens podem ser pesadas e é por isso que nesse artigo você vai aprender a salvar no melhor formato para pesar menos.
Use o melhor formato
Para imagens que contém ilustrações ou ícones, use o formato PNG 8-bit ou GIF e reduza o número de cores na palheta de forma que não comprometa a qualidade. Alguns programas de edição como o PhotoShop permitem você salvar imagens para web e ajustar diversas opções. Reduzir a paleta de cores de 256 para 32 diminuirá o tamanho do arquivo. Com menos cores na imagem, menor será o tamanho do arquivo.
Para imagens com detalhes, muito coloridas ou fotografias, JPG e PNG 24-bit são usados por possuírem uma paleta de cores maior. O PNG 24-bit produz qualidade de imagem melhor ao custo de um arquivo maior. Quando possível use JPG e ajuste as opções para comprimir o máximo sem estragar a qualidade da imagem.
O JPG possui uma opção chamada modo “Progressivo”. Essa opção adiciona algumas cópias da imagem em menor resolução para que ela apareça mais rápido na tela, enquanto carrega em maior resolução. Mas essa opção aumenta o tamanho total da imagem.
PNG também oferece o modo “Interlaçado”. Você pode desabilitar essa opção para que a imagem inteira carregue mais rápido.
Como o PNG 8-bit e GIF podem produzir arquivos menores, tente manter isso em mente ao desenhar ou usar ilustrações nas suas páginas.
Redimensione a imagem
Salve a imagem com o tamanho que ela será usada. Se não existe espaço para exibir com detalhes, crie uma versão pequena da imagem, em baixa resolução, como link para a imagem em alta resolução.
Se a intenção é que a imagem apareça perfeita em monitores com maior resolução, exiba a imagem em alta resolução somente para quem tem esse monitor. Para todos os monitores normais, salve a imagem em baixa resolução.
