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?
website-design
images
save
file-size
optimization
Sander Schaeffer
fonte
fonte
Respostas:
Provavelmente, o passo inicial é mais planejamento do que o Photoshop.
1) Preciso de um arquivo de imagem? Ou posso usar outra coisa
2) Preciso das dimensões desse arquivo? ou posso usar
3) O formato do arquivo é adequado?
Não é esculpido em pedra, mas:
4) Posso usar uma alternativa para animações?
5) Preparei a consulta de mídia adequada necessária para o dispositivo de tela?
6) Aqui está a compressão específica do jpg.
Para fotografia. Tendo decidido a dimensão real, preciso:
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
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.
fonte
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:
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.fonte
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.
fonte
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.
fonte
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
fonte