Esta dica é muitíssimo útil para Web Designers, na maioria dos sites, a parte mais pesada fica por conta das imagens, mas há formas pouco conhecidas para diminuir o tamanho das imagens sem perder nada em qualidade.
Então vamos lá, irei mostrar 3 exemplos de como otimizar imagens:
SITE - PunyPNG:
Como é um site, não requer o download de nenhum aplicativo, basta acessar:
www.gracepointafterfive.com/punypng
esperar aparecer o botão "Upload Images" e enviar a(s) imagem(s) para que o site otimize.
Depois de feito o trabalho, o site lhe mostra uma tabela indicando o tamanho original, o tamanho depois de otimizado, quantos bytes foram ganhos e a porcentagem do tamanho ganho na conversão.
Você pode fazer o UpLoad de mais imagens sem precisar atualizar a página e se quiser, pode baixar todas elas de uma vez em um arquivo .zip.
O único problema é que o tamanho máximo não pode passar de 350Kb para cada imagem enviada.
SOFTWARE - PNG Gauntlet
Apesar de se chamar PNGgauntlet, ele também converte os outros tipos de imagens (jpeg, bmp, gif...).
Este programa tem um melhor desempenho na hora de otimizar as imagens do que o PunyPNG, e também não tem restrições quanto ao tamanho da imagem, além há a possibilidade de se escolher a qualidade da compactação e algumas opções avançadas.
A única desvantagem além de ter de baixar e instalá-lo, é que ele demora muito mais para compactar as imagens.
Para fazer o download do PNGgauntlet basta clicar aqui: Download PNGgauntlet
SOFTWARE - Adobe FireWorks
Já adianto que esta é a forma mais eficiente de se otimizar as imagens, a única desvantagem é que é um programa pago, mas você pode adquirir uma versão de testes ou comprar a versão full neste link: Download Adobe FireWorks. (se achar conveniente - baixe um crack poraí na WEB xD)
Como compactar imagens com o Adobe FireWorks:
Depois de aberto o programa, clique em "Open" e abra a imagem que você deseja otimizar. Agora vá ao menu "File" e selecione "Export Wizard...".
Na caixinha que aparecer, clique em "continue", depois em "Continue" denovo e depois em "Exit". Pronto, agora irá aparecer a telinha onde tudo acontece.
Certifique-se que você está na aba "Options". Note que há duas imagens iguais, uma em cima da outra, você pode arraster, dar zoom e cortá-la, mas isso não interressa.
Nas opções à esquerda, selecione "JPEG" na caixinha "Format:".
E agora, selecione o valor "100" em "Quality", vá abaixando este valor ao mínimo possível, mas sem deixar a imagem perder muita qualidade (note que a imagem de cima é a que você escolheu, e a de baixo é como ela ficará).
Depois de achado um valor razoável, Procure a caixinha "Smoothing" e selecione "1", faça como em "Quality", mas desta vez, vá aumentando até que encontre um valor aceitável, fique balaneando os valores de "Quality e "Smoothing" até achar um bom resultado.
Agora veja embaixo da imagem de baixo um tamanho expresso em KBs ou MBs, segidos de um valor em segundos e um em kbps. o primeiro valor é o peso da imagem depois da otimização que você fez!
Em cima da imagem de cima, também há um valor, e este é o tamanho original da imagem, antes da otimização.
Depois de feita as modificações, clique em "Export..." e salve a imagem onde quiser.
Observe o plano de fundo do UltraDicas, antes da otimização, a imagem tinha 1,6Mb e depois de usar PNG Gauntlet, passou para 1,3Mb, e depois de compactar usando o FireWorks, passou para 80kb!!!
Espero que tenham gostado da Dica!
Labels: TutoriaisDiversos