Como salvar imagem para Web

Maikon Richardson
[Total: 1    Média: 5/5]

Como salvar imagem para Web

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?

  • Baixe GRÁTIS

    Baixe o Passo a Passo para iniciantes
  • Categorias