Imagine que um visitante do site acabou de ver a sua nova promoção. Ele ficou tão seduzido por ela que decidiu conferir a oferta que você está vendendo. Mas, infelizmente, ele não consegue carregar a página do carrinho de compras e finalizar a compra. O que acabou de acontecer?
Muitas coisas podem levar a problemas de carregamento de páginas. Por exemplo, para começar, você pode não ter espaço de armazenamento on-line suficiente para o seu site. Pode ser que ele não tenha um cache de memória tão grande quanto o necessário.
Mas, de todos os erros que você pode cometer ao criar um site, não otimizar as imagens para as páginas da web pode ser um dos mais problemáticos. Não otimizar adequadamente as imagens para a web pode deixar o seu site mais lento e, por sua vez, levar à redução do tráfego e à perda de oportunidades de vendas. Abaixo, explicamos como otimizar as imagens para a web para que você possa criar um site que consiga resultados.
- O que é otimização de imagem?
- Por que é importante otimizar as imagens para a web?
- Como otimizar imagens para a web
- Ferramentas para otimização de imagens
- Tipos de arquivo de otimização de imagens da web
- Conclusão
O que é otimização de imagem?
Cerca de 70% das pessoas relatam que a velocidade de carregamento de páginas da web afeta a disposição delas de fazer uma compra on-line. Além disso, cerca de 45% dessas pessoas não comprarão de um site se a página carregar mais lentamente do que o esperado.
Essas estatísticas ressaltam a importância da otimização das imagens da web. Se você não tomou medidas para garantir que suas páginas carreguem rápido o suficiente, provavelmente teve sorte de um comprador ter chegado à página de finalização da compra do carrinho de compras. Muitas vezes, este programa é iniciado quando eles chegam à página inicial do seu site. Você pode evitar isso com a otimização das imagens do site.
Otimização de imagens é o mesmo que reduzir o tamanho dos arquivos de imagem. No entanto, isso também envolve a não diminuição da qualidade das imagens e dos gráficos durante o processo de "redução" (compactação).
Uma causa do carregamento lento do site são as imagens que não estão otimizadas adequadamente. Isso significa que os arquivos são tão grandes que sobrecarregam o resto do site e ocupam espaço de armazenamento.
A otimização das imagens, por outro lado, redimensiona a resolução de suas imagens na página. A otimização das imagens também reduz o tamanho dos arquivos, para que o servidor do site tenha mais espaço. Ao liberar espaço de armazenamento no seu servidor, você pode diminuir o tempo de carregamento das páginas de seu site, deixando a navegação mais fácil e agradável.
Por que é importante otimizar as imagens para a web?
Otimizar as imagens para páginas da web deixa seus usuários felizes. Isso também mantém seus servidores de domínio funcionando da maneira que deveriam. Lembre-se de que cerca da metade de seus visualizadores usa telefones celulares para procurar informações on-line e visitar sites, portanto, a otimização de imagens pode ajudar muito na otimização do seu site para a velocidade da página para dispositivos móveis e SEO móvel. A otimização de imagens da web pode ajudar os visitantes a ver seu conteúdo mesmo com uma conexão Wi-Fi lenta.
Por fim, a otimização das imagens para a web pode ajudar seu site de várias maneiras. Abaixo, listamos algumas formas adicionais pelas quais a otimização das imagens para a web pode melhorar seu site.
Faça as páginas carregarem mais rapidamente
Um dos principais motivos para otimizar as imagens é fazer com que elas carreguem mais rapidamente. Imagens não otimizadas podem deixar o seu site mais lento a ponto de torná-lo difícil navegar e frustrante de usar.
Dica: A otimização das imagens tem a ver com a redução do tamanho da resolução, para que elas não ocupem muito do seu espaço de armazenamento on-line na web. Também é possível compactar as imagens e manter a mesma qualidade da imagem original ou usar imagens e gráficos apenas quando necessário.
Otimize a experiência do usuário
Ao otimizar as imagens para a web, você também otimiza a experiência do usuário. Em outras palavras, você reduzirá a frustração do cliente. Se não quer que os visitantes fiquem se perguntando quando o espaço em branco na web mostrará o texto e os gráficos, é hora de mudar a resolução de cada imagem.
Os visitantes do site vão gostar da conveniência e da aparência aprimoradas que vêm com o carregamento mais rápido da página. Em vez de uma mensagem de erro onde deveriam estar todas as imagens, eles verão os ícones e as imagens que deveriam ser exibidos.
Impulsione a SEO
Ao otimizar as imagens, é possível impulsionar a SEO do seu site. Você também pode rotular as imagens com etiquetas alternativas para melhorar a acessibilidade e otimizar a SEO. Se você usa um criador de sites, pode fazer isso facilmente ao carregar as imagens para uma biblioteca de mídia.
Bibliotecas de mídia, como as fornecidas pelo WordPress ou Mailchimp, fornecem caixas de texto onde você pode inserir etiquetas e palavras-chave alternativas. Elas serão anexadas à imagem e exibidas nos mecanismos de pesquisa, desde que você permita que seu site seja encontrado na web.
Minimize o armazenamento em seu servidor
Arquivos grandes de imagem, vídeo ou gráficos podem deixar os servidores de sites mais lentos. Se a mídia exibida em seu site exceder os limites de tamanho recomendados, a página poderá demorar muito para carregar, ou nem mesmo carregar.
Armazenar menos arquivos de imagem em seu servidor mantém o seu site funcionando na velocidade que seus visitantes esperam. Após aprender a otimizar as imagens para a web, você poderá conseguir tempos rápidos de carregamento das páginas.
Como otimizar imagens para a web
Não é preciso muito para aprender a otimizar as imagens para a web. Abaixo, explicamos como compactar imagens ou o seu site e passaremos pelas etapas básicas envolvidas quando se trata de otimização de imagens para a web.
Selecione um formato de arquivo
Você pode encontrar centenas de tipos de arquivos diferentes por aí. Alguns dos mais comuns incluem JPEG (ou .jpg), PNG ou GIF. Mas, antes de prosseguir com a otimização das imagens para a web, você precisa entender a finalidade de cada tipo de arquivo.
- JPEG – É um dos tipos de arquivo de imagem para a web mais comumente usados. Isso porque fornece uma qualidade decente que ocupa menos espaço do que um PNG. Alguns gráficos, no entanto, podem nem sempre manter o "brilho" se você reduzir o tamanho do arquivo de imagem JPEG (JPG).
- PNG – Este formato geralmente funciona melhor para reduzir o tamanho dos arquivos de imagem e manter a qualidade. Também permite usar e compactar imagens que tenham um fundo transparente.
- GIF – Um formato de arquivo "GIF" não é particularmente o preferido para imagens na web. É mais para criar vídeos gráficos animados. O melhor uso desse tipo de arquivo é para tutoriais de demonstração. Hoje em dia, o GIF pode parecer obsoleto porque é possível hospedar arquivos MP4, MOV ou WMV compactados que produzam animações de melhor qualidade do que um GIF. Por outro lado, o GIF usa menos espaço e recursos do servidor da web e não causará carregamentos lentos das páginas.
- SVG – Este formato tornou-se mais popular após a necessidade de fazer com que os gráficos respondam a uma variedade de tamanhos de tela. Um arquivo SVG pode ser ampliado ou reduzido em todos os dispositivos, incluindo computadores, telefones celulares e tablets, sem reduzir a qualidade. No entanto, SVGs podem não ser exibidos corretamente em todos os navegadores.
Com relação ao tipo de arquivo, todos eles são compactados de forma diferente. Por exemplo, os arquivos JPEG sofrem uma compactação com "perdas". Será necessária uma imagem quase perfeita para obter a mesma qualidade para esse tipo.
Por outro lado, a compactação de arquivos "sem perdas" não reduz a qualidade do arquivo quando o tamanho é reduzido. Esse é frequentemente o caso quando imagens PNG são compactadas. Os tipos de compactação "com perdas" versus "sem perdas" são alguns dos tipos que precisam ser considerados ao usar plug-ins para redimensionamento automático. O tipo de arquivo desempenha um papel, mas o design do plug-in também pode afetar o resultado da compactação.
Adicione texto alternativo (do jeito mais fácil)
A adição de "texto alternativo" faz mais do que otimizar uma imagem para a SEO usando palavras-chave. Também deixa uma página da web mais acessível, adicionando uma descrição para os gráficos que estão sendo visualizados.
O texto alternativo é uma maneira de fazer com que uma pessoa com deficiência visual entenda as fotos e os gráficos exibidos. Ele também é útil quando as imagens não são exibidas corretamente em um guia tutorial, pois permite que você ainda compreenda as instruções.
A maneira mais fácil de adicionar um texto alternativo é preenchendo-o no campo fornecido ao carregar uma imagem em uma biblioteca de imagens. Normalmente, também é possível carregar imagens em publicações de blogs na maioria das plataformas de hospedagem que administram blogs. Ao criar sua publicação no blog, você provavelmente notará um campo onde poderá inserir o texto alternativo ao adicionar as imagens.
Adicione texto alternativo (do jeito mais difícil)
Se o seu blog ou criador de sites não tiver a opção de inserir rapidamente o texto alternativo e a descrição da imagem, você terá que usar HTML. Você pode fazer isso em uma publicação de blog, caixa de texto de página ou em um arquivo que carregaria para o seu servidor a partir de um arquivo do Bloco de notas.
Usar HTML é um pouco mais avançado do que apenas usar um editor visual de blog ou página de site. Isso exige que você tenha o código para copiar e colar (ou escrever do zero) no modo "texto", em vez do modo "visual" ou "fonte". Se não tem ideia do que isso significa, veja este exemplo de como é o código HTML ao adicionar um texto alternativo a uma imagem.
Não se preocupe em usar isso se estiver apenas começando o seu site. Você poderá criar um texto alternativo sem saber HTML se usar o método mais fácil descrito acima. Caso contrário, você poderá, pelo menos, aprender o necessário sobre o código HTML para formatar a imagem após carregá-la em uma publicação de blog.
Aprender o código da etiqueta alternativa HTML "da maneira difícil" é mais para pessoas que querem aprender a desenvolver um site do zero. Nesse caso, eles aprenderiam como inseri-lo em um arquivo do bloco de notas e carregá-lo no site deles usando um cliente FTP ou ao criar um site usando um editor de códigos.
Você provavelmente não precisará fazer isso se acabou de começar a criar o seu site. No entanto, agora você sabe que é uma opção ao otimizar as imagens para a web.
Otimize as dimensões de um arquivo
É mais fácil otimizar as dimensões dos arquivos se você ainda não os carregou na web. Nesse caso, você pode salvá-los em seu programa de edição de fotos favorito no tamanho que precisar. Isso corresponderia a aproximadamente 1024 pixels de largura x 786 pixels de altura para cabeçalhos.
Suas imagens de plano de fundo precisarão ter cerca de 1920 x 1080 pixels para o plano de fundo. As imagens de logotipo variam de 100 a 400 pixels de largura e geralmente têm de 50 a 100 pixels de altura. Tenha em mente, especialmente para as imagens do plano de fundo, que o tamanho que você pode usar depende do tamanho do arquivo da imagem.
Compacte suas imagens
As imagens do site que mais podem afetar o tempo de carregamento incluem o cabeçalho e as imagens de plano de fundo da página. Para as imagens do plano de fundo do cabeçalho e da página, você normalmente deve usar a compactação de GIF ou JPEG. Faça com que elas tenham o menor tamanho possível para fornecer ao seu site a aparência profissional de que precisa.
Use ferramentas e plug-ins de otimização de imagens
Uma maneira de evitar gastar inúmeras horas otimizando manualmente as imagens para a web é usar ferramentas de otimização de imagens. Esses plug-ins geralmente vêm com a maioria das principais plataformas de blogs e redimensionam suas imagens automaticamente. Plug-ins e ferramentas de otimização de imagens também fornecem uma maneira rápida de adicionar as etiquetas alternativas. Normalmente, você pode selecionar as imagens da biblioteca de mídia que deseja compactar. Isso acontece em poucos cliques e reduz o tamanho, mantendo a qualidade.