Como funciona a compactação de imagem sem perda de velocidade da página do Google?

Quando você executa o plugin PageSpeed ​​do Google para Firebug / Firefox em um site, ele sugere casos em que uma imagem pode ser compactada sem perdas e fornece um link para fazer o download dessa imagem menor.

Por exemplo:

• A compactação sem perdas http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg poderia economizar 33,5 KiB (redução de 85%).
• A compactação sem perdas http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg poderia economizar 18,5 KiB (redução de 77%).
• A compactação sem perdas de http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png pode economizar 262B (redução de 11%).
• A compactação sem perdas http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png pode economizar 91B (redução de 51%).
• A compactação sem perdas http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm pode economizar 61B (redução de 5%).

Isso se aplica aos tipos de arquivos JPG e PNG (não testei GIF ou outros.)

Observe também as miniaturas do Flickr (todas essas imagens têm 75x75 pixels). São algumas economias bastante grandes. Se isso é realmente tão bom, por que o Yahoo não está aplicando esse servidor a toda a biblioteca e reduzindo as cargas de armazenamento e largura de banda?

Até Stackoverflow.com representa uma economia muito pequena:

• A compactação sem perdas de http://sstatic.net/stackoverflow/img/sprites.png?v=3 poderia economizar 1,7 KiB (redução de 10%).
• A compactação sem perdas de http://sstatic.net/stackoverflow/img/tag-chrome.png pode economizar 11B (redução de 1%).

Eu vi o PageSpeed ​​sugerir economias bastante decentes em arquivos PNG que eu criei usando o recurso 'Salvar para a Web' do Photoshop.

Então, minha pergunta é: que mudanças elas estão fazendo nas imagens para reduzi-las tanto? Acho que existem respostas diferentes para tipos de arquivos diferentes. Isso é realmente sem perdas para JPGs? E como eles podem vencer o Photoshop? Devo suspeitar um pouco disso?

Se você está realmente interessado nos detalhes técnicos, confira o código-fonte:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

Para arquivos PNG, eles usam o OptiPNG com alguma abordagem de tentativa e erro

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

Quando todas as quatro combinações são aplicadas, o menor resultado é mantido. Simples assim.

(NB: A optipngferramenta de linha de comando também faz isso se você fornecer-o 2 através de-o 7 )

Para arquivos JPEG, eles usam jpeglib com as seguintes opções:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

Da mesma forma, o WEBP é compactado usando a libwebp com estas opções:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

Há também o image_converter.cc, que é usado para converter sem perdas no menor formato.

Eu uso jpegoptimpara otimizar arquivos JPG eoptipng otimizar arquivos PNG.

Se você estiver bashativado, o comando para otimizar sem perdas todos os JPGs em um diretório (recursivamente) é:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Você pode adicionar -m[%]a jpegoptimimagens JPG compactadas com perda, por exemplo:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Para otimizar todos os PNGs em um diretório:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2é o nível de otimização padrão, você pode alterar isso de o2para o7. Observe que um nível mais alto de otimização significa maior tempo de processamento.

Dê uma olhada em http://code.google.com/speed/page-speed/docs/payload.html#CompressImages, que descreve algumas das técnicas / ferramentas.

É uma questão de trocar o tempo de CPU do codificador por eficiência de compactação. Compactação é uma pesquisa por representações mais curtas e, se você pesquisar mais, encontrará outras mais curtas.

Há também uma questão de usar ao máximo os recursos de formato de imagem, por exemplo, PNG8 + a em vez de PNG24 + a, tabelas Huffman otimizadas em JPEG, etc.

O Photoshop não se esforça muito para fazer isso ao salvar imagens para a Web, portanto, não é de surpreender que qualquer ferramenta o supere.

Vejo

• ImageOptim (sem perdas) e
• ImageAlpha (com perdas) para arquivos PNG menores ( descrição de alto nível de como funciona ) e
• JPEGmini / MozJPEG (com perdas) para um melhor compressor JPEG.

Para replicar os resultados de compactação JPG do PageSpeed ​​no Windows:

Consegui obter exatamente os mesmos resultados de compactação que o PageSpeed ​​usando a versão do jpegtran para Windows, que você pode obter em www.jpegclub.org/jpegtran . Executei o executável usando o prompt do DOS (use Iniciar> CMD). Para obter exatamente o mesmo tamanho de arquivo (até o byte) da compactação do PageSpeed, especifiquei a otimização do Huffman da seguinte maneira:

jpegtran -optimize source_filename.jpg output_filename.jpg

Para obter mais ajuda sobre as opções de compactação, no prompt de comando, digite: jpegtran

Ou, para usar as imagens geradas automaticamente na guia Velocidade da página no Firebug:

Pude seguir os conselhos de Pumbaa80 para obter acesso aos arquivos otimizados do PageSpeed. Espero que a captura de tela aqui forneça mais clareza ao ambiente do FireFox. (Mas não consegui acessar uma versão local desses arquivos otimizados no Chrome.)

E para limpar os nomes de arquivos Messy PageSpeed ​​usando o Adobe Bridge e expressões regulares:

Embora o PageSpeed ​​no FireFox tenha sido capaz de gerar arquivos de imagem otimizados para mim, também mudou seus nomes, transformando-os em nomes simples, como:

nice_picture.jpg

para dentro

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Eu descobri que isso parece ser uma reclamação comum. Como não queria renomear todas as minhas fotos manualmente, usei a ferramenta Renomear do Adobe Bridge, juntamente com uma Expressão regular. Você pode usar outros comandos / ferramentas de renomeação que aceitem Expressões regulares, mas suspeito que o Adobe Bridge esteja prontamente disponível para a maioria de nós trabalhando com problemas de velocidade de página!

1. Iniciar o Adobe Bridge
2. Selecione todos os arquivos (usando o Controle A)
3. Selecione Ferramentas> Renomear em lote (ou Control Shift R)
4. No campo Predefinição, selecione "Substituição de sequência". Os campos Novos nomes de arquivos agora devem exibir "Substituição de string", seguido de "Nome do arquivo original"
5. Ative a caixa de seleção chamada "Usar expressão regular"

6. No campo "Localizar", digite a Expressão regular (que selecionará todos os caracteres começando no separador de sublinhado mais à direita):

   _ (?!. * _) (. *) \. jpg $

7. No campo "Substituir por", digite:

   .jpg

8. Opcionalmente, clique no botão Visualizar para ver os resultados da renomeação do lote proposto e feche

9. Clique no botão Renomear

Observe que após o processamento, o Bridge desmarca os arquivos que não foram afetados. Se você deseja limpar todos os seus arquivos .png, selecione novamente todas as imagens e modifique a configuração acima (para "png" em vez de "jpg"). Você também pode salvar a configuração acima como uma predefinição, como "Limpar imagens jpg da velocidade da página", para poder limpar os nomes de arquivos rapidamente no futuro.

Captura de tela / solução de problemas de configuração

Se você tiver problemas, é possível que alguns navegadores não mostrem a expressão RegEx acima corretamente (culpe meus caracteres de escape). Portanto, para obter uma captura de tela da configuração (junto com estas instruções), consulte:

Como usar a ferramenta Renomear em lote do Adobe Bridge para limpar imagens de velocidade de página otimizada com nomes de arquivos confusos

Na minha opinião, a melhor opção que lida com a maioria dos formatos de imagem de maneira eficaz é a imagem . Ele efetivamente utiliza optipng, pngcrush, advpng e jpegoptim com base no formato da imagem e oferece uma compactação quase perfeita sem perdas.

A implementação é bastante fácil se você estiver usando uma linha de comando.

sudo apt-get install trimage    
trimage -d images/*

e pronto! :-)
Além disso, você encontrará uma interface bastante simples para fazê-lo manualmente.

Há um script em lote muito útil que otimiza recursivamente as imagens sob uma pasta usando o OptiPNG ( deste blog ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

UMA LINHA!

Se você estiver procurando por processamento em lote, lembre-se de que a imagem reclama se você não tiver o Xserver disponível. Nesse caso, basta escrever um script bash ou php para fazer algo como

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Altere as opções para atender às suas necessidades.

Para janelas, existem várias interfaces de arrastar e soltar para facilitar o acesso.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

Para arquivos PNG, encontrei este para minha diversão, aparentemente três ferramentas diferentes envolvidas neste GIU. Basta arrastar e soltar e ele faz isso por você.

https://pnggauntlet.com/

Porém, leva tempo, tente compactar um arquivo png de 1 MB - fiquei impressionado com a quantidade de CPU nessa comparação de compactação, que deve ser o que está acontecendo aqui. Parece que a imagem está comprimida de 100 maneiras e a melhor vence: D

Com relação à compactação JPG, sinto que é arriscado retirar perfis de cores e todas as informações extras - no entanto - se todo mundo está fazendo isso - é o padrão comercial, então eu mesmo fiz: D

Eu salvei 113 MB em 5500 arquivos em uma instalação WP hoje, então definitivamente vale a pena!