Prepare suas imagens para a web com este plugin do GIMP

Imagens para a web, geralmente usadas em blogs e sites precisam ter boa qualidade.
Ao mesmo tempo, é importante ter a preocupação com “o peso” da imagem

Imagem muito “pesadas”, ou seja, de tamanho muito grande, penalizam o seu site ao demorar pra carregar.
Se você costuma ter muitas visitas por dia, servir várias imagens pesadas, de várias páginas, pode se tornar um problema para você.

Alguns provedores cobram a mais pelo tráfego, outros penalizam quem ultrapassa o limite preestabelecido no contrato de adesão.
Mesmo quem usa um provedor sem limites de tráfego precisa se preocupar com a velocidade com que seu site chega à sua audiência — ou seja, a velocidade de conexão do seu visitante.
O pior mesmo é que o visitante pode ir embora, por que seu site demora muito para carregar.

Neste post, vou mostrar como tratar e gravar suas imagens, rapidamente, para a web.
É mais ou menos o que sites de redes sociais, como Facebook, Twitter, Instagram etc. fazem automaticamente com suas fotos.
Mesmo que você as tire usando uma câmera com capacidade de 40 megapixels, esta qualidade não será servida pelo Instagram, para citar um exemplo.
Pelo contrário. Assim que você faz o upload da sua imagem ou vídeo, ela é tratada para ser exibida com a melhor qualidade possível, porém com menor quantidade de informações.

Faça com o seu site ou blog a mesma coisa que o Instagram faz: trate as imagens, para que fiquem com menor tamanho, mantendo a maior qualidade possível.

Tudo isto pode ser feito, usando as opções padrão do GIMP, mas a extensão Save for web, agrupa todos os ajustes em uma única tela.
Para estes casos, existe uma extensão (ou add on), presente no pacote gimp-plugin-registry.
Expliquei como instalar aqui.
O pacote contem o plug in “Save for web” (ou “Salvar para web”), que automatiza o trabalho para você.
Salvar imagem para web

Depois de instalado, você pode gravar suas imagens para a web, a partir do menu arquivo:
Selecione Arquivo/Salvar para web.
salvar para web

O painel permite selecionar o tipo de arquivo e uma série de recursos que ajudam a reduzir o tamanho final do arquivo.
Fique atento ao tamanho do arquivo, na barra de status do painel e à qualidade visual dele, na sessão de preview.

O que você precisa fazer, aqui, é ter em mente a maneira como as suas páginas são visualizadas.
O pessoal do Instagram trabalha com uma audiência predominante de celular (e tablets, eventualmente) — então não faz sentido mostrar imagens com larguras superiores a 4096 pixels, por exemplo.
Se a maioria dos seus leitores usa celular, você também pode reduzir consideravelmente o tamanho das suas imagens.
Use a janela de pré-visualização, à direita, para verificar se o comprometimento da qualidade está aceitável em relação ao “peso” da imagem.

Qual a importância da linha de comando ou console para web designers?

A linha de comando, ou console, é onde se pode fornecer uma sequência de comandos, para executar um aplicativo ou vários, realizar uma tarefa ou uma sequência de tarefas etc.
Amparados por parâmetros, opções e cláusulas os comandos, dados no console ou no terminal, têm uma enorme (quase infinita) flexibilidade.
Command line tools for web design cover picture

Administradores de sistemas, desenvolvedores, hackers, autores etc. já descobriram o “poder divinal” que um terminal oferece a quem se dispõe a aprender a dominá-lo.

Mas, enfim… qual a utilidade ou a importância desta ferramenta a um web designer?
Se por um lado, a interface gráfica tem um grande apelo visual e facilidade de uso, ela também prejudica a flexibilidade e a agilidade — nenhum designer de interface “enche a tela” de botões para realizar uma determinada tarefa de n maneiras diferentes.
Além disto, a interface gráfica é comumente lenta em computadores mais antigos — o que implica na demora para iniciar a execução de alguma atividade.
O terminal permite determinar exatamente como se deseja que uma tarefa (ou uma sequência de tarefas) seja executada e ela começa a partir do momento em que você dá Enter.

Não abro mão da flexibilidade e da agilidade que só o terminal proporciona. É uma ferramenta que eleva exponencialmente o meu nível de controle sobre o sistema.

Terminal do Linux, do Windows ou do MacOS?

Se você ainda não usa o GNU/Linux, no seu trabalho, insisto: você deveria começar a considerar seriamente esta opção profissional — que te pode possibilitar trabalhar com softwares 100% legalizados a custos muito baixos ou gratuitos.
O terminal do Windows também oferece uma razoável dose de flexibilidade. O sistema, contudo, foi desenhado para que se usassem apenas as opções da interface gráfica. O processo de “castração” do terminal DOS, começou a partir do Windows 3.0 (Maio/1990) e tem se fortalecido até os dias de hoje.
A Microsoft tem se esforçados para esconder o terminal do usuário, como se fosse um parente indesejável.
O MacOS foi construído sobre a plataforma Unix FreeBSD e tem um terminal poderoso. A cultura dos usuários, incentivados pelo departamento de marketing da Apple constitui uma forte barreira para seu uso. Mas ele está lá. 😉
Usuários do MacOS X podem usar o Homebrew para instalar as ferramentas que não são parte do pacote de aplicativos padrão.
O Linux, como estes outros sistemas operacionais, também veio do ambiente em caracteres e evoluiu para o uso predominante da interface gráfica.
O Linux, contudo, convive muito bem com o uso do terminal. Todas as grandes distribuições oferecem facilidades de acesso ao console.
Embora haja ferramentas visuais sofisticadas para instalar softwares, muitos usuários Linux se sentem muito à vontade para instalar seus aplicativos com as ferramentas de linha de comando, como o apt-get — sendo que, na maioria das vezes, lhes basta copiar e colar a instrução de um site no seu terminal, podendo fazer as mudanças que achar pertinentes, se for o caso.
Encontre mais artigos sobre o uso do apt-get, na caixa de busca deste site.

O que há na linha de comando para profissionais do web design?

Há muito que um webdesigner já faz, usando a interface gráfica, que pode ser feito na linha de comando.
Eu sou um evangelista do uso do software livre e do uso de comandos no terminal — mas eu entendo, veja bem, que você deva usar sempre o que lhe oferecer os melhores resultados.
Tudo o que este artigo pede é que você abra os olhos para o terminal do seu sistema e veja (com generosidade e sem preconceitos) se há lá alguma coisa que lhe possa ser útil. Só isso.
Veja alguns pontos que Cadmin’s blog elenca como favoráveis ao uso do terminal:

  • O uso de pacotes de softwares de terceiros se torna invisível — Webdesigners usam vários pacotes de terceiros, tais como o Bootstrap, jQuery, Normalize.css etc.
    A gestão de pacotes, contudo, é muito morosa, quando feita manualmente.
    Com o uso do terminal, é possível inserir os pacotes requeridos pelo seu projeto com alguns comandos: bower install jquery, bower update jquery
  • Para quem não sabe, o Bower é um gestor de pacotes, semelhante ao apt-get ou o PIP.

  • No terminal, compilar é muito mais rápido — HTML, CSS e JavaScript são 3 linguagens sempre presentes em projetos de design web, entre outras. As ferramentas da linha de comando tornam a produção e entrega de código mais eficiente nestas linguagens.
    Eventualmente, compilar pré-processadores, é muito mais rápido na linha de comando.
  • Ferramentas de teste de sites — Há várias ferramentas de teste da rede e da eficiência de seu website ou do provedor em que ele se encontra hospedado, que podem ser invocadas do terminal — não somente as opções de execução, mas também as informações fornecidas, são extremamente flexíveis e maleáveis.

Uma vez iniciado o uso da linha de comando, você adquire o costume e um mundo novo de possibilidades surge, ao alcance de seus dedos.

Referências

Site oficial do Bower: bower.io
How important is command line for web designers — http://auckland.fortuneinnovations.com/how-important-command-line-web-designers
Command line tools for frontend developers — http://seesparkbox.com/foundry/command_line_tools_for_frontend_developers