Como otimizar imagens para melhorar o tempo de carregamento das páginas / páginas da web?

Essa é quase uma pergunta do StackOverflow, no entanto, está completamente relacionada ao Photoshop e outras ferramentas. Em todos os testes do Pagespeed que faço em todo o site, recebo o comentário "Otimizar imagens compactando sem perdas a imagem X", o que geralmente aumenta muito o meu page rank.

Já salvei TODAS as imagens com 'save for web' no Photoshop, mas fiquei pensando como poderia "otimizar imagens compactando sem perdas" ainda mais. Tanto quanto sei, já estou fazendo tudo o que posso.

Como otimizar imagens para melhorar a velocidade de carregamento da minha página da web?

Provavelmente, o passo inicial é mais planejamento do que o Photoshop.

1) Preciso de um arquivo de imagem? Ou posso usar outra coisa

• Cor de fundo.
• Um gradiente de css.

2) Preciso das dimensões desse arquivo? ou posso usar

• Uma dimensão inferior aumentada.
• Mascarar a baixa resolução com alguma coisa? um padrão sobre ele, um borrão, escurece.
• Um padrão.
• A imagem realmente vale a pena ter em alta resolução?

3) O formato do arquivo é adequado?

Não é esculpido em pedra, mas:

• Jpg para fotografia.
• Png para cores lisas ou gradientes. Logotipos, gráficos.
• Imagens SVG para imagens escalonáveis, cores simples e gradientes.

4) Posso usar uma alternativa para animações?

• Gifs animados com paletas otimizadas e pontilhamento.
• Animações CSS.

5) Preparei a consulta de mídia adequada necessária para o dispositivo de tela?

• Preciso dessa dimensão nesse dispositivo?

6) Aqui está a compressão específica do jpg.

Para fotografia. Tendo decidido a dimensão real, preciso:

• Realmente importa se eu posso ver alguns artefatos de compactação. Posso empurrar um pouco mais? Vale a pena?
• Preciso incluir o perfil de cores em cada foto?

Aqui está uma questão "psicológica". Ao economizar na Web, você evita usar uma qualidade 25, pois diz "Baixa" e deseja que seu site seja de alta qualidade?

7) E algumas especificidades

• O jpg progressivo usa um pouco mais de espaço do que o não progressivo.
• Ative a otimização de jpg.
• Desative qualquer opção de desfoque.
• Os algoritmos 4: 4: 4 oferecem melhor qualidade, mas menos compactação em qualidade superior. 4: 2: 2 comprime melhor.
• Certifique-se de usar arquivos rgb, não cmyk.
• Prepare seus arquivos com as configurações de cores em "web". Dessa forma, você pode soltar o perfil de cores.

Uma ferramenta de otimização sempre, sempre lhe dirá para fazê-lo melhor.

Qual parâmetro um algoritmo pode usar para dizer. Ah, o retrato que você está mostrando no seu site tem a quantidade certa de compressão "lossles"?

Novamente. "Lossles" não tem significado aqui.

Antes de entregar o design final do site, você realmente deve otimizar as imagens com ferramentas mais focadas e dedicadas à otimização de imagens. O Photoshop está bem, mas já vi muitas pessoas comentando que outras ferramentas fazem um trabalho melhor.

Pelo que ouvi, o ImageMagick é muito bom para esse fim. No entanto, como um noob da linha de comando, preciso gastar um pouco de tempo dominando-o pessoalmente. Se você está familiarizado com a linha de comando, provavelmente é perfeito para você.

Como não tenho tempo para dominar o ImageMagick no momento, escolho procurar ferramentas de otimização on - line gratuitas , nas quais eu possa inserir uma imagem e ela produzirá uma versão otimizada.

Algumas das ferramentas que encontrei incluem:

• Compressor.io - muito poucas opções ajustáveis, mas resultados bastante surpreendentes (média de redução de tamanho de arquivo de 60% a 80% para mim)
• ImageOptimizer.net - parece padrão
• tinyPNG - usado pessoalmente com bons resultados (capaz de converter PNG de 24/32 bits com canal alfa em um PNG de 8 bits, mantendo a transparência)

Pessoalmente, não tenho nenhum motivo para pagar por uma ferramenta adicional com todas as opções gratuitas disponíveis, a menos que ouça sobre uma mudança de jogo.

Você provavelmente pode encontrar muitas ferramentas on-line e off-line mais livre, combinando palavras-chave como reduce image file size, image compression, PNG / JPEG / GIF optimisation tools.

Pela minha experiência, se você seguir a rotina "Salvando para a Web" do Photoshop, isso otimizará a imagem para a Web. Apesar disso, você ainda verá alertas de otimização ao testar a velocidade da página, mas observe o kb de otimização atingido. Na maioria dos casos, é de cerca de 1 ~ 5kb. Concordo com Scott que você não deve ficar obcecado com a velocidade da página.

Se você trabalha com o WordPress, pode instalar plugins de otimização, como o otimizador de imagens EWWW, que processará cada imagem que você enviar e a reduzirá em alguma porcentagem. É útil se o cliente quiser fazer o upload por conta própria.

Outra opção é usar um software de otimização de desktop, como http://www.jpegmini.com/, com boa taxa de compactação e qualidade e processamento em lote.

No seu caso, acho que está feito. A partir deste ponto, é necessário verificar o lado do servidor, usando hospedagens poderosas como o Amazon S3 ou algo semelhante e servir arquivos de lá para obter o melhor desempenho.

Se você é um usuário do Wordpress, também pode consultar o Optimus Image Optimizer (aviso: eu trabalho para a empresa que criou o plugin) para compactação de imagem sem perdas. No entanto, um grande diferencial deste plugin em comparação com outros é a capacidade de converter imagens para o formato WebP, conhecido por diminuir o tamanho do arquivo em até 26% quando comparado aos PNGs.

Isso ajudará a melhorar ainda mais os tempos de carregamento da velocidade da página, pois as imagens são muito menores, portanto, o cliente gasta menos tempo fazendo o download delas.

Também vale a pena dar uma olhada ...

https://developers.google.com/speed/pagespeed/

Eu usei o PageSpeed ​​no passado.

Ele testará as páginas de carregamento do seu site e oferecerá sugestões geralmente úteis para acelerar o tempo de carregamento.

Como outros já apontaram, a otimização de imagem também pode ajudar bastante.

No Mac - eu uso o ImageOptim ... gosto muito dos resultados.

https://imageoptim.com

PS: Não estou tentando enviar spam. :-D