TUTORIAL: COMO REDUZIR O TAMANHO DE IMAGENS NO FIREWORKS

Lendo muitos artigos sobre SEO e otimização de sites, me deparei com algo muito interessante e importante e deve ser levado em consideração ao manter uma página na internet. Trata-se da otimização de imagens, ou seja, se as imagens de seu site não estão o deixando lento por seus carregamentos.

Sabia que você pode ter as mesmas imagens sem perda de qualidade, com tamanho em KB MUITO menor?

Sabia que isso ajuda no desempenho de sua página?

Neste Tutorial, irei mostrar a vocês como reduzir o tamanho das suas imagens utilizando o software Fireworks e como medir se estas imagens estão interferindo no desempenho de sua página ou não.

COMO FUNCIONA O GOOGLE PAGE SPEED ?

Quem está começando no ramo precisa aprender muito sobre como o Google funciona, e saber que o grande Deus atual da internet abençoa os editores de Blogs e Sites com ferramentas gratuitas de gerenciamento, testes e até paga as pessoas, basta ler bastante e ir descobrindo.

Dentre estas ferramentas, existe o Google Page Speed, que verifica a velocidade de carregamento de suas páginas e lhe passa um relatório instantâneo de tudo que interfere efetivamente na velocidade de seu site, sejam eles o HTML, o Java Script, CSS ou as imagens propriamente ditas.

A página que eu quero analisar e otimizar é o primeiro post das figurinhas do sapo de Chocolate: O Mago Merlin, que começamos a disponibilizar aos sábados no Panic Geek.

1.1 - Página do Panic Geek a ser analisada.

Entremos na página do Google Page Speed para criar a nossa análise.
Na barra lateral do Google Page Speed, clique em "Análises" e logo em seguida em "Insights", ou se você estiver com MUITA preguiça, clique aqui e vá direto ao ponto.

1.2 - Barra Lateral com o "Insights"

Em Insights você encontrará uma barra de endereço, onde iremos adicionar o endereço que escolhemos para analisar.

Em nosso caso, iremos adicionar o endereço da postagem, mas poderíamos, por exemplo, adicionar a página inicial do Panic Geek e analisarmos a página inicial e suas ultimas postagens.
Basca clicar em "Analisar" e dentro de instantes, você terá a análise completa da página em questão.

1.3 - Barra de texto para análise

Com a análise concluída, você descobrirá qual é a experiência do usuário com sua página.

No caso desta página em específico, a experiência do usuário com o Panic Geek é de 83/100, devido a alguns problemas que o blogger apresenta com a qualidade de HTML, CSS e de Java Script, que podem atrasar um pouco o lado, mas o mais importante aqui é a nossa imagem.

Como esta imagem está armazenada no Host do Blogger, conseguimos saber exatamente qual é a imagem que está com problema.

1.4 - Resultado da Análise

Para fins de conferência, a imagem está hospedada no link "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihC3O3fjgpZftiMVOBGMBGMqTEBAlNsponpvG_MaJ43lk624NBOgVI3CKOGKcC2T11ojqbJ4UZEPgJZwi9mCeVM2aY650Lcx7h56cF41-RHPoMmOv_GU76WzXUv6n5vq7nrLSBd87xSus/s1600/001.gif" ( Não há a necessidade de clicar)

Perceba que esta imagem está em formato GIF, o que em alguns casos não é muito interessante para o rendimento da página!
O Page speed então sugere algumas mudanças para que o seu site tenha um melhor desempenho, e lá está a nossa imagem

Pronto! Agora você já sabe como funciona o Page Speed e sabe como utilizá-lo.
OK, mas agora que eu sei que a imagem está grande demais, como fazer para mantê-la em meu site, sem que ela seja estragada pela compressão?

Perceba que o próprio page speed já lhe fornece esta informação e segundo ele, se eu reduzir o tamanho da imagem em 10%, já terei uma grande melhora de desempenho sem perda de qualidade.

Então tratemos a imagem!

TRATANDO A IMAGEM NO FIREWORKS

Antes de começarmos a tratar a imagem, é necessário dizer que no mundo das "INTERNETES", subir imagens gigantescas sem precisar é uma falta de tato danada de sua parte e, a não ser que você tenha uma página de Wallpapers, onde a qualidade da imagem é necessária, você está cometendo um erro grave, assim como eu mesmo já cometi!

Ao baixar uma imagem da internet para utilizar em seu site, é necessário conferir se esta imagem tem a resolução ideal para a internet.

A Resolução ideal para a internet é de 72 DPI, e qualquer coisa acima disso contribuirá para deixar sua página um pouco mais lenta. Lembre-se também de que se você posta em um espaço limitado ( Assim como o Panic Geek), não fazer upload de imagens muito maiores do que o ecrã de sua página.

Por exemplo: a Largura de sua área de postagem é de 400 pixels, o maior tamanho de imagem que você teoricamente deveria subir em sua página é 400 pixels de largura. Fazendo isso, sua página será otimizada em dobro!

Então mãos a obra!

1 - Primeiramente, baixe a imagem original que você quer reduzir para uma pasta local em seu computador.

2 - Abra a imagem no Fireworks!

2.1 - Abrindo a imagem no Fireworks

3 - Inicialmente, extraí esta imagem do Google Imagens e fiz o upload da mesma do jeito que foi baixada.

Então a primeira coisa que precisamos fazer, é verificar se esta imagem tem o tamanho ideal para a página do Panic Geek. Com o Pointer Tool ativo, clique fora da imagem, para que as propriedades de Canvas e Size apareçam.

4 - Agora, clique no botão "Image size" que aparece na barra inferior "Properties".

Uma janela parecida com essa se abrirá:

2.2 - Tamanho da imagem em pixel está satisfatório

A área útil do Panic Geek, gira em torno de 700 pixels, ou seja, a imagem está mais do que boa para ser inserida aqui na página. Acredito que no máximo 600 pixels são a dimensão ideal de largura para a estética do site, pois há a necessidade de bordas.

Então não iremos mexer nas dimensões da imagem.

5- Agora vamos comprimir esta imagem para que ela possa ser otimizada para o Page Speed!

Vá no menu File/Image Preview ou aperte CTRL+SHIFT+X e uma janela como essa irá se abrir: 

2.3 - Imagem em Gif apresenta 5 segundos de carregamento

6 - Note que a imagem está em GIF, e se observarmos, sobre a imagem existe uma informação:

33,03K 5 sec @56kbps

Isto quer dizer que, a sua imagem tem 33,03 kilobytes e leva 5 segundos para abrir em uma conexão de internet a 56 kbytes por segundo.
O pensamento óbvio é : "Quem ainda tem internet com conexão a 56 kbps?"
Caro amigo, eu conheço gente que tem essa conexão até hoje, e se você quer ganhar espaço na internet, sugiro você a começar a pensar em atender todo o tipo de conexão, mesmo que esta seja a mais improvável possível!


Outra informação importante é que a cada segundo a mais que sua página leva a carregar, você pode perder milhares de acessos no mês, então encare os 5 segundos aí com mais seriedade do que você imagina e torne a sua página mais rápido hoje mesmo! :)

7 - Agora, iremos mudar esta imagem para JPEG com qualidade de 50%
Perceba a grande diferença entre os tamanho de imagem. Agora a sua imagem abre 5 vezes mais rápido e isso é um ganho extraordinário:

2.4 - Imagem em JPEG a 50% apresenta melhora de 5 vezes mais velocidade

9,71K 1 sec @56kbps

A qualidade continua boa, visível e esta imagem atingirá uma parcela muito maior de conexões do que em seu primeiro estado.

8 - Agora, clique em exportar e adicione em um arquivo local em seu computador e pronto, você terá muito mais espaço e rapidez de imagem!
Se você havia adicionado a imagem maior em seu site, troque a imagem e faça novamente a análise do Page Speed para ver que agora a sua imagem sumiu das sugestões de compressão, pois agora ela está satisfatória para seu site e para qualquer velocidade!

Faça isso com todas as imagens de seu site e você terá um alto rendimento de views em sua página, faça o teste!

Um grande abraço!!!