Pagina inicial
- 28 de março de 2018 Hoje vamos falar sobre um assunto que me é caro, a compressão de imagens! Estou brincando, mas há algo estranhamente satisfatório em reduzir grandes porcentagens do tamanho de um arquivo de imagem sem diminuir a qualidade.
A inspiração para este post veio de um post muito popular no grupo Beaver Builders no Facebook. Acabei de filmar um tutorial em vídeo sobre como ativar e usar o novo algoritmo Guetzli do Google no ImageOptim e fiquei chocado com todas as outras opções com as quais não estava familiarizado. Neste artigo vamos falar sobre algumas dicas e ferramentas para compactação de imagens para web.
Antes de nos aprofundarmos, vamos estabelecer alguma terminologia comum.
JPEG, PNG, SVG – Esses são os três tipos de arquivo de imagem mais populares na web. Neste tutorial, vamos nos concentrar principalmente em JPEGs e PNGs, pois eles se beneficiam mais com compactação e otimização.
JPEGs geralmente são melhores para imagens de alta fidelidade, como fotos e gráficos da web que não possuem transparência.
PNGs são ótimos para coisas como ícones e logotipos ou qualquer coisa que precise de transparência. PNGs também podem ser otimizados significativamente depois de saírem do Photoshop ou da ferramenta de edição gráfica de sua preferência.
Sem perdas e com perdas – Esses são métodos de compactação. A compactação sem perdas significa que sua imagem não perderá qualidade. Literalmente nenhum. Isso envolve remover metadados da imagem ou qualquer coisa que não afete a qualidade.
Com perdas significa que o algoritmo de compactação reduzirá a qualidade da sua imagem. Você obterá melhores resultados de compactação, mas sacrificará a qualidade da imagem. A maioria das ferramentas de compactação com perdas fornece um controle deslizante de porcentagem para que você possa escolher o equilíbrio entre qualidade e tamanho do arquivo.
Dica: para fundos de imagens grandes, geralmente desfoco um pouco a imagem ou adiciono uma camada de cor opaca sobre a foto. Reduzir os detalhes e/ou normalizar a cor é uma boa opção de estilo estético que reduz significativamente o tamanho do arquivo. Você pode ver isso em ação em nossa página de empregos.
O objetivo da compactação de imagem é reduzir ao máximo o tamanho do arquivo sem sacrificar muito a qualidade. Isto é mais uma arte do que uma ciência e o nível de “qualidade aceitável” irá variar dependendo da situação.
Um estúdio fotográfico provavelmente desejará destacar seu trabalho com a mais alta qualidade, enquanto um site imobiliário pode estar disposto a sacrificar a qualidade em troca de exibir mais imagens na página.
A maioria dos softwares de edição de imagens permite exportar imagens com qualidade variável. Embora, se você estiver usando uma ferramenta de compactação de imagem dedicada, às vezes é melhor alimentar esse software com a melhor qualidade possível e deixar seus algoritmos de compactação funcionarem a partir daí.
Como descobri recentemente, opções não faltam quando se trata de ferramentas e serviços para compactação de imagens.
Comecei e ainda prefiro o ImageOptim. ImageOptim está disponível apenas no OSX, mas suporta compactação com e sem perdas para arquivos JPEG e PNG. Ele também pode ser configurado para usar o algoritmo de compressão relativamente novo do Google, Guetzli. Guetzli, em média, pode reduzir o tamanho dos arquivos de 20 a 30% mais do que outros algoritmos.
ImageOptim é um programa que fica no Dock do seu Mac e você pode simplesmente arrastar e soltar imagens no ícone do programa e ele as compactará. Costumo otimizar uma ou duas imagens por vez, então essa solução funciona muito bem para mim. Mas, se você estiver trabalhando em um grande número de imagens ou em imagens com tamanhos de arquivo grandes, algumas das outras opções podem ser uma escolha melhor para trabalhos grandes.
Smush é um plugin gratuito para WordPress da WPMU Dev que pode ser configurado para otimizar imagens existentes na instalação do WordPress e/ou conforme você as carrega no WordPress. Smush é ótimo porque o trabalho pesado é feito pelos servidores do WPMU Dev e eles otimizam e redimensionam as imagens.
Se você está criando sites para clientes – principalmente aqueles que gostam de fazer upload de imagens de vários megabytes diretamente de suas câmeras digitais – o Smush é uma ótima opção para configurar e esquecer.
TinyPNG é um compressor de imagens baseado na web. Você pode fazer upload de suas imagens (até 5bm) e baixar a versão compactada. Isso consumirá largura de banda, portanto, pode não ser a melhor opção se você estiver em uma conexão de Internet lenta ou paga pelo uso. Suporta tipos de arquivo JPEG e PNG. É gratuito. Não parece oferecer nenhum controle sobre o nível de qualidade da compactação.
Depois de brincar com o TinyPNG, acho que ainda prefiro o ImageOptim, mas seria uma ótima opção para usuários do Windows, trabalhos únicos e rápidos ou usuários que procuram especificamente um compressor baseado na web. Ou, se você estiver tentando transferir o processamento para a nuvem e não para sua máquina local.
Imagify é outra opção SASS baseada na web que fornece um plugin WordPress dedicado para otimizar e redimensionar imagens à medida que você as carrega ou diretamente da área de administração do WordPress. O plugin Imagify WordPress apresenta uma avaliação média impressionante de 4,5 estrelas e muitas análises observam que a qualidade da imagem alcançada com Imagify é melhor do que as alternativas.
Imagify possui um plano gratuito que permite fazer upload e otimizar imagens com menos de 2 MB. A versão otimizada das imagens permanecerá disponível para download em seus servidores por 24 horas.
JPEGMini é um serviço SASS que deve agradar a quem procura uma solução robusta. Imagine que você tenha a tarefa de otimizar dezenas de milhares de imagens de produtos em alta resolução para uma loja de comércio eletrônico. JPEGMini permitiria que você transferisse todo esse processamento para seus servidores em nuvem, presumivelmente rápidos e otimizados.
ShortPixel é outro SASS baseado na web. Se você deseja descarregar a compactação de imagem para um servidor em nuvem, é uma ótima opção. Seu plano gratuito permite otimizar até 100 imagens por mês e eles têm planos premium a partir de US$ 5/mês para mais. ShortPixel também tem um plugin para WordPress e é o favorito entre o resto da equipe BB.
Imagine
Se você visitar o tópico original do Facebook que inspirou esta postagem, verá várias outras opções e pessoas que preferem uma ou outra por diversos motivos. Estamos sentindo falta do seu favorito? Deixe-nos saber o que é e por que você gosta nos comentários.
Além disso, se você é do tipo que come, dorme e respira desempenho, esta entrevista com Jon Brown sobre as melhores práticas de desempenho moderno provavelmente será atraente.
em 30 de abril de 2018 às 11h35Haha. Sim, a maioria das empresas que têm um mascote animal são bastante sólidas.
em 28 de março de 2018 às 16h30Tinypng também possui um plugin para Wordpress https://wordpress.org/plugins/tiny-compress-images/ e sua API é boa para trabalhar se você precisar configurar algo no lado do servidor.
em 28 de março de 2018 às 20h45Brilhante. Acabei de começar a usar ShortPixel. bem projetado, compatível com plug-ins (Ativar substituição de mídia) e econômico.
Eu realmente adoraria ver um artigo integrando o S3 Offload com o Beaver. O cache do plugin bb torna isso particularmente difícil.
em 29 de março de 2018 às 9h02Eu uso o EWWW. Para sites com toneladas de imagens, licencie ilimitadamente com CDN. Para 10 de cada vez, use https://ewww.io/online-image-optimizer/
em 29 de março de 2018 às 10h51Eu testei todos os plug-ins de compactação/otimização de imagens do WordPress para meus mais de 20 sites WordPress, alguns dos quais com conteúdo gerado pelo usuário (ou seja, imagens grandes) e para mim, a melhor opção, de longe, é o ShortPixel. Descobri que sua compactação tem a melhor relação qualidade/tamanho da categoria e seu modelo de preços é justo. Além disso, não estou limitado pelo tamanho do arquivo e eles são totalmente otimizados, mesmo se você estiver no plano gratuito.
em 31 de março de 2018 às 23h05Tenho usado o TinyPNG durante todo esse tempo, eles parecem inchar a imagem após o upload e depois compactá-la (posso estar errado, mas vejo um tamanho de imagem mais pesado após o upload do que o tamanho real). Nunca soube que o ImageOptim parece muito útil ferramenta.
em 4 de abril de 2018 às 5h58 Bela revisão. Antes de fazer upload, eu uso webresizer.com como alternativa ao TinyPNG. Eles proporcionam um bom controle do produto final. Eles têm um redimensionador/compressor em massa, mas é melhor usado com várias imagens que devem ter o mesmo tamanho.
Em nosso site, descobri que o Imagify funciona bem.
em 10 de abril de 2018 às 10h17Esses serviços são ótimos, obrigado por compilar esta lista.
Quero ressaltar que se você já usa o Photoshop, também pode fazer isso através do Photoshop. Em vez de “Salvar como…”, vá para:
Arquivo -> Exportar -> Salvar para Web (Legado)
Em seguida, na predefinição, mude para compactação JPEG High, JPEG Medium ou JPEG Low. Em seguida, clique em “salvar”. Isso alcança o mesmo resultado que os serviços acima.
em 10 de abril de 2018 às 15h11Surpreendentemente, muitas dessas ferramentas e serviços são melhores para reduzir o tamanho do arquivo do que o Photoshop.
em 2 de maio de 2018 às 3h07Faço o mesmo com o Photoshop, mas acredito que o ImageOptim e o Smush reduzirão ainda mais o tamanho do arquivo sem perda perceptível de qualidade.
em 11 de abril de 2018 às 7h56Acho que as pessoas deveriam considerar ferramentas de otimização de conteúdo como IMGIX e Cloudinary com muito mais seriedade.
em 15 de abril de 2018 às 8h56É melhor você usar o compressman! Não usa internet e é apenas site
em 19 de abril de 2018 às 6h52Tendemos a usar Smush e Short Pixel para nossos clientes. Pixel curto oferece melhor compactação, mas Smush também é bom, configure e esqueça.
em 23 de abril de 2018 às 7h25Sou um grande fã de usar o ImageOptim no OSX! Eu uso em todas as imagens que envio para a web, independentemente da plataforma em que serão exibidas!
em 26 de abril de 2018 às 19h10Em relação às alterações nas configurações do ImageOptim, você deixa o nível de Otimização no padrão, Extra?
em 30 de abril de 2018 às 11h34Na maioria dos casos, sim.
em 26 de abril de 2018 às 21h56Estou surpreso que ninguém tenha mencionado Kraken.io (https://kraken.io/). Ele pode ser usado em sua interface web ou como um plugin para WordPress.
em 3 de maio de 2018 às 10h07Eu uso o Chromebook e parece uma boa alternativa. Tenho usado http://guetzliconverter.linuxadm.hu/
em 29 de abril de 2018 às 6h06A melhor biblioteca que encontrei para PNG é PNGQuant, mas tive dificuldade para fazê-la funcionar localmente. Agora executo todas as minhas imagens em http://compresspng.com/ que usa PNGQuant. Grande melhoria em relação ao ImageOptim.
em 2 de maio de 2018 às 3h05Usei o ImageOptim e a versão gratuita do Smush. Eu adoro especialmente o Smush. Há algum outro benefício em atualizar para a versão paga além de poder otimizar mais imagens por vez?
em 3 de maio de 2018 às 10h04Isso otimiza muito melhor que o Smush, na minha opinião.
em 26 de outubro de 2018 às 2h07Obrigado pela lista .. atualmente usando Smush do WPMU Dev e está funcionando perfeitamente ..
em 21 de novembro de 2018 às 20h01Eu sei que provavelmente estou desatualizado, mas tenho um ótimo controle de compactação de imagens com o Fireworks. Na minha humilde opinião, o melhor programa raster/vetorial que existe.
em 22 de novembro de 2018 às 13h09O Fireworks foi ou é um ótimo programa. Não o uso há anos, no entanto, talvez seja hora de abri-lo novamente para ver o quanto sinto falta dele.
em 18 de dezembro de 2018 às 22h46Obrigado por este bom artigo! Estou usando o plugin Image Optimizer para meu site.
Nosso boletim informativo é escrito pessoalmente e enviado uma vez por mês. Não é nem um pouco chato ou spam.
Nós prometemos.
Nosso voto é para Tinypng. Gostamos do plugin que pode ser otimizado conforme você faz upload para o seu site – gostamos do Panda também! Também daremos uma olhada no ImageOptim quando usarmos o Mac. Ótima lista, pessoal.