Como salvar imagem para Web

4 Comments

Olá, estou de volta com dicas de como preparar sua imagem para web.

Sabemos que um dos grandes inimigos de qualquer site é a lentidão da internet. Internet lenta significa que seu site será carregado mais lentamente e isso pode ser prejudicial aos negócios quando os concorrentes têm sites bem mais rápidos que o seu e cliente que não gosta de esperar, principalmente se ele estiver acessando pelo celular ou tablet.

Existem vários fatores que influenciam na perda de velocidade de seu site. Um deles é o uso de imagens com formatos incorretos e de lento carregamento. Mas como obter a melhor qualidade com a maior velocidade possível?
Esse é o grande desafio e uma arte para os amantes do Search Engine Optimization – SEO.

Saiba aqui o que você pode fazer:

1º Passo: Defina padrões de tamanho de imagem para web

A primeira coisa a fazer é criar um padrão de imagens para seu site, blog ou loja virtual, isso garantirá que as dimensões das imagens tenham um tamanho único. A aqui na MAIKON.biz eu uso em meu site 3 tamanhos de imagens diferentes:

– 420 (altura) x 600 (largura) pixel para imagens de posts;

– 350 (altura) x 480 (largura) pixel para imagens de chamada de posts;

– 266 (altura) x 380 (largura) pixel para imagens em miniatura;

Esta padronização não só ajudará no redimensionamento automático feito pelo CSS como manterá uma padronização visual agradável ao seu site.

2º Passo: Escolha o formato adequado de imagem para web

A segunda etapa, é escolher o formato correto de imagem que será usado. Neste caso há alguns fatores que você deverá levar em consideração, como:

– O tempo de carregamento do site

– A qualidade da imagem

– Transparência

Universalmente há 3 formatos de imagens mais usadas para web, são elas:

– Graphics Interchange Format (GIF), ideal para imagens muito pequenas ou simples (por exemplo, com menos de 10 x 10 pixels ou com uma paleta formada por menos de três cores) e para imagens com animação;

– Joint Photographic Experts Group (JPEG ou JPG), ideal para todas as imagens com estilo fotográfico;

– Portable Network Graphics (PNG), são quase sempre superiores aos GIFs, embora algumas versões mais antigas de navegadores só ofereçam suporte parcial para PNG.

Eu particularmente, gosto de usar a PNG pela qualidade da imagem e o nível de compactação.

3º Passo: Faça uma otimização básica da imagem para web

A próxima etapa é fazer uma otimização básica da imagem em qualquer editor de imagem, como o Photoshop por exemplo.

A otimização básica inclui cortar espaços desnecessários, o que reduz a profundidade de cor para o menor nível aceitável, remover comentários na imagem e salvar a imagem no formato apropriado.

Em seguida, usando photoshop, transforme as cores para RGB (Red, Green e Blue), o modelo de cor padrão utilizado para imagens digitais.

4º Passo: Salvando sua Imagem para Web

Feitas as etapas anteriores, chegou a hora de salvar a imagem. Para isso use o recurso do Photoshop (ou editore gráfico semelhante) chamado “Salvar para Web e Dispositivos”.

Para você aprender com detalhes a usar este recurso. Recomendo a Leitura do Artigo “Como salvar imagens mais leves e compactas para Web no Photoshop” feito pelo pessoal do Canaltech.

5º Passo: Use compactadores de imagem para web

Para deixar ainda mais leve e compacta sua imagem, use um compressor como o tinypng.com.

Existem vários outros, mas na minha opinião esse é um dos melhores, é gratuito e online.

Seguindo esses seis passos, você conseguirá ter uma imagem com carregamento bom.

6º Passo: Estruture nomes para cada tipo de imagem

Por fim, crie uma forma estruturada de renomear seus arquivos por tipo de imagem. Isso ajudará na hora de encontrar as imagens e de fazer novas versões.

Exemplo “imagem-450×300-marketing-digital-maikon.biz

Exemplo 2 “banner-450×300-marketing-digital-maikon.biz

No exemplo acima, uso a seguinte estrutura: “Tipo de arquivo – dimensão- Nome da imagem – nome do site”, tudo em letras minúsculas.

IMPORTANTE: Antes de publicar na internet, você deve retirar todas as demais informações e deixar somente o nome da imagem.

Exemplo “marketing-digital

Mergulho profundo na arte de otimizar imagens para web

Conheça mais profundamente Como Otimizar imagens lendo o artigo de Ilya Grigorik para o Developers.

Você tem alguma técnica diferente que deixa suas imagens mais rápidas? Compartilhe sua opinião?

É estrategista de marketing Digital, Palestrante e consultor de Inbound Marketing para empresas.

Especialista em Inovação Tecnológica
Especialista em Gestão de Pequenos Negócios
MBA em Gestão de Empresas

Sobre a MAIKON.biz

Somos uma empresa de consultoria de Inbound Marketing com foco em ajudar empresas a obter ótimos resultados em vendas.

Buscando resultados?

Para gerar resultados com Marketing Digital, o primeiro passo é planejar uma estratégia solida que invista seu dinheiro com segurança. Conte com nossa ajuda!

Assine nossas dicas de marketing

Campos marcados com um * são requeridos

Leia também

Leia todos os artigos
4 Comments
  1. Recomendo a leitura, para quem não sabe padronizar suas imagens!

    • Rodolfo Santos Rodolfo
    • 14/01/2017
    Responder

    Olá Maikon. Boa noite. Resolvi enveredar pelo caminho do Empreendedorismo Digital, e sei que posso aprender muito com você. Alias desde os tempo idos da UNIFAP, sempre achei interessante seu trabalho com aqueles bonecos la no CARNOT, em uma das atividades da Federal, lembra? acho que foi em 1998. Bom, gostaria de saber se você conhece algum grupo, inclusive de whatsapp, que discuta algo relacionado a infoprodutos, marketing Digital e afins. É isso ai. Forte abraço e parabéns pelo excelente site e trabalho.

    • Vamos conversar mais sobre suas ideias sobre infoprodutos, estou desenvolvendo alguns!

    • Olá Rodolfo, que ótima notícia esse seu mergulho no empreendedorismo digital.
      Bons tempos aqueles trabalhos da UNIFAP no Carnot.
      Quanto aos grupos, especificamente sobre infoprodutos não conheço. Há muitos sobre Marketing Digital.

 

Leave a Comment

Baixe Grátis Marketing Digital - Para iniciantes