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


138

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:

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:

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?


Parece que o Pagespeed agora está exigindo compactação com perdas. Antes que os resultados dissessem: "A compactação sem perdas de xxx.jpg poderia economizar xx kb (redução de xx%)". Agora, ele diz "A compactação xxx.jpg poderia economizar xx kb (redução de xx%)" Importante: o Google parece solicitar compactar com perdas apenas as imagens menores (miniaturas etc.). Alguém pode descobrir quais ferramentas e parâmetros de compactação com perda o Google está usando?
Martin

Respostas:


83

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


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.


3
Especificamente reter_color_profile (false) para JPEGs pode ser uma má ideia. À medida que as exibições de gama de cores estendidas se tornam mais comuns, uma instrução de reprodução de cores claramente definida se torna ambígua. Se a imagem original tiver sido codificada por sRGB, isso ainda funcionará em alguns navegadores (Safari, Firefox com modificação about: config), enquanto em outros, apenas imagens realmente marcadas podem ser gerenciadas por cores (Firefox padrão). Dos navegadores curso sem qualquer cor capacidades de gestão não se importa ...
CO

2
Estou correndo optipng file.png -o7e não estou chegando nem perto do que o Google mostra. Talvez eles convertam para SVG quando possível?
Nateowami 04/07

@Nateowami Eu tive o mesmo problema ... para alguns PNGs, o Google faz melhor do que optar por -o7. Para isso, você pode baixar as imagens otimizadas no próprio site da velocidade da página.
Chrisvdb

46

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.


29

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


1
Obrigado pelo link. Acho que estou procurando realmente aprender mais sobre que tipos de redundâncias existem nos arquivos de imagem que podem ser removidos se o tamanho do arquivo for sua principal preocupação. Eu sei que as informações estão disponíveis na Web, eu só queria ter um bom lugar para agrupá-las aqui no SO.
de Drew Noakes

Eu uso uma ferramenta de compilação personalizada que compacta imagens com optipng e pngcrush e seleciona o arquivo menor. Ainda assim, o Page Speed ​​reclama de imagens não ideais. Então, qual ferramenta eles realmente usam?
user123444555621

@ Pumbaa80 Você também pode tentar advsys.net/ken/util/pngout.htm (que diz especificamente que às vezes pode ter tamanhos menores que o optipng e o pngcrush).
22412 Amber

Acabei de descobrir que o Page Speed ​​realmente usa optipng, com um invólucro personalizado que determina as melhores opções de configuração. @Amber Não é uma opção, eu não estou usando o Windows;)
user123444555621

15

É 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


A única resposta que tenta responder à pergunta real que o O / P realmente fez, em vez da pergunta diferente "como posso comprimir minhas imagens ao máximo"? lol
toddmo 22/09/2015

13

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


Obrigado por compartilhar isso!
Rotaercz 27/08

1
Se você usa o IIS, o PageSpeed ​​foi portado recentemente para o Windows e executa essas mesmas otimizações automaticamente. iispeed.com Para melhor redução embora sem qualquer perda, eu estive em massa converter diretórios inteiros de JPEGs usando JPEGmini jpegmini.com
James Moberg

Parece que não há mais PageSpeed ​​Extension for Firebug.
23916 Stephan Schielke

10

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.


2
Alguma alternativa para o Windows?
Mathias Lykkegaard Lorenzen

2

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!


1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" se você tiver espaços no seu nome de arquivo
Ned Martin

0

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.


0

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!

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.