Otimizando Imagens para a Web: Um Guia Prático

Eles dizem que uma imagem vale mais que mil palavras, um dos motivos pelos quais as imagens são tão importantes no comércio eletrônico. Sem que o cliente possa pegar, tocar e inspecionar um produto, eles dependem muito das imagens para entender a cor, a qualidade e a história do produto.

Portanto, nem é preciso dizer que suas imagens precisam ser de alta resolução e nítidas. Mas isso tem um preço. Imagens grandes de alta definição podem ter tamanhos de arquivo enormes. Coloque alguns desses em seu site e aquela experiência rápida de navegar em sua loja online pode acabar parecendo mais como nadar no melado. Isso não apenas fará com que os visitantes saltem, mas, com o tempo, o Google também notará, e isso pode afetar o seu SEO.

No comércio eletrônico, é fundamental encontrar um bom equilíbrio entre a qualidade da imagem e o tamanho do arquivo de imagem ao salvar uma imagem para seu site. Vamos mostrar como fazer exatamente isso neste post.

Se você costuma tirar uma foto de um produto e carregá-la diretamente em sua loja, este tutorial é para você. Se você não tem conhecimento formal ou processo para salvar imagens com o tamanho do arquivo em mente, este tutorial é para você. Se o seu site tem toneladas de imagens e as coisas estão lentas, este tutorial é para você. Se você ainda não começou a construir sua loja online, este tutorial é especialmente para você.

Pronto para otimizar suas imagens?

Opções de tipo de arquivo de imagem

Existem três tipos de arquivos principais nos quais queremos nos concentrar para salvar imagens otimizadas para a web: GIF, JPG e PNG. Cada tipo de arquivo tem seus próprios pontos fortes e fracos e é muito importante conhecê-los e mantê-los em mente ao salvar uma imagem.

Trabalhando com JPGs

JPGs (também conhecidos como JPEGs) são o tipo de arquivo mais popular para imagens na web. JPGs são perfeitos para fotografias ou imagens complexas contendo muitas cores, sombras, gradientes ou padrões complexos. Os JPGs lidam bem com esse tipo de imagem porque os JPGs têm uma enorme paleta de cores para trabalhar.

JPGs também podem ser salvos em alta qualidade, baixa qualidade ou em qualquer lugar entre os dois. Isso permite que você ajuste e salve a imagem exatamente como deseja, equilibrando a qualidade e o tamanho do arquivo.

Trabalhando com PNGs

PNGs são outro formato de arquivo popular online. No Adobe Photoshop, você terá a opção de salvar PNGs como PNG-8 ou PNG-24.

• PNG-8 tem uma paleta de cores muito limitada de 256 cores. Embora o tamanho da imagem seja menor, essa não será uma boa opção para imagens e fotografias complexas.
• O PNG-24 fornece uma imagem de qualidade muito mais alta, mas tem o custo de um tamanho de arquivo maior.

Mais importante ainda, os PNGs podem lidar com transparência. Este é um dos maiores pontos de diferenciação entre PNGs e JPEGs.

Trabalho com GIFs

Os GIFs eram mais populares há muitos anos, mas ainda são uma opção para tamanhos de imagem pequenos, onde apenas algumas cores são necessárias. Muito parecido com o PNG-8, os arquivos GIF são restritos a apenas 256 cores. Por isso, GIFs nunca devem ser usados ​​para fotos de produtos.

Salvar imagens corretamente

Como é de se esperar, imagens grandes demoram mais para carregar. Quando dizemos grande, estamos nos referindo ao tamanho do arquivo e não às dimensões de uma imagem, ou seja, o valor em KB, MB, GB etc. Visto que 47% dos usuários esperam que uma página da web carregue em menos de 2 segundos, e 40 % vai abandonar uma página que leva mais de 3 segundos para carregar, é importante que suas imagens sejam pequenas o suficiente para garantir um site rápido.

Existem três coisas que você pode fazer para otimizar adequadamente suas imagens para sua loja online:

Salve as dimensões certas

Você deve abrir a imagem no Photoshop e visualizá-la em 100%. Isso permite que você visualize a imagem no tamanho exato em que será exibida no monitor de um computador quando você salvar a imagem para a web.

Salvar imagens para a web

É possível reduzir o tamanho do arquivo sem reduzir significativamente a qualidade das imagens. Nosso método favorito de reduzir o tamanho do arquivo sem reduzir significativamente a qualidade da imagem é usar a função “Salvar para a Web” do Photoshop. Abra sua imagem no Photoshop e vá para Arquivo> Exportar> Salvar para a Web (Legado)…. Aparecerá uma janela que permitirá a você escolher a qualidade da exportação. Descobrimos que uma qualidade de 60 funciona melhor porque reduz o tamanho do arquivo para menos de um megabyte e não há diferença perceptível na qualidade.

Comprimir imagens para a web

Os aplicativos de compressão de imagem são a maneira mais fácil de reduzir o tamanho do arquivo de imagens. Esses tipos de ferramentas removem dados ocultos no arquivo de imagem, como perfis de cores adicionais e metadados (como geolocalização de onde a fotografia foi tirada) que não são necessários. Essas ferramentas fornecem uma maneira rápida e fácil de reduzir o tamanho dos arquivos sem perder a qualidade da imagem.

Aplicativos e serviços de compressão de imagem

• ImageOptim
• ShortPixel
• TinyJPG
• TinyPNG
• Compressor.io
• Kraken
• ImageOptimizer
• Crush Pics (aplicativo Shopify)
• Minificador (App Shopify)

Salvando uma imagem para a web: exemplo passo a passo

Para começar, vamos fingir que somos Stiff Salt (na verdade, propriedade de um amigo e desenvolvedor do Shopify) e queremos mudar a imagem do recurso em nossa loja online.

Montamos uma cena, deixamos nosso sal absolutamente incrível e tiramos uma foto com uma câmera DSLR. Ótimo, temos nossa foto. Que beleza!

Mas… o tamanho do arquivo é ENORME! 14,6 MB para ser exato. E as dimensões da foto são 5184 × 3456 pixels. Isso está completamente inutilizável agora. É literalmente grande o suficiente para imprimir um pôster do tamanho de um filme. Com 14,6 MB, essa imagem levaria um tempo significativo para carregar no computador de um visitante. Isso não é bom.

É hora de começar a trabalhar e reduzir o tamanho da imagem e do arquivo - significativamente.

Lembre-se, faremos três coisas com a imagem.

• Reduzir tamanho da imagem: estas são as dimensões da fotografia
• Salve a imagem de forma adequada para reduzir o tamanho do arquivo : Este é o tamanho do arquivo e quanto espaço ele ocupa no disco rígido do seu computador e / ou servidor da web
• Compactar arquivo de imagem: para se livrar de quaisquer dados ocultos adicionais que ocupam espaço

Reduzir o tamanho da imagem

Dependendo do programa que você decidir usar e de suas preferências pessoais, você pode:

• Reduza o tamanho da imagem antes de salvar
• Reduza o tamanho da imagem enquanto salva a imagem
• Salve a imagem e reduza o tamanho dela

Para manter as coisas simples, vamos primeiro reduzir o tamanho da imagem. Para fazer isso, vamos abrir a imagem no Photoshop (você pode usar qualquer programa de imagem com o qual se sinta mais confortável).

Para descobrir o tamanho, examinamos o tamanho da imagem da página inicial sugerida para o tema. Tinha 1600 x 800 pixels (lembre-se de que o original tinha 5184 × 3456 pixels).

No Photoshop, vamos selecionar Imagem> Tamanho da imagem.

Ok, reduzimos o tamanho (dimensões) da imagem para algo mais apropriado e recomendado pelo desenvolvedor do tema.

Salvar imagem de forma adequada (Salvar para a Web)

No Photoshop, há um comando específico chamado “Salvar para a Web” que otimiza o arquivo de imagem para exibição online. Isso é importante porque o comando regular “Salvar” pode acabar criando tamanhos de arquivo 2 a 3 vezes maiores do que o comando “Salvar para a Web”.

Na caixa “Salvar para a Web”, precisamos fazer algumas seleções.

• Tipo de imagem: O tipo de arquivo afetará a qualidade e o tamanho do arquivo de saída
• Qualidade da imagem: Isso é importante e pode afetar fortemente o tamanho do arquivo final
• Dimensões: já fizemos isso na primeira etapa, então não há necessidade de fazer novamente, mas se não fizéssemos na primeira etapa, poderíamos apenas alterar as dimensões da imagem aqui

Com base no que aprendemos no início deste post, sabemos que JPEG é o melhor tipo de arquivo para fotos ou qualquer imagem com muitas cores e complexidade. Vamos selecionar JPEG.

Para Qualidade de imagem, você tem uma escala que pode selecionar com 5 predefinições que variam de Máximo a Baixo. Vamos dar uma olhada no tamanho do arquivo de saída final de cada um dos níveis de qualidade (essa informação é exibida no canto inferior da janela de salvamento de imagem):

• Máximo: 1,38 MB
• Muito alto: 611 KB
• Alto: 339 KB
• Médio: 152 KB
• Baixo: 86k

Você pode ver que para cada nível de qualidade que você diminui, o tamanho da imagem é reduzido quase pela metade. Em geral, descobrimos que Alta é a melhor configuração para a maioria das imagens. Nesse nível, é quase impossível para o olho humano ver qualquer degradação na qualidade da imagem, e o tamanho do arquivo é quase 4x menor do que se selecionássemos apenas o máximo.

Se a imagem for uma imagem extremamente importante com muitos detalhes, você pode selecionar um nível mais alto e salvar em Muito alto.

Essencialmente, salvar para a web é um ato de equilíbrio - você deve equilibrar a qualidade dos gráficos e o tamanho do arquivo da mídia para atender às suas necessidades pessoais.

Comprimir imagens para a web

Se você usou o Adobe Photoshop, ele já terá feito um ótimo trabalho na redução do tamanho da imagem, no entanto, você ainda pode cortar outros 5-10% do tamanho da imagem usando um aplicativo de compressão como ImageOptim e / ou ShortPixel.

ImageOptim também é a maneira mais fácil de reduzir rapidamente o tamanho do arquivo de imagem se você tiver usado outro programa para salvar suas imagens que não seja tão bom quanto o Photoshop.

Soltando cada um dos arquivos da etapa anterior no ImageOptim, fomos capazes de reduzir ainda mais o tamanho da imagem em outros 5%. Não é enorme, mas, novamente, eles já foram otimizados com o Photoshop. Independentemente disso, cada KB conta.

Conclusão

Para recapitular, nossa foto era incrivelmente grande quando começamos, no entanto, com alguns passos simples, reduzimos o tamanho da foto de 5184 × 3456 para 1600 x 800 para que se encaixasse perfeitamente em nossa página inicial e, ao mesmo tempo, de 14,4 MB com falha de computador, até 336 KB muito mais razoáveis.

Salvar imagens apropriadamente para a web é um passo importante para aprender cedo e implementar religiosamente. Mesmo que você economize apenas 10-20% em cada imagem, ao longo do tempo, conforme sua loja e site crescem, cada pequena KB pode resultar em uma economia significativa que levará a uma experiência muito mais agradável em geral para seus visitantes, clientes e Google.

Como otimizar imagens para a web: passo a passo em vídeo