De acordo com os fundamentos da web do Google:
A otimização de imagem é uma arte e uma ciência.A otimização de imagem é uma arte, porque não existe a melhor solução específica para a compressão de uma única imagem, e a razão pela qual a otimização de imagem é uma ciência é porque muitas são bem desenvolvidas. Excelentes métodos e algoritmos podem reduzir significativamente o tamanho da imagem. Para encontrar as configurações ideais para uma imagem, é necessária uma análise cuidadosa em várias dimensões: recursos de formatação, conteúdo de dados codificados, tamanho de pixel etc.
1. Formato da imagem
As palavras que ouvimos frequentemente incluem diagramas vetoriais, diagramas escalares, SVG, compactação com perda, compactação sem perda, etc. Primeiro, explicamos as características de vários formatos de imagem
| Formatar | Método de compressão | Transparência | Animação | Compatível com navegador | Adaptar-se à cena |
| JPEG | Compressão com perdas | Não suportado | Não suportado | Todos | Cores e formas complexas, especialmente fotos |
| GIF | Compressão sem perdas | Suporte | Suporte | Todos | Cores simples, animação |
| PNG8 | Compressão sem perdas | 256 cores + suporte transparente | Não suportado | Todos | Quando a transparência é necessária |
| PNG24 | Compressão sem perdas | 2 ^ 24 cores + suporte transparente | Não suportado | Todos | Quando a transparência é necessária |
| PNG32 | Compressão sem perdas | 2 ^ 24 cores + suporte transparente | Não suportado | Todos | Quando a transparência é necessária |
| APNG | Compressão sem perdas | Suporte | Suporte | Firefox Safari iOS Safari | Animações que exigem efeitos translúcidos |
| Webp | Melhor compactação, compactação com perdas | Suporte | Suporte | Há problemas de compatibilidade no ios webview, Chrome Opera Android Navegador Android Chrome, Android todos | Plataforma de navegador previsível para cores e formas complexas |
| Svg | Compactação sem perdas, ilustração vetorial | Suporte | Suporte | Todos (IE8 e acima) | Gráficos simples, precisa de uma boa experiência de zoom, precisa controlar dinamicamente os efeitos de imagem |
Entre eles, os formatos APNG e WebP aparecem atrasados e não foram adotados pelo padrão da Web. Eles são adotados apenas quando a plataforma ou o ambiente específico do navegador pode ser previsto, embora possam ser degradados em ambientes não suportados com melhores funções. O processo de seleção é o seguinte:
Fotos ricas, JPG é uma escolha universal
- A estrutura do olho humano é muito adequada para visualizar fotos compactadas em JPG, que podem ser completamente ignoradas e preencher os detalhes no cérebro
- Os detalhes retidos pelo JPG quando a taxa de compactação não é alta são bons
- O WebP pode reduzir o volume em 30% em comparação ao JPG, mas a compatibilidade atual é baixa
Se você precisar de animação mais geral, o GIF é a única opção disponível
- O GIF suporta uma faixa de cores de 256 cores e suporta apenas transparência total / opacidade total
- O GIF pode exibir cores incompletas e bordas irregulares ao exibir animações coloridas
Se a imagem for composta de figuras geométricas padrão ou você precisar usar o programa para controlar dinamicamente seus efeitos de exibição, considere o formato SVG
- SVG é um gráfico vetorial definido usando XML, e as imagens geradas podem ser dimensionadas livremente em várias resoluções
- No SVG, você pode transformar livremente os efeitos de imagem por meio de JavaScript e outras interfaces, além de concluir a rotação livre, o movimento e a mudança de cor de alguns dos elementos.
Se você precisar exibir claramente imagens com cores ricas, PNG é melhor
- O PNG-8 pode exibir 256 cores, mas pode suportar 256 níveis de transparência ao mesmo tempo, portanto, cenários com menos cores, mas que exigem translucidez (como grandes expressões de animação WeChat), podem considerar PNG-8
- PNG-24 pode exibir cores verdadeiras, mas não suporta imagens transparentes e coloridas (como capturas de tela, desenhos de design de interface)
- PNG-32 pode exibir cores reais, suportando 256 níveis de transparência, o melhor efeito, mas o maior tamanho
Seleção de tamanho de imagem
Precisamos distinguir entre diferentes tipos de pixels: pixels CSS e pixels do dispositivo. Um pixel CSS pode conter vários pixels do dispositivo. Para fotos, você precisa usar uma imagem de alta resolução em uma tela de alto DPI. Se estamos falando de Retina, você precisa de uma imagem com 2 vezes a resolução (quase 4 vezes o tamanho).
O lugar que podemos controlar é exibir as imagens do tamanho desejado "exatamente". Por exemplo, ajuste o tamanho de uma imagem de 200x200 para 100x100 na tela através do CSS ou do atributo wihth / height do rótulo, e então (200x200) - (100x100) = 30.000 pixels é um desperdício, o que explica o tamanho da imagem 75%!
Usar imagem embutida
Imagem embutida de imagens menores que 4kb ou 8kb para reduzir a perda de http
Sprite
Coloque as fotos usadas na mesma página em uma foto grande, exiba fotos diferentes através do posicionamento CSS, reduza o número de solicitações http
Otimização automática
Otimização automática: CDN
Eu uso a CDN para otimizar automaticamente as imagens.Eu raramente vejo esses serviços em provedores estrangeiros de CDN.Em vez disso, os dois novatos domésticos, CDN Qi Niu e Huan Pai , fizeram muito trabalho nesse sentido. Seu método de trabalho é que os parâmetros de URL para solicitar imagens da CDN incluam os parâmetros de processamento de imagem (formato, largura, altura etc.), e o servidor da CDN gera as imagens necessárias de acordo com a solicitação e as envia para o navegador do usuário.
A interface de processamento de imagem do Qiniu Cloud Storage é extremamente rica, cobrindo a maioria das operações básicas de fotos, como:
- Corte de imagem, suporte a vários métodos de corte (como lado longo, lado curto, preenchimento, alongamento etc.)
- A conversão de formato de imagem, suporta JPG, GIF, PNG, WebP, etc., suporta diferentes taxas de compactação de imagem
- Processamento de imagem, marca d'água de imagem de suporte, desfoque Gaussiano, processamento de centro de gravidade, etc.
O uso da interface de processamento de imagem do Qiniu Cloud Storage não é complicado, por exemplo, a seguinte imagem original:
Solicitamos o seguinte URL, cortamos a parte do meio e diminuímos o zoom para gerar uma miniatura de 200 x 200:
http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200
Otimização automática: Grunt / Gulp / webpck
Aqui está um componente Grunt para otimização de imagem: grunt-image . O trabalho repetitivo dos engenheiros de front-end, como mesclar recursos estáticos, compactar arquivos JS e CSS, compilar SASS etc., pode ser concluído em lotes usando ferramentas automatizadas como Grunt, como é a otimização de imagem.
De acordo com a introdução do autor, suas ferramentas de otimização de imagem carregadas internamente incluem pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle e svgo. Suporte a otimização automática em lote de PNG, JPG, SVG e GIF, a velocidade também é boa, o método de configuração suporta otimização de imagem única e otimização completa do catálogo
Otimização automática: Google PageSpeed
O estilo de trabalho do Google é relativamente completo. Se você vê qual software não está funcionando, pode instalá-lo em uma nova versão ou simplesmente reescrevê-lo. Para otimização da Web, o Google lançou o módulo do servidor Google PageSpeed , que pode ser carregado no apache ou ngnix. Faça as configurações no arquivo de configuração para otimização automatizada. Existem opções relacionadas para conversão de formato de imagem, otimização de imagem e até LazyLoad de imagem. Esta parte da exposição será muito longa. Consulte o manual do Google para estudantes interessados.
