Como salvar imagem para sites e lojas virtuais

Olá, voltei 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.

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.

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.

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, reduzindo 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.

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.

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.

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 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?

🔔 LEIA TAMBÉM SOBRE Glossário de Marketing Digital

Sua empresa pode estar perdendo clientes para a concorrência.

O Diagnóstico de Marketing Digital da MAIKON.biz ajudará a identificar problemas e fornecer soluções para atrair mais clientes na internet.

Receba um relatório detalhado de como atrair clientes e aumentar as vendas da sua empresa!

Com o Diagnóstico de Marketing Digital, você terá insights valiosos para otimizar sua presença online e alcançar seus objetivos de negócios.

Portanto, você terá uma análise completa dos 8 eixos temáticos mais importantes para o sucesso do Marketing Digital da sua empresa!

Por fim, basta responder a algumas perguntas simples sobre sua empresa e receber seu relatório personalizado!

---

Referência para livros e trabalhos acadêmicos

RICHARDSON, Maikon. Como salvar imagem para sites e lojas virtuais. Disponível em: https://maikon.biz/imagem-para-web. Acesso em:  28/06/2015*

*Troque pela data de acesso que você fez