Autor do livro eletrônico - Eddie Osmani, Gerente de desenvolvimento do Google Chrome

tl; dr

A compactação de imagem sempre deve ser automatizada.

A otimização gráfica deve ser automatizada. É fácil esquecê-lo, as recomendações mudam e o próprio conteúdo pode facilmente passar pela linha de montagem. Para automatizar a compilação, use imagemin ou libvips . Existem muitos outros.

A maioria das CDNs (como a Akamai ) e soluções de terceiros como Cloudinary , imgix , Fastly Image Optimizer , Instart Logic SmartVision e ImageOptim API oferecem soluções automatizadas abrangentes para otimização de imagens.

Você gastará tempo lendo artigos e configurando-os, o que é mais caro do que pagar por seus serviços (o Cloudinary tem uma tarifa gratuita ). Mas se você ainda não deseja terceirizar seu trabalho por razões de custo ou por causa de latência adicional, escolha as opções de código aberto acima. Os projetos Imageflow ou Thumbor oferecem uma alternativa em sua própria hospedagem.

Todo mundo precisa compactar imagens com eficiência

No mínimo, use o ImageOptim . Reduz significativamente o tamanho, mantendo a qualidade visual. Existem versões para Windows e Linux.

Uma abordagem mais completa: execute arquivos JPEG no MozJPEG (para qualidade de conteúdo da web q=80 ou inferior é aceitável) e considere o suporte ao JPEG progressivo . Passe arquivos PNG pelo pngquant e SVG pelo SVGO . Especifique explicitamente a limpeza de metadados (- --strip para pngquant) para evitar o inchaço do arquivo. Em vez de GIFs gigantes e loucos, dê aos usuários vídeos H.264 (ou WebM para Chrome, Firefox e Opera)! Se você não puder pagar, pelo menos use Giflossy . Quando for possível gastar alguns ciclos de CPU, e você precisar de uma imagem de melhor qualidade e estiver pronto para aguentar um longo tempo de codificação, tente o Guetzli .

Alguns navegadores anunciam suporte para formatos de imagem através do cabeçalho Aceitar. Isso pode ser usado ao escolher um formato para emissão: por exemplo, o formato WebP para navegadores baseados em Blink, como o Chrome, e a opção JPEG / PNG para outros navegadores.

A compactação sempre pode ser melhorada. Existem ferramentas para gerar e emitir srcset . Nos navegadores baseados em Blink, a seleção de recursos é automatizada usando dicas do cliente - e você economizará tráfego nos usuários que especificaram a opção "salvar dados" no navegador através da dica Salvar dados .

Quanto menor o tamanho das imagens, mais conveniente é para os usuários - especialmente com telefones celulares. Neste artigo, examinaremos maneiras de compactar gráficos usando métodos modernos com impacto mínimo na qualidade.

Conteúdo

1. Introdução

Os gráficos continuam sendo a principal causa das páginas da web sobre obesidade

As imagens compõem uma grande parte do tráfego da Internet. De acordo com o arquivo HTTP , 60% das páginas da Web são gráficos JPEG, PNG e GIF. Em julho de 2017, as imagens tinham 1,7 MB em uma página da web média de 3,0 MB.

O experimento de Tammy Everts provou que adicionar imagens a uma página ou ampliar imagens existentes aumenta a taxa de conversão (porcentagem de visitantes que se tornam clientes - aprox. Por.). Portanto, as fotos não vão a lugar algum - é por isso que é importante investir em uma estratégia eficaz para compactá-las.

Um estudo de 2016 da Soasta / Google mostrou que as ilustrações são o segundo preditor de conversão e as páginas efetivas têm 38% menos imagens.

A otimização da imagem envolve várias medidas. A escolha depende de qual perda de qualidade é considerada aceitável.

Otimização: escolha o formato correto, comprima suavemente e priorize o carregamento de imagens diferentes

As otimizações típicas incluem compactação, renderização inteligente de imagens com base no tamanho usando as <picture>/<img srcset> e redimensionamento.

De acordo com o HTTP Archive , no percentil 95 (na função de distribuição cumulativa), cada imagem pode ser reduzida em 30 KB!

Ainda temos muitas imagens que podem ser otimizadas.

O freeware ImageOptim reduz o tamanho dos gráficos com métodos modernos de compactação e remove metadados desnecessários EXIF

Se você é um designer, também existe o plug-in ImageOptim para Sketch , que otimiza os recursos ao exportar. Eu descobri que economiza uma tonelada de tempo.

Como sei se as imagens precisam ser otimizadas?

Audite seu site usando o WebPageTest.org .

A seção Compactar imagens do relatório WebPageTest lista imagens que podem ser compactadas com mais eficiência, enquanto avalia possíveis ganhos no tamanho do arquivo

O Lighthouse também realiza auditorias de desempenho, incluindo a verificação da otimização da imagem. Ele mostra imagens que podem ser compactadas com mais força e que podem ser colocadas em carregamento lento.

A partir do Chrome 60, esse serviço funciona no painel de auditoria do Chrome DevTools:

A Lighthouse realiza uma auditoria visando a produtividade, práticas recomendadas ou recursos avançados de aplicativos da Web (opcional)

Você pode conhecer outras ferramentas de auditoria, como o PageSpeed Insights e o Teste de velocidade do site da Cloudinary, que inclui auditoria detalhada de imagens.

Como escolher um formato?

Como Ilya Grigorik observou em seu excelente guia para otimização de imagens , o "formato correto" combina o resultado visual desejado e os requisitos funcionais. Você tem gráficos de varredura ou vetoriais?

Os gráficos de varredura codificam os valores de cada pixel em uma grade retangular de pixels. Eles são independentes da resolução ou escala. WebP ou formatos amplamente suportados, como JPEG ou PNG, podem fazer esse tipo de gráfico. Os gráficos de varredura são usados onde o fotorrealismo é necessário. Guetzli, MozJPEG e outras ferramentas mencionadas são adequadas para gráficos raster.

Os gráficos vetoriais usam pontos, linhas e polígonos para representar imagens com formas geométricas simples (como logotipos). Oferece alta resolução e zoom. Para esta opção, formatos como SVG são mais adequados.

Escolher o formato errado custará muito. Mude o formato com cuidado, realizando experimentos com possíveis economias em diferentes formatos.

Jeremy Wagner em sua palestra destacou as vantagens e desvantagens que devem ser consideradas ao avaliar diferentes formatos no processo de otimização.

JPEG modesto

JPEG é provavelmente o formato gráfico mais popular do mundo. Conforme observado anteriormente, 45% das imagens nos sites no arquivo HTTP são imagens JPEG. Seu telefone, câmera digital, webcam antiga - todos eles geralmente suportam esse codec. É muito antigo, é utilizado desde 1992. Durante esse período, uma grande quantidade de pesquisas foi feita sobre como melhorar a compactação JPEG.

JPEG é um algoritmo de compactação com perdas que descarta informações "extras" para economizar espaço. O desafio é maximizar a precisão visual enquanto minimiza o tamanho dos arquivos.

Que qualidade de imagem é aceitável no seu caso?

Formatos como JPEG são mais adequados para fotos ou imagens com muita cor. A maioria das ferramentas de otimização permite escolher um nível de compactação aceitável: uma compactação mais forte reduz o tamanho dos arquivos, mas pode trazer artefatos: halo ou bloqueio.

Os artefatos visíveis de compactação JPEG aumentam à medida que você passa do melhor para o pior. Observe que a qualidade da imagem em diferentes ferramentas pode variar bastante.

Ao escolher um nível de compactação, considere a qualidade necessária para as imagens:

O melhor : quando a qualidade é mais importante que o tamanho do arquivo. Isso pode ser devido ao fato de a imagem ocupar um lugar de destaque no design ou ser exibida em resolução total.
Bom : quando você pensa em economizar tráfego, mas não quer afetar muito a qualidade da imagem. Ainda assim, a qualidade das ilustrações é importante para os usuários.
Baixa : quando você se preocupa com o tráfego mínimo e suporta a degradação da imagem. Esse perfil é adequado para redes com pouca cobertura e canais finos.
Menor : economizar largura de banda é da maior importância. Os usuários concordam com uma qualidade muito baixa para carregamento mais rápido da página.

Em seguida, vamos falar sobre os modos de compactação JPEG que afetam bastante o resultado.

Nota: às vezes podemos superestimar a qualidade da imagem que os usuários precisam. A qualidade pode ser considerada como um desvio da fonte ideal. Este é um indicador subjetivo.

Modos de compactação JPEG

O formato JPEG possui vários modos de compactação diferentes. Três populares: compressão básica (sequencial), JPEG progressiva (PJPEG) e sem perdas.

Qual é a diferença entre JPEG básico (ou seqüencial) e progressivo?

O JPEG básico (o modo padrão na maioria dos editores e otimizadores) codifica e decodifica de maneira relativamente simples: de cima para baixo. Quando um JPEG básico é carregado em uma conexão lenta ou instável, o usuário primeiro vê a parte superior da imagem. O modo de compactação JPEG sem perdas é semelhante ao básico, apenas com uma taxa de compactação mais baixa.

O JPEG básico (JPEG de linha de base) é carregado de cima para baixo e o JPEG progressivo é baixado de embaçado para nítido

O JPEG progressivo divide a imagem em uma série de passes. A primeira passagem mostra a imagem na forma embaçada e de baixa qualidade, e as passagens subsequentes melhoram gradualmente a qualidade. Cada passe aumenta o nível de detalhe. No final, uma imagem completa é criada.

O JPEG básico carrega a imagem de cima para baixo. O PJPEG primeiro mostra uma imagem borrada e depois aumenta a resolução. Pat Minan desenvolveu uma ferramenta interativa para testar e estudar arquivos JPEG progressivos

A otimização do JPEG sem perdas é obtida removendo os cabeçalhos EXIF das câmeras e editores digitais, otimizando as tabelas Huffman e digitalizando novamente a imagem. Ferramentas como o jpegtran fornecem compactação sem perdas, reconstruindo dados compactados sem comprometer a qualidade da imagem. jpegrescan , jpegoptim e mozjpeg (que veremos em breve) também suportam compactação JPEG sem perdas.

Benefícios JPEG progressivos

A capacidade do PJPEG de exibir visualizações no momento da inicialização melhora o desempenho - parece aos usuários que a imagem carrega mais rapidamente do que os gráficos padrão.

Em conexões 3G lentas, isso permite que você veja a imagem aproximadamente quando apenas parte do arquivo é recebida - e decide se deve esperar o download completo ou não. Isso pode ser mais conveniente do que carregar a imagem de cima para baixo, como no JPEG básico.

Em 2015, o Facebook mudou para o PJPEG (para seu aplicativo iOS) e o tráfego diminuiu 10%. Eles foram capazes de exibir uma imagem de boa qualidade 15% mais rápida do que antes, otimizando o tempo de carregamento percebido, como mostrado na figura acima

O PJPEG pode reduzir o tamanho do arquivo em 2 a 10% em comparação com o JPEG básico / simples para imagens com mais de 10 KB. Uma taxa de compactação mais alta é alcançada devido ao fato de que a cada passo uma tabela Huffman separada pode ser compilada. Os codificadores JPEG modernos (por exemplo, libjpeg-turbo , MozJPEG, etc.) usam a flexibilidade do PJPEG para uma melhor compactação de dados.

Nota: por que o PJPEG comprime melhor? Como os blocos JPEG básicos são codificados um de cada vez, e no PJPEG, os coeficientes discretos de transformação de cosseno de vários blocos podem ser codificados juntos, o que leva a uma melhor compactação.

Quem usa JPEG progressivo na produção?

O Twitter.com produz JPEGs progressivos com um nível básico de qualidade de 85%. Eles mediram o atraso subjetivo percebido pelo usuário (tempo até a primeira passagem e o tempo total de download) e decidiram que o PJPEG geralmente era adequado com base na qualidade da velocidade de compactação, codificação e decodificação.
O Facebook produz JPEGs progressivos no aplicativo iOS . Isso reduziu o tráfego em 10% e acelerou a emissão de imagens de "boa qualidade" em 15%.
O Yelp mudou para JPEG progressivo . Essa é uma das medidas que reduziu o tamanho da imagem em cerca de 4,5%. Ele caiu 13,8% devido ao MozJPEG.

Muitos outros sites com um grande número de arquivos de imagem, como o Pinterest , também usam JPEG progressivo na produção.

No Pinterest, as imagens são codificadas apenas em JPEG progressivo. É mais conveniente para os usuários quando a imagem aparece gradualmente

Desvantagens progressivas do JPEG

A decodificação PJPEG é mais lenta que o JPEG básico - às vezes três vezes mais lenta. Em máquinas de mesa com processadores poderosos, isso não é tão importante quanto em dispositivos móveis com recursos limitados. A exibição de camadas incompletas requer trabalho, pois você decodifica a imagem várias vezes. Essas passagens múltiplas consomem ciclos de CPU.

Além disso, as imagens JPEG progressivas nem sempre são menores. A codificação progressiva de imagens muito pequenas (como miniaturas para visualizações) pode aumentar seu tamanho. E, para tais imagens, a renderização em várias passagens geralmente faz pouco sentido.

Portanto, antes de escolher o PJPEG, é recomendável experimentar e encontrar o equilíbrio certo entre o tamanho do arquivo, a latência da rede e o uso da CPU.

Nota: A decodificação de hardware PJPEG (e todo JPEG) pode ser suportada em dispositivos móveis. Isso não reduz o consumo de memória, mas reduz a carga no processador. Nem todos os smartphones Android têm aceleração de hardware, mas em dispositivos de ponta e dispositivos iOS, é.

Alguns usuários podem considerar os downloads progressivos uma desvantagem, pois dificulta a compreensão quando o download da imagem é concluído. Tente avaliar como seu público se relaciona com isso.

Como codificar arquivos JPEG progressivos?

Ferramentas e bibliotecas como ImageMagick , libjpeg , jpegtran , jpeg-recompress e imagemin suportam JPEG progressivo. Se você já configurou um pipeline de otimização, é provável que alterar o método de codificação JPEG não seja um problema:

 const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); gulp.task('images', function () { return gulp.src('images/*.jpg') .pipe(imagemin({ progressive: true })) .pipe(gulp.dest('dist')); });

A maioria dos editores, por padrão, salva no JPEG base.

A maioria dos editores, por padrão, salva no JPEG básico, mas isso pode ser alterado nas configurações. No Photoshop, você precisa selecionar o comando "Arquivo" → "Exportar" → "Salvar para a Web" e indicar o formato JPEG progressivo. O Sketch também suporta a exportação de Progressive JPEG, marcando uma caixa de seleção no menu de exportação JPG

Redução de escala de cores

Nossos olhos percebem menos perda de cor que brilho. Subamostragem de cores ( subamostra de croma) - um tipo de compactação que reduz a precisão das cores devido ao brilho (luma). Isso reduz o tamanho do arquivo para 15 a 17% , sem afetar significativamente a qualidade da imagem. A superamostragem também reduz o uso de memória.

O contraste é responsável pela nitidez da imagem; portanto, o luma é muito importante. As fotografias em preto e branco não têm cor, mas devido ao seu brilho, parecem tão detalhadas quanto as cores. O croma afeta menos a percepção visual.

O JPEG suporta vários tipos de subamostragem: sem subamostragem, horizontal, horizontal + vertical. Aqui está uma ilustração do artigo "JPEG for Crabs", de Frederick Kaiser

Ao discutir subamostras, vários exemplos comuns são geralmente citados: 4: 4: 4, 4: 2: 2 e 4: 2: 0. O que eles são? Suponha que a subamostra esteja no formato A: B: C. Aqui A é o número de pixels em uma linha, para JPEG geralmente é 4, B é o número de cores na primeira linha e C é o número de cores na segunda.

Em 4:4:4 não há compressão, a cor e o brilho são totalmente transmitidos.
Em 4:2:2 meia amostragem horizontal e verticalmente.
Em 4:2:0 , são usadas cores da metade dos pixels da primeira linha.

Nota: jpegtran e cjpeg suportam uma configuração separada de brilho e cor através do sinalizador -sample (por exemplo, -sample 2x1 ). Algumas regras gerais: reduzir a amostragem ( -sample 2x2 ) é excelente para fotos. É melhor desativá-lo (exemplo -sample 1x1 ) para capturas de tela, banners e botões. Finalmente, 2x1 , caso você não tenha certeza de qual opção usar.

Ao reduzir o número de pixels, você pode reduzir significativamente o tamanho dos componentes de cores, reduzindo finalmente o tamanho do arquivo.

80 opções de subamostragem de cores para qualidade JPEG 80

A redução da amostragem de cores é útil para a maioria das imagens, embora haja exceções óbvias: é melhor não usá-la onde os detalhes das cores são tão importantes quanto o brilho (por exemplo, imagens médicas).

Imagens com fontes também sofrerão. As arestas nítidas são mais difíceis de compactar com o JPEG, pois ele foi projetado para lidar melhor com cenas fotográficas com transições mais suaves.

Ao trabalhar com texto , o tutorial Aprendendo JPEG recomenda a aderência à subamostragem 4: 4: 4 (1 × 1)

A propósito: nas especificações JPEG, o método exato de subamostragem de cores não é indicado; portanto, diferentes codificadores / decodificadores agem de maneira diferente. MozJPEG e libjpeg-turbo usam o mesmo método, e versões mais antigas do libjpeg usam o outro, o que adiciona artefatos.

Nota: O Photoshop seleciona automaticamente a subamostragem de cores ao salvar na Web. Se a qualidade estiver definida no intervalo de 51 a 100, a subamostragem não será usada (4: 4: 4). Quando a qualidade é mais baixa, 4: 2: 0 é definido. Esse é um dos motivos pelos quais o tamanho do arquivo diminui drasticamente ao mudar a qualidade de 51 para 50.

Nota: O termo YCbCr é frequentemente referido em uma discussão de subamostragem. Este é um modelo de espaço de cores RGB de correção de gama. Y é o brilho corrigido por gama, Cb é o componente croma do azul e Cr é vermelho. Se você olhar para ExifData, verá YCbCr ao lado dos níveis de amostra.

Para obter mais informações, consulte o artigo "Por que você não está usando subamostragem de cores?"

JPEG superior

Qual é o status atual dos JPEGs na Internet?

tl;dr: . , .

( ) 26 . SSIM ( ) Butteraugli , .

JPEG 2000 (2000) — . : Safari iOS .
JPEG XR (2009) — JPEG JPEG 2000, HDR . , JPEG, /. : Edge, IE .
WebP (2010) — Google . , JPEG, , PNG. . , JPEG. : Chrome, Opera. Safari Firefox .
FLIF (2015) — , PNG, WebP , BPG JPEG 2000 . : , JS- .
HEIF BPG . , :
BPG (2015) — JPEG HEVC ( High Efficiency Video Coding ). , MozJPEG WebP. - . : , JS- .
HEIF (2015) — , HEVC . Apple WWDC , c JPEG HEIF iOS, . : . Safari iOS 11 .

Se você gosta de receber as informações de forma gráfica, você pode apreciar um dos essas ferramentas de comparação visual a alguns dos formatos acima.

Assim, o suporte ao navegador é muito diferente . Para usar qualquer um dos formatos acima, você provavelmente precisará fornecer cópias diferentes para cada um dos navegadores de destino. No Google, vemos certos clientes em potencial da WebP e, em breve, analisaremos mais de perto esse formato.

Você também pode produzir formatos diferentes (por exemplo, WebP, JPEG 2000) com a mesma extensão .jpg (ou qualquer outra), pois o navegador pode escolher o tipo de conteúdo para renderização, independentemente da extensão. Isso permite que você especifique o tipo de conteúdono lado do servidor, sem alterar o documento HTML. Serviços como o Instart Logic adotam essa abordagem.

Em seguida, falaremos sobre situações em que é impossível gerar imagens em diferentes formatos: os otimizadores de JPEG ajudarão aqui .

Otimizadores de JPEG

Os codecs JPEG modernos estão tentando reduzir o tamanho dos arquivos JPEG, preservando a qualidade e a compatibilidade com os navegadores e aplicativos existentes. Eles eliminam a necessidade de usar novos formatos de imagem e fazer alterações no ecossistema. Dois desses codificadores são MozJPEG e Guetzli.

tl; dr: Qual codec JPEG otimizado para usar?

A maioria dos arquivos: MozJPEG
Se a qualidade é importante e você concorda com a codificação contínua: Guetzli
Se você precisar de configuração:

O que é o MozJPEG?

A Mozilla oferece um codificador JPEG atualizado - MozJPEG . Segundo os desenvolvedores, reduz o tamanho dos arquivos JPEG em 10%. Os arquivos compactados MozJPEG são abertos em todos os navegadores, e entre as funções suportadas estão a varredura progressiva, quantização de treliça (exclusão de detalhes com pior compactação) e vários modelos avançados de tabela de quantização que ajudam a criar imagens mais suaves de alta DPI (embora isso seja possível com o ImageMagick, se você estiver pronto para percorrer a selva da configuração XML).

O MozJPEG é suportado no ImageOptim e existe um plugin de imagem personalizável relativamente confiável . Aqui está um exemplo de implementação usando o Gulp:

 const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminMozjpeg = require('imagemin-mozjpeg'); gulp.task('mozjpeg', () => gulp.src('src/*.jpg') .pipe(imagemin([imageminMozjpeg({ quality: 85 })])) .pipe(gulp.dest('dist')) );

MozJPEG: comparando tamanhos de arquivo e classificações de similaridade visual com qualidade diferente.Para

calcular as classificações do SSIM (similaridade estrutural com a imagem original), usei o jpeg-compress do projeto jpeg-archive .

Na minha experiência, o MozJPEG é uma boa opção para compactar imagens na Internet com alta qualidade e reduzir o tamanho do arquivo. Para imagens de tamanho pequeno e médio, o MozJPEG (com qualidade de 80 a 85) reduz os arquivos em 30 a 40%, mantendo o SSIM aceitável e melhorando em 5 a 6% com o jpeg-turbo. Ele codifica mais lentamente que o JPEG básico , mas a diferença não é crítica.

: , MozJPEG , jpeg-recompress . «- » .

Guetzli?

Guetzli é um codec JPEG perceptivo, promissor, mas muito lento, do Google. Ele está tentando encontrar o menor JPEG, perceptivelmente indistinguível do original. O codec realiza uma série de experimentos, oferecendo opções para comparação, e leva em consideração o erro psico-visual de cada opção. A opção com a classificação mais alta é selecionada como resultado final.

Guetzli usa Butteraugli , um modelo baseado na percepção humana (discutido abaixo), para medir as diferenças entre as imagens . Guetzli leva em consideração algumas propriedades da visão humana que não são levadas em consideração por outros codecs JPEG. Por exemplo, existe uma relação entre a quantidade de luz verde visível e a sensibilidade ao azul, para que as mudanças de azul ao redor do verde possam ser codificadas com menos precisão.

: , . JPEG , ó , . . , .

Guetzli alega uma diferença de tamanho de arquivo de 20 a 30% sem reduzir a pontuação de Butteraugli em comparação com outros compressores. A grande falha de Guetzli é sua extrema lentidão, portanto, atualmente é apenas adequado para conteúdo estático. README indica uma grande quantidade de memória consumida: a codificação leva cerca de 1 minuto e 200 MB de RAM por megapixel. Há um bom tópico no GitHub com uma discussão da experiência real com Guetzli. O codec é ideal para otimizar imagens ao criar um site estático, mas é menos adequado para iniciar sob demanda.

Ferramentas como o ImageOptim suportam a otimização do Guetzli (nas versões recentes ).

 const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminGuetzli = require('imagemin-guetzli'); gulp.task('guetzli', () => gulp.src('src/*.jpg') .pipe(imagemin([ imageminGuetzli({ quality: 85 }) ])) .pipe(gulp.dest('dist')) );

A codificação de imagens Guetzli de 3000 × 3000 pixels com níveis diferentes levou quase sete minutos. Isso faz sentido para arquivar fotos de alta resolução.

Guetzli: comparando tamanhos de arquivo e avaliando similaridades visuais com qualidade diferente

Nota: É recomendável executar o Guetzli em imagens de alta qualidade (por exemplo, imagens de origem não compactadas, PNG ou JPEG com cerca de 100% de qualidade). Embora o efeito também ocorra em outras imagens (por exemplo, qualidade JPEG 84 ou inferior), os resultados são piores.

Guetzli gasta muito (muito) muito tempo e fará o cooler da CPU girar completamente, mas vale a pena. Vi vários exemplos em que o tamanho do arquivo foi reduzido em 40%, mantendo a precisão visual. Isso a torna a escolha ideal para arquivar fotos. Nas imagens de tamanho pequeno e médio, há também algumas economias (na faixa de 10 a 15 KB), mas não tão significativas. Ao compactar imagens muito pequenas, Guetzli pode introduzir distorções do tipo fluido.

Para vários casos de uso, você pode estar interessado em comparar o Guetzli com a compactação automática do Cloudinary no estudo de Eric Portis.

Comparação entre MozJPEG e Guetzli

É difícil comparar diferentes codecs JPEG: você precisa avaliar a qualidade e a precisão da imagem compactada, não apenas o tamanho. Como Cornel Lesinsky, especialista em compactação de imagem, aponta, apenas um, e não ambos, benchmark pode levar a conclusões incorretas .

Como são Guetzli e MozJPEG em comparação? Abordagem de Cornell:

O guetzli é adequado para imagens de alta qualidade (a classificação ideal é considerada butteraugli para q = 90 + e para MozJPEG - cerca de q = 75)
Guetzli é muito mais lento (ambos produzem JPEGs padrão, portanto, a decodificação é igualmente rápida, como de costume)
O MozJPEG não seleciona automaticamente uma configuração de qualidade, mas você pode encontrar a melhor qualidade usando uma ferramenta externa, por exemplo, jpeg-archive

Existem vários métodos para determinar a semelhança visual ou perceptiva das imagens compactadas com a fonte. Os estudos costumam usar SSIM (semelhança estrutural). No entanto, Guetzli é otimizado para Butteraugli.

Butteraugli

O sistema Butteraugli determina o momento em que uma pessoa começa a notar a diferença (semelhança psico-visual) entre as duas imagens. Butteraugli não apenas fornece uma estimativa, mas também elabora um mapa espacial do nível de diferenças. Enquanto o SSIM resume todos os erros, Butteraugli procura o máximo.

Neste exemplo, Butteraugli procura um limite mínimo para a qualidade JPEG, para que o usuário não perceba a diferença visual entre as imagens. Isso nos permitiu reduzir o tamanho do arquivo em 65%

Na prática, você determina o nível de qualidade visual e executa várias estratégias de otimização de imagem, observando as estimativas de Butteraugli, antes de escolher um resultado que corresponda ao equilíbrio ideal entre tamanho do arquivo e nível de compactação.

Demorei cerca de 30 minutos para configurar o Butteraugli localmente depois de instalar o Bazel e criar as fontes C ++ para compilar corretamente no Mac. Seu uso é relativamente simples: especifique duas imagens para comparação (fonte e versão compactada) - e obtenha uma estimativa

Qual a diferença entre Butteraugli e outros métodos de avaliação da similaridade visual?

Um dos desenvolvedores de Guetzli diz que Guetzli é melhor em Butteraugli, pior no SSIM, e o MozJPEG é igualmente bom nas duas métricas. Essa é a estratégia que eu uso para otimizar imagens. Estou executando o Butteraugli e um módulo Node como img-ssim para comparar as classificações do SSIM antes / depois do Guetzli e do MozJPEG.

Associação de codificadores?

Como a prática demonstrou, a combinação de Guetzli e MozJPEG sem perdas (jpegtran, não cjpeg, para não descartar o trabalho realizado por Guetzli) pode reduzir ainda mais o tamanho do arquivo em 10-15% (55% no geral), com uma diminuição muito pequena na pontuação do SSIM. Isso requer verificação e análise, mas outros especialistas como Aria Khidayat tentaram e obtiveram o mesmo resultado promissor.

O MozJPEG é um codec conveniente para iniciantes, que comprime arquivos para a Web de forma relativamente rápida e fornece boa qualidade de imagem. Ao mesmo tempo, Guetzli consome muitos recursos e funciona melhor em imagens grandes e de alta qualidade: eu recomendaria essa opção a usuários avançados e profissionais.

O que é o WebP?

WebP é o mais recente formato gráfico do Google, que visa reduzir o tamanho dos arquivos com compactação sem perdas e com perdas, proporcionando qualidade visual aceitável. Suporta canal alfa (transparência) e animação.

O WebP está melhorando: no ano passado, adicionou alguns por cento na compactação sem perdas e com perdas, na velocidade de codificação tornou-se duas vezes mais rápida e a velocidade de decodificação aumentou 10%. O WebP não é uma ferramenta universal, mas sua popularidade está crescendo. Vamos ver o porquê.

WebP: comparando tamanhos de arquivo e avaliando similaridade visual em diferentes níveis de qualidade

Como funciona o webp?

Compressão por perda

Os desenvolvedores dizem que, com a compactação com perdas usando o codec VP8 ou VP9, os arquivos são reduzidos em uma média de 25 a 34% em comparação com o JPEG.

Na faixa de baixa qualidade (de 0 a 50), o WebP tem uma grande vantagem sobre o JPEG, pois erode artefatos de bloqueio feios. Configuração de qualidade média (-m 4 -q 75) - o equilíbrio padrão de velocidade e tamanho do arquivo. Na faixa de alta qualidade (80–99), os benefícios do WebP são mínimos. O WebP é recomendado onde a velocidade é mais importante que a qualidade.

Compressão sem perdas

Os arquivos WebP com compactação sem perdas são 26% menores que os arquivos PNG . O tempo de download comparado ao PNG é reduzido em 3%. No entanto, na Internet, a compactação sem perdas não é comumente usada. Esta opção é mais adequada para armazenamento de arquivo.

Transparência

O WebP possui um canal de transparência de 8 bits com compactação sem perdas de apenas 22% a mais de bytes que o PNG. Ele também suporta transparência RGB com perdas, um recurso exclusivo do WebP.

Metadados

O formato WebP suporta metadados fotográficos EXIF e documentos digitais XMP e também contém o perfil de cores ICC.

O WebP oferece melhor compactação devido a mais utilização da CPU. Em 2013, a compactação WebP era cerca de 10 vezes mais lenta que o JPEG, mas agora a diferença não é tão significativa (algumas imagens podem ser compactadas duas vezes mais devagar). Para imagens estáticas processadas durante o processo de montagem, isso não deve ser um grande problema. As imagens geradas dinamicamente provavelmente causarão uma utilização perceptível da CPU que deve ser considerada.

: WebP JPEG. , JPEG 70% WebP 70%, WebP , .

WebP ?

Muitas grandes empresas usam o WebP na produção para reduzir custos e aumentar a velocidade de carregamento da página.

O Google relatou economias de 30 a 35% no WebP em comparação com outros esquemas de compactação com perdas. O Google produz 43 bilhões de imagens por dia, 26% das quais são compactadas sem perdas. São muitas solicitações e economias significativas. Sem dúvida, aumentará quando os navegadores melhorarem o suporte ao WebP . O Google usa esse formato no Google Play, YouTube e outros sites.

Netflix, Amazon, Quora, Yahoo, Walmart, Ebay, The Guardian, Fortune e USA Today compactam e produzem imagens WebP para navegadores compatíveis. O editor da VoxMedia reduziu o tempo de carregamento da página Verge em 1-3 segundos ao mudar para os usuários do WebP for Chrome. Site500px registrou uma redução no tamanho do arquivo em uma média de 25% com a mesma ou melhor qualidade.

Além do acima, o WebP é usado por outras empresas.

Usando WebP no Google: 43 bilhões de imagens WebP são exibidas todos os dias no YouTube, Google Play, Chrome Data Saver e G +

Como funciona a codificação WebP?

Para imagens estáticas, o WebP é uma alternativa ao JPEG. Na codificação com perdas, há três etapas principais:

Bloqueio de macro - divisão de uma imagem em blocos (macro) de 16 × 16 pixels de brilho e blocos de 8 × 8 pixels de cor. É semelhante à maneira como o JPEG transforma o espaço de cores, dividindo-o em blocos e diminuindo o número de pixels nos canais de cores.

Previsão - para cada sub-bloco 4 × 4, é compilado um modelo de previsão que efetivamente realiza a filtragem. É definido por dois conjuntos de pixels ao redor do bloco: A (linha imediatamente acima) e L (coluna à esquerda). Usando esses dois conjuntos, o codificador preenche um bloco de teste 4 × 4 com pixels e determina quais valores estão mais próximos do bloco original. Colt Macanlis fala mais sobre isso em um artigo. como o WebP funciona no modo de compactação com perdas.

A transformação discreta de cosseno (DCT) é aplicada em vários estágios, como no JPEG. A principal diferença é o uso de compactação aritmética em vez do algoritmo de Huffman, como no JPEG.

Para mais informações, recomendo o artigo "Métodos de compactação da WebP" do Google Developer.

Suporte ao navegador WebP

Nem todos os navegadores oferecem suporte ao WebP, mas, de acordo com o CanIUse.com , o suporte global é de cerca de 74%. Chrome e Opera suportam o formato. O Safari, Edge e Firefox estão experimentando, mas ainda não implementaram o suporte nas versões oficiais. Por esse motivo, a emissão do WebP geralmente depende do desenvolvedor da web. Mais sobre isso mais tarde.

Aqui estão os principais navegadores e informações de suporte para cada um deles:

Chrome: suporte completo desde a versão 23
Chrome para Android: começando com o Chrome 50
Android: desde 4.2
Opera: de 12,1
Opera Mini: todas as versões
Firefox: algum suporte beta
Edge: algum suporte beta
Internet Explorer: Não
Safari: algum suporte beta

WebP não está isento de falhas. Falta opções de espaço em cores de resolução total e não suporta decodificação progressiva. No entanto, um kit de ferramentas decente foi criado para o WebP e o suporte ao navegador é suficiente para considerar a emissão do WebP como uma das opções.

Como converter imagens em WebP?

Vários editores comerciais e gratuitos oferecem suporte ao WebP. Uma das aplicações mais úteis é o XnConvert: é um conversor de lote gratuito para várias plataformas.

: WebP JPEG . , WebP JPEG. WebP, , JPEG , . , .

XnConvert

O XnConvert produz processamento de imagens em lote em mais de 500 formatos. Você pode combinar em mais de 80 ações separadas para converter ou editar imagens.

O XnConvert suporta a otimização de imagens em lote, realizando a conversão direta de arquivos de origem para WebP e outros formatos. Além da compactação, o XnConvert pode excluir metadados, cortar imagens, ajustar a profundidade de cores e realizar outras transformações.Alguns

dos parâmetros listados no site do xnview são:

Metadados: Edição
Transforma: girar, cortar, redimensionar
Ajustes: brilho, contraste, saturação
Filtros: Blur, Bump, Nitidez
Efeitos: máscaras, marcas d'água, vinhetas (escurecimento parcial)

Os resultados das operações podem ser exportados para aproximadamente 70 formatos de arquivo diferentes, incluindo WebP. XnConvert é um programa gratuito para Linux, Mac e Windows. Essa é uma ótima opção, especialmente para pequenas empresas.

Módulos de nós

O Imagemin é um módulo popular de compactação de imagens que possui uma extensão para a conversão para WebP ( imagemin-webp ). A compressão sem perdas e sem perdas é suportada.

Para instalar imagemin e imagemin-webp, execute:

> npm install --save imagemin imagemin-webp

Em seguida, podemos escrever require () nos dois módulos e executá-los em qualquer imagem (por exemplo, JPEG) no diretório do projeto. Abaixo, usamos codificação com perdas com qualidade de codificador WebP 60:

 const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp'); imagemin(['images/*.{jpg}'], 'images', { use: [ imageminWebp({quality: 60}) ] }).then(() => { console.log('Images optimized'); });

Como no JPEG, você pode ver artefatos de compactação na imagem final. Veja você mesmo qual nível de compactação é adequado para seus arquivos. O Imagemin-webp também pode ser usado para codificar imagens WebP sem perda de qualidade (com suporte para cores de 24 bits e transparência total) especificando o parâmetro lossless: true:

 const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp'); imagemin(['images/*.{jpg,png}'], 'build/images', { use: [ imageminWebp({lossless: true}) ] }).then(() => { console.log('Images optimized'); });

O plugin WebP para Gulp da Síndrome de Sorhus é feito com base em imagemin-webp, também existe um carregador de WebP para o WebPack . O plugin Gulp compreende todas as opções de extensão imagemin:

 const gulp = require('gulp'); const webp = require('gulp-webp'); gulp.task('webp', () => gulp.src('src/*.jpg') .pipe(webp({ quality: 80, preset: 'photo', method: 6 })) .pipe(gulp.dest('dist')) );

Ou compressão sem perdas:

 const gulp = require('gulp'); const webp = require('gulp-webp'); gulp.task('webp-lossless', () => gulp.src('src/*.jpg') .pipe(webp({ lossless: true })) .pipe(gulp.dest('dist')) );

Otimização de imagem em lote com Bash

O XNConvert suporta compactação em lote, mas você pode fazer tudo na linha de comando.

Lote converter imagens para WebP usando cwebp :

 find ./ -type f -name '*.jpg' -exec cwebp -q 70 {} -o {}.webp \;

Otimização pelo codec MozJPEG usando jpeg-recompress :

 find ./ -type f -name '*.jpg' -exec jpeg-recompress {} {} \;

e corte de SVG usando o programa svgo (que discutiremos mais adiante):

 find ./ -type f -name '*.svg' -exec svgo {} \;

Jeremy Wagner escreveu um artigo mais completo sobre como otimizar imagens no Bash e outro sobre paralelizar essa tarefa.

Outros aplicativos de processamento e edição de WebP

Leptonica é um site inteiro de aplicativos gratuitos de processamento e análise de imagens.
O Sketch suporta salvar no WebP.
O GIMP é uma alternativa gratuita e de código aberto ao Photoshop.
ImageMagick - criação, layout, transformação e edição de gráficos raster. Livre, funciona a partir da linha de comando.
Pixelmator é um editor de imagens comercial para Mac.
O Photoshop WebP Plugin é um plugin gratuito do Google. Importe e exporte imagens no Photoshop.

Para o Android, você pode converter BMP, JPG, PNG e GIF estático existentes no formato WebP usando o Android Studio. Para obter mais informações, consulte "Criando imagens da WebP usando o Android Studio" .

Como visualizar imagens da WebP no meu sistema operacional?

Embora as imagens WebP sempre sejam abertas em um navegador usando o mecanismo Blink (Chrome, Opera, Brave), elas podem ser visualizadas diretamente do sistema operacional usando o suplemento para Mac ou Windows.

Alguns anos atrás, o Facebook experimentou o WebP e percebeu um problema: alguns usuários salvaram imagens em disco e, em seguida, não puderam abri-las. Existem três questões principais aqui:

WebP . Chrome, .webp.
, Chrome. Facebook , «», JPEG.
URL content-type .

Seus usuários podem não ter esses problemas, mas esta é uma nota marginal interessante. Felizmente, hoje existem utilitários para visualizar o WebP em diferentes sistemas operacionais.

No Mac, tente o plug-in Quick Look para WebP (qlImageSize). Funciona muito bem:

no Windows, você pode baixar o pacote de codec WebP , que adiciona a opção de exibir o WebP no File Explorer e no Windows Photo Viewer.

Como dar WebP?

Navegadores sem suporte à WebP não mostrarão nenhuma imagem. Para evitar isso, existem várias estratégias.

O painel Chrome DevTools Network com a seleção de arquivos WebP que são fornecidos aos navegadores no mecanismo Blink A

Play Store fornece navegadores WebP para Blink e JPEG para outros, como o Firefox

Aqui estão algumas opções para entrega de imagens WebP aos usuários:

Use .htaccess para emitir cópias da WebP

Veja como usar .htaccess para emitir arquivos WebP em navegadores suportados, se o servidor tiver uma versão webp do arquivo JPEG / PNG.

Vincent Orbach recomendou esta abordagem:

Os navegadores podem sinalizar explicitamente o suporte à WebP através do cabeçalho Accept . Nesse caso, você pode enviar a versão WebP da imagem do servidor. Mas isso nem sempre é possível (por exemplo, para hosts estáticos, como páginas GitHub ou S3), portanto, verifique antes de considerar esta opção.

A seguir, é apresentado um exemplo de arquivo .htaccess para o servidor da web Apache:

 <IfModule mod_rewrite.c> RewriteEngine On # Check if browser support WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

Se você tiver problemas para exibir gráficos WebP, verifique se o tipo MIME image / webp está ativado no servidor.

No Apache, adicione o seguinte código ao seu arquivo .htaccess:

 AddType image/webp .webp

No Nginx, adicione o seguinte código ao arquivo mime.types:

 image/webp webp;

Nota: Vincent Orback fornece uma amostra de htaccess para WebP, e Ilya Grigorik mantém uma coleção de scripts de configuração para WebP que podem ser úteis.

Usando a tag <picture>

O próprio navegador pode selecionar o formato da imagem usando a tag <picture>. Dentro da <imagem>, existem muitos elementos <source>, com uma tag <img> para cada um que realmente contém a imagem. O navegador varre o <source> e solicita o primeiro adequado. Se a tag <picture> não for suportada, o <div> será renderizado usando a tag <img>.

Nota: tenha cuidado com a ordem dos elementos <source>. Não coloque fontes de imagem / webp após formatos obsoletos, mas coloque-as na frente delas. Você também pode colocar imagens em ordem crescente do tamanho do arquivo se elas tiverem o mesmo tamanho em pixels (quando o atributo não for usado media). Geralmente, a mesma ordem é obtida na especificação de formatos mais recentes primeiro.

Aqui estão alguns exemplos de HTML:

 <picture> <source srcset="/path/to/image.webp" type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture> <picture> <source srcset='paul_irish.jxr' type='image/vnd.ms-photo'> <source srcset='paul_irish.jp2' type='image/jp2'> <source srcset='paul_irish.webp' type='image/webp'> <img src='paul_irish.jpg' alt='paul'> </picture> <picture> <source srcset="photo.jxr" type="image/vnd.ms-photo"> <source srcset="photo.jp2" type="image/jp2"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="My beautiful face"> </picture>

Conversão automática para WebP no lado da CDN

Algumas CDNs suportam conversão automática e emissão de WebP mediante solicitação do cliente, quando possível . Verifique seu CDN para suporte. Talvez o problema seja facilmente resolvido.

Suporte WordPress

Jetpack : O popular plugin do WordPress, inclui um serviço de imagem CDN chamado Photon com suporte para WebP. Está incluído na versão gratuita do Jetpack, o que é muito prático e útil. A desvantagem é que o Photon redimensiona automaticamente a imagem, coloca a string de consulta no URL e uma consulta DNS adicional é realizada para cada imagem.

Enabler e Optimizer de cache : se você estiver usando o WordPress, há pelo menos uma opção de código aberto. No menu do plug-in do Cache Enablerexiste um sinalizador para armazenar em cache e emitir imagens WebP, se o navegador do usuário as suportar. Isso simplifica o trabalho com o WebP. Há também uma desvantagem: o Cache Enabler requer o uso do programa irmão Optimizer, pelo qual eles cobram uma taxa anual. Isso não é muito comum em soluções de código aberto.

Pixel curto : outra opção otimizadora do Cache Enabler, também paga. Em termos de funcionalidade, o Short Pixel é muito semelhante ao Optimizer mencionado. Permite otimização gratuita de até 100 fotos por mês.

Compactação GIF e por que <video> é melhor

GIFs animados ainda são amplamente utilizados, apesar de sua estreita especialização. Embora tudo, desde redes sociais a sites de mídia populares, faça uso intenso de animações GIF, esse formato nunca foi destinado a vídeo ou animação. De fato, a especificação GIF89a afirma explicitamente que "o GIF não se destina a servir como plataforma de animação". O número de cores, o número de quadros e a proporção - tudo isso afeta o tamanho do GIF animado. Substituir o formato de vídeo proporciona economia máxima.

Comparação de tamanhos de animação GIF e vídeo com qualidade equivalente A

produção do mesmo vídeo no formato MP4 reduz o tamanho do arquivo em 80% ou mais.Além do fato de os arquivos GIF desperdiçarem tráfego, eles levam mais tempo para carregar, contêm menos cores e geralmente não parecem muito agradáveis. Você deve ter notado que os GIFs animados do Twitter funcionam melhor lá do que em outros sites. Isso ocorre porque os GIFs animados no Twitter não são realmente GIFs . Para melhorar a qualidade e reduzir o tráfego, o Twitter os converte automaticamente em vídeo. Da mesma forma, o Imgur converte GIF em MP4 após o carregamento .

Por que os GIFs são muitas vezes maiores em tamanho? Porque eles armazenam todos os quadros como uma imagem GIF sem perdas - sim, sem perdas. A baixa qualidade do GIF é causada não pela compactação, mas por uma paleta de 256 cores. O formato não analisa os quadros adjacentes quanto à compactação, ao contrário dos codecs de vídeo como o H.264. O vídeo MP4 armazena cada quadro-chave como JPEG com perdas, descartando alguns dos dados originais para obter uma melhor compactação.

Se você pode mudar para o vídeo

Use ffmpeg para converter GIFs animados (ou arquivos de origem) para o formato MP4 (H.264). Eu corro uma linha do Rigor :

ffmpeg -i animated.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)2:trunc(ih/2)2" video.mp4
A API ImageOptim também suporta a conversão de GIFs animados em WebM / H.264 e remove GIFs com suavização de serrilhado, aumentando ainda mais a compactação

Se você precisar usar GIFs animados

Ferramentas como o Gifsicle removem metadados, cores de paleta não utilizadas e minimizam as alterações entre os quadros.
Considere a codificação GIF com perdas. Giflossy é um garfo de Gifsicle que suporta a bandeira -lossye comprime a animação em 60 a 65%. Com base nisso, é feita uma boa ferramenta Gifify . Converta GIFs não animados para o formato PNG ou WebP.

Veja o livro GIF da Rigor para obter mais informações .

Otimização SVG

Minimizar arquivos SVG significa remover todos os desnecessários. Como regra, o SVG do editor contém muitas informações redundantes (metadados, comentários, camadas ocultas etc.). Muitas vezes, pode ser removido ou minimizado com segurança sem afetar o resultado visual.

No serviço JVG Archibald SVGOMG , você pode escolher diferentes métodos de otimização com visualização instantânea do resultado

Algumas regras gerais de otimização SVG (SVGO)

Minimize os arquivos SVG e comprima no gzip, porque os SVGs são apenas recursos de texto XML, como CSS, HTML e JavaScript. Para aumentar a produtividade, eles devem ser minimizados e compactados.
SVG, <rect> , <circle> , <ellipse> , <line> <polygon> . .
, . , . simplify Illustrator , .
. , .
.
Photoshop Illustrator. .
, SVG.
SVG, - SVGOMG SVGO . Sketch, Sketch SVGO .

A eficácia do SVGO em alta precisão (-29% do tamanho do arquivo original) e baixa precisão (-38%)

SVGO é uma ferramenta de otimização SVG no Node. Reduz o tamanho do arquivo, diminuindo a precisão dos números nas definições. Cada dígito após o ponto é um byte extra, portanto, alterar a precisão (número de dígitos) afeta muito o tamanho do arquivo. Mas tenha muito cuidado, porque a precisão reduzida pode afetar visualmente as formas da imagem.

É importante observar: embora o SVGO tenha tido sucesso no exemplo anterior sem simplificar excessivamente os caminhos e as formas, isso geralmente acontece de maneira diferente. Veja como uma explosão em um foguete é distorcida com precisão decrescente

SVGO na linha de comando:

O SVGO pode ser instalado como uma CLI, se você preferir a linha de comando:

npm i -g svgo

Otimização do arquivo SVG:

svgo input.svg -o output.svg

Todos os parâmetros possíveis são suportados, incluindo configurações de precisão de ponto flutuante:

svgo input.svg --precision=1 -o output.svg

consulte o leia-me para obter uma lista completa dos parâmetros suportados.

Não se esqueça de comprimir SVG!

Além disso, certifique-se de compactar os arquivos SVG ou de os emitir usando o protocolo Brotli. O formato do texto será compactado muito bem (~ 50% da fonte).

Quando o Google lançou o novo logotipo, anunciamos que sua versão mínima é de apenas 305 bytes.

Existem muitos truques avançados para reduzir ainda mais o arquivo (até 146 bytes)!

Sprites SVG

O SVG é ótimo para ícones, oferecendo visualização de sprite sem as soluções alternativas necessárias para as fontes. Possui melhor controle de estilo CSS do que em fontes (propriedades de traçado SVG), melhor controle de posicionamento (não há necessidade de se preocupar com pseudo-elementos e display) e o SVG é muito melhor suportado em navegadores .

Ferramentas como svg-sprite e IcoMoon automatizam a integração de SVGs em sprites que podem ser usados no CSS Sprite , Symbol Sprite ou Stacked Sprite . Dicas práticas para aprenderdo Una Kravets, como usar o gulp-svg-sprite em um fluxo de trabalho. Sarah Sudein em seu blog descreve a transição de fontes de ícone para SVG .

Materiais adicionais

Os conselhos de Sarah Sowaydan sobre como otimizar a emissão de SVG e o Livro Prático de Chris Coyier sobre SVG são excelentes. Encontrei artigos muito úteis de Andreas Larsen sobre otimização de SVG ( parte 1 , parte 2 ). Também posso recomendar o artigo “Preparando e exportando ícones SVG no Sketch” .

Evite apertar gráficos com perda de qualidade

A compactação de uma imagem é sempre recomendada a partir da fonte. A fixação repetida é repleta de consequências desagradáveis. Suponha que você pegue um JPEG que já esteja compactado com a qualidade 60. Se você o recomprimir com perda, ele parecerá pior. Cada rodada adicional de compactação levará a uma perda adicional de qualidade - as informações são excluídas e os artefatos são acumulados. Mesmo se você apertar com configurações de alta qualidade.

Para evitar essa armadilha, defina imediatamente a qualidade mínima aceitável e obtenha economia máxima desde o início. Você não precisará re-compactar, porque qualquer compactação com perda de arquivo ficará ruim, embora reduza o tamanho do arquivo.

Um exemplo de um ótimo vídeo e artigo de capaJohn Sneijers mostra o impacto da fixação em vários formatos. Esse problema pode ser encontrado se você salvar imagens (já compactadas) de redes sociais e carregá-las novamente (com nova compactação). A perda de qualidade está aumentando. O

MozJPEG (possivelmente por acidente) é mais resistente a essa degradação devido à quantização da treliça. Em vez de compactar todos os valores DCT como estão, ele procura valores próximos no intervalo + 1 / -1 para compactá-los em menos bits. O FLIF com perda de qualidade usa um hack semelhante ao PNG com perda de qualidade, onde antes (re) da compressão o codec analisa os dados e decide o que lançar.

Armazene arquivos de origem em formato sem perdas, como PNG ou TIFF, para manter a qualidade máxima. Em seguida, as ferramentas ou compressores de montagem preparam uma versão compactada que você oferece aos usuários com perda mínima de qualidade.

Reduza os custos desnecessários de decodificação e redimensionamento

Todos nós fornecemos aos usuários imagens grandes com uma resolução muito alta. Você tem que pagar por isso. Decodificação e redimensionamento são operações que exigem muitos recursos de um navegador em um telefone celular comum. Se você renderizar imagens grandes, dimensionando-as usando atributos CSS ou largura / altura, verá como isso afetará o desempenho.

Quando o navegador recebe a imagem, ele deve decodificá-la do formato de origem original (por exemplo, JPEG) em uma imagem de bitmap na memória. Geralmente, uma imagem requer redimensionamento (por exemplo, a largura é definida como uma porcentagem). Decodificar e redimensionar imagens são operações que consomem muitos recursos que diminuem a renderização

Idealmente, você deve fornecer imagens que o navegador exibe sem redimensionar. Portanto, forneça as imagens em tamanho mínimo para as telas e resoluções correspondentes, usando srcset/sizes- em um futuro próximo, consideraremos srcset.

Ignorando atributos widthe heighttambém pode afetar negativamente o desempenho. Sem eles, o navegador atribui a menor área de espaço reservado à imagem até receber bytes suficientes para determinar o tamanho correto. Nesse ponto, a marcação do documento deve ser atualizada usando a operação de refluxo intensivo em recursos.

Os navegadores precisam executar várias etapas para desenhar uma imagem na tela. Depois de receber a imagem, ela deve ser decodificada e muitas vezes redimensionada. Esses eventos podem ser rastreados na linha do tempo.Chrome DevTools

Imagens grandes também ocupam memória: cerca de 4 bytes por pixel após a decodificação. Se você não tomar muito cuidado, pode literalmente travar o navegador; em dispositivos de baixo orçamento, não é tão difícil mudar a situação. Portanto, acompanhe os custos de decodificação, redimensionamento e consumo de memória.

A decodificação de imagem pode consumir muito recursos em telefones celulares de médio e baixo nível. Em alguns casos, é 5 ou mais vezes mais lento do que na área de trabalho.No

desenvolvimento de uma nova versão móvel, o Twitter aumentou bastante a velocidade de decodificação de imagem, definindo os tamanhos corretos. Para muitas imagens, o tempo de decodificação diminuiu de ~ 400 ms para ~ 19 ms!

Timeline/Performance Chrome DevTools Twitter Lite

HiDPI `srcset`

Os usuários podem acessar o site através de vários dispositivos móveis e de desktop com telas de alta resolução. A proporção de pixels do dispositivo (DPR) (também chamada de “proporção de pixels em CSS”) determina como o CSS deve interpretar a resolução da tela. O padrão DPR foi criado pelos fabricantes de telefones para aumentar a resolução e a nitidez das telas móveis sem reduzir os elementos.

Para obter a máxima qualidade, você deve fornecer imagens com a resolução mais adequada. Imagens de alta definição (com DPR 2 ×, 3 ×) são fornecidas para dispositivos com telas de alta resolução e imagens comuns são fornecidas para telas padrão, pois as imagens com DPR 2 × e 3 × são muito mais pesadas.

Proporção de pixels do dispositivo: muitos sites rastreiam o DPR de dispositivos populares por meio do material.ioe mydevice.io

srcset permite que o navegador selecione a imagem ideal para cada dispositivo. Por exemplo, tire uma foto 2 × para um monitor móvel com 2 × DPR. Navegadores sem suportesrcsetpodem usar o padrãosrcespecificado na tag<img>.

 <img srcset="paul-irish-320w.jpg, paul-irish-640w.jpg 2x, paul-irish-960w.jpg 3x" src="paul-irish-960w.jpg" alt="Paul Irish cameo">

CDN para imagens como Cloudinary e Imgix DPR suporte de distribuição de imagens com a melhor resolução de uma única fonte.

Nota: Você pode aprender mais sobre as proporções de pixel do dispositivo e imagens responsivas neste curso gratuito do Udacity e guia de imagens em Fundamentos da Web.

Lembro que as Dicas do Cliente também são uma alternativa adequada para especificar todos os DPR e formatos possíveis na marcação responsiva. Em vez disso, as informações relevantes são adicionadas à solicitação HTTP para que o servidor da Web selecione a opção mais adequada para uma tela específica.

Transformação artística

Embora a escolha da resolução correta seja importante, alguns sites ainda pensam em beleza. Se o usuário tiver uma tela pequena, você poderá cortar ou aumentar o zoom - e exibir o objeto de maneira diferente, fazendo o melhor uso do espaço disponível. Embora a transformação artística (direção de arte) além do escopo deste artigo, alguns serviços como Cloudinary fornecer API-interfaces para automatizar tarefas.

Eric Portis mostrou um ótimo exemplo de como usar criativamente imagens responsivas. Neste exemplo, as características do objeto principal na ilustração são modificadas para fazer o melhor uso do espaço disponível.

Gerenciamento de cores

As cores podem ser vistas de pelo menos três perspectivas: biologia, física e impressão. Na biologia, a cor é um fenômeno de percepção . Os objetos refletem a luz em várias combinações de comprimentos de onda. Os receptores de luz nos olhos traduzem essas ondas em um sentido de cor. Na física, as frequências das ondas e a energia (brilho) são importantes. A impressão é mais sobre gama de cores, cores e modelos de arte.

Idealmente, todas as telas e navegadores da web no mundo devem exibir exatamente a mesma cor. Infelizmente, isso não é verdade. O gerenciamento de cores compromete a exibição de cores usando modelos, espaços e perfis de cores.

Modelos a cores

Os modelos de cores são um sistema para criar todo o espectro de um conjunto menor de cores primárias. Existem vários tipos de espaços de cores com diferentes opções para gerenciar cores. Em alguns espaços, há menos parâmetros de controle do que em outros - por exemplo, para todos os tons de cinza, um parâmetro de brilho entre preto e branco é suficiente.

Dois tipos comuns de modelos de cores são aditivos e subtrativos. Os modelos de cores aditivas do tipo RGB exibem cores com luminescência e cores do tipo CMYK subtrativas com reflexão (subtração).

Em RGB, as luzes vermelha, verde e azul são adicionadas em várias combinações para produzir uma ampla gama de cores. CMYK (ciano, magenta, amarelo e preto) tintas de diferentes cores funciona por tirar uma parte do espectro do papel branco

artigo“O conceito de modelos e sistemas de cores” descreve bem outros modelos e modos de cores, como HSL, HSV e LAB.

Espaços de cor

Os espaços de cores são um intervalo específico de cores que pode ser exibido para uma determinada imagem. Por exemplo, na imagem até 16,7 milhões de cores e vários espaços de cores permitem restringir ou expandir esse intervalo. Alguns desenvolvedores acreditam que os modelos de cores e os espaços de cores são a mesma coisa.

O sRGB foi desenvolvido com base no RGB como padrão para a Internet. Esse é um pequeno espaço de cores, geralmente considerado o denominador menos comum e a opção mais segura para gerenciamento de cores nos navegadores. Outros espaços de cores (como Adobe RGB ou ProPhoto RGB(usado no Photoshop e no Lightroom) contêm cores mais diversas, mas como o sRGB é comum em navegadores, jogos e monitores, eles geralmente o usam.

Visualização da gama - a gama de cores no espaço de

cores.Três canais são usados em espaços de cores (vermelho, verde e azul), cada um com 255 cores no modo de 8 bits, o que fornece 16,7 milhões de cores. As imagens de 16 bits podem exibir trilhões de cores.

Comparação de sRGB, Adobe RGB e ProPhoto RGB em uma imagem com Yardstick . É incrivelmente difícil ilustrar esse conceito se sua tela mostrar apenas cores sRGB. Ao comparar uma foto comum em sRGB e uma ampla gama, tudo será o mesmo, exceto pelas cores "ricas" mais saturadas

Os espaços de cores são diferenciados por sua gama (a variedade de cores que eles podem reproduzir com tons), espectro e curva gama . O sRGB é cerca de 20% menor que o Adobe RGB, o ProPhoto RGB é cerca de 50% mais amplo que o Adobe RGB. As fotos acima são tiradas do Clipping Path .

Ampla gama é um termo que significa espaços de cores maiores que o sRGB. Esses tipos de telas estão se tornando mais comuns. No entanto, muitos monitores digitais ainda simplesmente não são capazes de exibir perfis de cores significativamente melhores que o sRGB. Ao salvar na Web no Photoshop, use a opção de conversão para sRGB, a menos que você esteja contando com displays com uma ampla gama de cores.

: sRGB . , . (, ProPhoto RGB), sRGB .

, -?

SimSe a imagem contiver uma cor muito saturada / rica / brilhante - e você desejar exibi-la em telas compatíveis. No entanto, em fotografias reais isso raramente acontece. Geralmente, você pode ajustar facilmente as configurações para que a cor pareça brilhante sem ir além da gama de sRGB.

A razão é que a percepção humana da cor não é absoluta. A percepção funciona em relação ao meio ambiente - e é fácil enganar. Mas se a imagem mostra um traço de um marcador fluorescente, é claro, é mais fácil mostrá-lo em uma ampla variedade.

Correção e compactação gama

A correção gama (ou apenas gama) controla o brilho geral da imagem. Alterar a gama também pode alterar a proporção de vermelho para verde. Imagens sem correção de gama geralmente parecem desbotadas ou escuras.

Nos gráficos de vídeo e computador, a gama é usada para compactação, semelhante à compactação de dados. Isso nos permite comprimir níveis úteis de brilho em menos bits (8, não 12 ou 16). A percepção humana do brilho não é linearmente proporcional à quantidade física de luz. Representar flores em sua verdadeira forma física seria um desperdício ao codificar para o olho humano. A compressão gama é usada para codificar o brilho em uma escala mais próxima da percepção humana.

Com a compressão gama, uma escala de brilho útil cabe em 8 bits de precisão (0–255 na maioria das cores RGB), porque as unidades de luminância são codificadas de maneira não linear. Imagine que você está em um quarto escuro com uma vela. Acenda o segundo - e observe um aumento significativo no brilho. Adicione uma terceira vela e a sala ficará ainda mais brilhante. Agora imagine-se em uma sala com cem velas. Acenda as velas 101 e 102 - e você não notará nenhuma alteração.

Nos dois casos, a mesma quantidade de luz foi adicionada fisicamente. Mas como os olhos são menos sensíveis à luz brilhante, a compressão gama "comprime" os valores brilhantes; portanto, menos precisão é codificada nas unidades físicas, mas a própria escala é ajustada para as pessoas - e do ponto de vista humano, todos os valores são igualmente precisos.

: - - «», - .

Um perfil de cores é uma informação que descreve o espaço de cores de um dispositivo. É usado para converter entre diferentes espaços de cores. A tarefa dos perfis é tornar as imagens o mais semelhante possível em todos os tipos de telas e mídias.

As imagens podem ter um perfil de cores integrado de acordo com o padrão International Color Consortium (ICC) para identificar cores. Os perfis são suportados em vários formatos, incluindo JPEG, PNG, SVG e WebP, e a maioria dos principais navegadores também suporta perfis ICC integrados. Se a imagem abrir no programa e o perfil do monitor for conhecido, as cores serão ajustadas de acordo.

: sRGB, . . .

Os perfis de cores internos também aumentam significativamente o tamanho das imagens (às vezes em 100 KB ou mais), portanto, tenha cuidado. Ferramentas como o ImageOptim excluem automaticamente todos os perfis de cores encontrados. Se o perfil ICC for excluído, o navegador começará a exibir a imagem no espaço de cores do seu monitor, o que pode levar a uma alteração na saturação e no contraste. Portanto, faz sentido buscar um compromisso para cada caso específico.

O site Nove graus abaixo de excelente selecção de recursos para gerenciamento de perfil de cor ICC, se precisar de mais informações.

Perfis de cores e navegadores

Nas versões anteriores do Chrome, não havia muito suporte para gerenciamento de cores, mas a situação foi corrigida em 2017 com a introdução da função Renderização correta de cores . Se o perfil de exibição for diferente de sRGB (os mais recentes profissionais do MacBook), ele converterá as cores de sRGB no perfil de exibição. Isso significa que as cores se tornarão mais semelhantes em diferentes sistemas e navegadores. Os navegadores Safari, Edge e Firefox também levam em consideração os perfis ICC, de modo que as imagens com perfis diferentes agora são exibidas corretamente, independentemente de você ter uma ampla gama de cores ou não.

Nota: Um excelente guia para as várias maneiras de usar cores na Web é o Guia para Nerd de Cores de Sarah Drazner na Internet .

Sprites

Em sprites imagem (ou CSS-sprite) tem uma longa história, eles são suportados por todos os navegadores e tem sido uma maneira popular para reduzir o número de imagens enviadas por combiná-los em uma imagem maior, que é cortado em pedaços.

Os sprites de imagem ainda são amplamente utilizados em grandes sites de produção, incluindo a página inicial do Google.

De acordo com o padrão HTTP / 1.x, alguns utilizavam sprites para reduzir o número de solicitações de HTTP. Isso tinha várias vantagens, mas exigia precisão devido a um problema com a invalidação do cache - alterações em qualquer pequena parte do sprite invalidariam a imagem inteira no cache.

Spriting agora contradiz as diretrizes HTTP / 2. Como tornou possível enviar muitos pedidos em uma conexão, é melhor fazer upload de fotos individualmente . Avalie as opções para sua situação.

Carregamento lento de imagens não críticas

O carregamento lento (atrasado) é uma prática de aumentar a produtividade quando o download de imagens no navegador é atrasado até que o usuário realmente precise. Por exemplo, as imagens são carregadas de forma assíncrona ao rolar pela página. Isso pode economizar tráfego, além da compactação de imagem.

As imagens que atingem a tela são baixadas imediatamente. Mas o resto neste momento ainda não é visível. Eles não devem ser baixados imediatamente, mas depois - este é um carregamento lento. Isso só acontece se e quando o usuário rola a página para baixo.

O carregamento lento ainda não é suportado pelos próprios navegadores (embora isso tenha sido discutido no passado ). Em vez disso, o JavaScript é usado.

Por que o carregamento atrasado é útil?

Tem muitas vantagens:

. . , .
. — .
. . , , .

No entanto, como em outras ferramentas, grande responsabilidade vem com grande força.

Evite o atraso no carregamento de imagens no escopo. Use-o para listas longas (por exemplo, produtos ou avatares personalizados). Não use-o para a imagem principal na página. O carregamento lento no escopo pode retardar o carregamento tanto tecnicamente quanto para a percepção humana. Ele mata pré-carregamento e carregamento progressivo, e o JavaScript gera trabalho extra para o navegador.

Tenha muito cuidado com o carregamento lento de imagens ao rolar.Se você esperar diretamente pelo evento de rolagem, o usuário poderá ver espaços reservados em vez de imagens ou obter fotos antes de rolar para eles. Uma das recomendações é começar a carregar preguiçosamente as seguintes imagens imediatamente após a exibição anterior na tela, independentemente da interação do usuário.

Quem usa carregamento atrasado?

O carregamento lento é usado pela maioria dos sites grandes com um grande número de imagens. Por exemplo, Médio e Pinterest .

Um exemplo de uma visualização com desfoque gaussiano de ilustrações no Medium

Em alguns sites (por exemplo, Medium), uma pequena imagem borrada (cerca de 100 bytes) é exibida para visualização, que, após um download atrasado, se transforma em uma ilustração de qualidade normal.

Jose M. Perez falou sobre como implementar o efeito Médio usando filtros CSS . Ele experimentou diferentes formatos gráficos . O Facebook também descreveu sua famosa abordagem com espaços reservados de 200 bytes para fotos de cabeçalho. Se você usa o Webpack, entãoO carregador LQIP ajudará a automatizar alguns desses procedimentos.

Para ver um carregamento lento, basta abrir o seu catálogo favorito de fotos de alta qualidade e, em seguida, role a página. Você quase sempre verá que o site apenas carrega algumas imagens em resolução máxima e o restante são espaços reservados. À medida que você rola, os espaços reservados são substituídos por imagens em resolução total. Este é um carregamento lento.

Recentemente, uma nova técnica de vetor em vez de espaços reservados de varredura ganhou popularidade . Foi proposto por Tobias Baldauf em sua ferramenta SQIP . Lá, o utilitário Primitive gera visualizações SVG de várias formas simples, aproximando-se coincidindo com os principais recursos da imagem. Então o SVG é otimizado usandoSVGO - e um filtro de desfoque gaussiano é aplicado. O resultado é um espaço reservado SVG de apenas 800-1000 bytes de tamanho, que parece nítido em qualquer tela e oferece uma visão significativa do que está na imagem real. Obviamente, você pode combinar carregamento lento e visualização de imagens em baixa qualidade.

Como aplicar o carregamento atrasado?

Existem vários métodos e plug-ins para carregamento diferido. Eu recomendo Lazyizing Alexander Farkas por causa de seu desempenho decente, funcionalidade, integração adicional com o Intersection Observer e suporte a plugins.

O que o Lazysizes pode fazer?

Lazysizes é uma biblioteca JavaScript; não requer personalização. Basta baixar o arquivo js minificado e incluí-lo na página da web.

Abaixo está um código de amostra de um arquivo README:

Adicione a classe 'lazyload' a imagens / quadros em combinação com o atributo data-src e / ou data-srcset.

Além disso, você pode adicionar o atributo src com uma imagem de baixa qualidade:

 <!-- non-responsive: --> <img data-src="image.jpg" class="lazyload" /> <!-- responsive example with automatic sizes calculation: --> <img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" /> <!-- iframe example --> <iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"> </iframe>

Para a versão web deste livro, associei o Lazysizes ao Cloudinary (embora você possa usar qualquer alternativa). Isso permite que você experimente livremente e com o mínimo de esforço com diferentes escalas, qualidade, formatos e independentemente da necessidade de download progressivo:

Características Lazysizes:

Detecta automaticamente alterações na visibilidade dos elementos atuais e futuros do carregamento lento
Suporte para imagens responsivas padrão (imagem e srcset)
Cálculo automático de tamanhos e aliases para consultas de mídia
Funciona com centenas de imagens / quadros CSS, em páginas ricas em scripts e aplicativos da web
Extensibilidade: suporta plugins
Solução fácil, mas madura
Melhoria de SEO: não oculta imagens / ativos de rastreadores

Outros métodos de carregamento lento

Lazysizes não é a única opção. Existem outras bibliotecas:

Lazy Load XT
BLazy.js (ou [Seja] preguiçoso)
Revelar
yall.js (outro carregador preguiçoso) com aproximadamente 1 kilobyte de tamanho, ele usa o Intersection Observer sempre que possível.

Quais são as desvantagens do carregamento lento?

, JavaScript , JavaScript. <noscript>.
. (redraw), . — Intersection Observer, lazysizes.

O carregamento atrasado é uma maneira comum de economizar tráfego, reduzir custos e melhorar a experiência do usuário. Avalie como é útil no seu caso. Para obter mais informações, consulte os artigos "Carregamento lento de imagens" e "Implementando o carregamento progressivo no médio" .

Como evitar a exibição: nenhuma armadilha

As soluções de imagem responsiva mais antigas manipularam solicitações de imagem erroneamente ao definir a propriedade CSS display. Isso pode levar a um aumento significativo no número de solicitações, o que é outro motivo pelo qual é preferível usar <picture> e <img srcset>.

Você já escreveu uma consulta de mídia que, sob certas condições, oculta uma imagem display:none?

 <img src="img.jpg"> <style> @media (max-width: 640px) { img { display: none; } } </style>

Ou oculta imagens com uma classe display:none?

 <style> .hidden { display: none; } </style> <img src="img.jpg"> <img src=“img-hidden.jpg" class="hidden">

Uma verificação rápida no painel de rede do Chrome DevTools mostra que essas imagens "ocultas" ainda estão sendo carregadas. Este é realmente o comportamento correto do navegador, de acordo com a especificação de recursos incorporados.

O display: none ajuda a evitar a solicitação src?

 <div style="display:none"><img src="img.jpg"></div>

Não.A imagem especificada ainda será solicitada. Aqui, a biblioteca não pode contar com display: none, porque a solicitação é enviada antes que o JavaScript mude src.

Display: none ajuda a evitar a consulta background: url ()?

 <div style="display:none"> <div style="background: url(img.jpg)"></div> </div>

Resposta afirmativa. O plano de fundo CSS não é extraído ao analisar um elemento. Cálculo de estilos CSS para crianças com display:nonemenos útil porque elas não afetam a renderização do documento. As imagens de plano de fundo das crianças não são calculadas ou carregadas.

Jake Archibald tem uma excelente missão de questionário de armadilhas display:none. Em caso de dúvida sobre como um navegador específico lida com solicitações de imagem, abra o DevTools e veja você mesmo.

Novamente, sempre que possível, use <picture> e <img srcset> em vez de confiar em <display: none>.

Faz sentido usar o CDN para processamento de imagem?

O tempo gasto na leitura de artigos para configurar seu pipeline de processamento de imagens e, em seguida, refinar, geralmente é muito mais caro do que pagar por esse serviço. O Cloudinary oferece um serviço gratuito, o Imgix oferece um teste gratuito, existe uma alternativa gratuita ao Thumbor , portanto há muitas opções.

Para o carregamento mais rápido da página, você precisa otimizar o carregamento de imagens, incluindo a saída de imagens responsivas com compactação no servidor, seleção automática do formato e redimensionamento ideais. É importante enviar a imagem do tamanho certo para o dispositivo certo na resolução correta - e o mais rápido possível. Isso não é tão fácil quanto parece.

Seu servidor ou CDN?

Manipulação de imagem é um tópico específico. Tudo está mudando constantemente aqui, então vamos começar com uma citação de um especialista experiente e continuar.

“Se o seu produto não estiver associado ao processamento de imagens, não faça você mesmo. Serviços como Cloudinary [ou Imgix, aprox. ed.] lidará com muito melhor e com mais eficiência. E se você estiver preocupado com o preço, pense em quanto custará o desenvolvimento e a manutenção, além de hospedagem, armazenamento e entrega ”- Chris Gmyr

No momento, estamos inclinados a concordar que é melhor usar o CDN para o processamento de imagens. Considere dois desses serviços - como eles correspondem à lista de tarefas mencionadas.

Cloudinary e Imgix

Cloudinary e Imgix - conhecido CDN para processamento de imagens. Eles são usados por centenas de milhares de desenvolvedores e empresas em todo o mundo, incluindo Netflix e Red Bull.

Principal

A primeira grande vantagem da CDN sobre sua própria solução é que eles usam um sistema de rede global distribuído para manter as imagens mais próximas dos usuários. E com a CDN, é muito mais fácil garantir a relevância do serviço com futuras alterações tecnológicas, pois nem todos poderão monitorar tendências de forma independente, fazer alterações - isso requer manutenção, rastreamento de suporte para novos formatos por navegadores e imersão na vida da comunidade de compactação de imagem.

Segundo: cada serviço possui um plano tarifário de vários níveis: o Cloudinary possui uma tarifa gratuita , o Imgix possui um plano inicial barato. A Imgix oferece um teste gratuito , é quase o mesmo que uma tarifa gratuita.

Terceiro: ambos os serviços têm uma API. Os desenvolvedores podem se conectar programaticamente a uma CDN e automatizar o processo. Bibliotecas cliente, plug-ins para estruturas e documentação da API estão disponíveis, embora algumas opções estejam disponíveis apenas a taxas caras.

Vamos para o processamento de imagens.

Limite a discussão a imagens estáticas. Cloudinary e Imgix oferecem uma ampla gama de técnicas de processamento de imagem. Em tarifas padrão e gratuitas, ambas suportam funções básicas: compressão, redimensionamento, corte, geração de cópias pequenas.

Biblioteca de mídia Cloudinary: Por padrão, o Cloudinary produz JPEGs regulares em vez de progressivos . Para ativar esta opção, coloque o ícone correspondente nas "Opções avançadas" ou use o sinalizador fl_progressive Cloudinary

names sete categorias amplas de conversão , um total de 48 subcategorias. O Imgix possui mais de 100 operações de processamento de imagem .

O que acontece por padrão?

O Cloudinary realiza as seguintes otimizações por padrão:

Codificação JPEG usando MozJPEG (selecionado em vez de Guetzli por padrão).
Limpar metadados (a imagem original permanece intacta). Para alterar esse comportamento e renderizar imagens com metadados, adicione o sinalizador keep_iptc.
Capacidade de gerar WebP, GIF, JPEG e JPEG-XR com qualidade automática. Para alterar as configurações padrão, defina o parâmetro de qualidade manualmente.
Otimização do tamanho do arquivo com impacto mínimo na qualidade ao gerar PNG, JPEG ou GIF.

O Imgix não inicia otimizações como o Cloudinary por padrão, mas permite definir a qualidade padrão. No Imgix, as configurações automáticas ajudam a automatizar o nível básico de otimização no catálogo de imagens.

Atualmente, quatro métodos são usados :

Compressão
Melhoria visual
Conversão de formato de arquivo
Remoção de olhos vermelhos

O Imgix suporta os seguintes formatos de imagem: JPEG, JPEG2000, PNG, GIF, GIF animado, TIFF, BMP, ICNS, ICO, PDF, PCT, PSD, AI.

O Cloudinary suporta os seguintes formatos: JPEG, JPEG 2000, JPEG XR, PNG, GIF, GIF animado, WebP, WebP animado, BMP, TIFF, ICO, PDF, EPS, PSD, SVG, AI, DjVu, FLIF, TARGA.

E o desempenho?

O desempenho da CDN depende principalmente da latência e velocidade.

O atraso é sempre um pouco mais longo para imagens totalmente sem cache. Porém, assim que a imagem chega ao cache e diverge pelos servidores da rede, a CDN global encontra a rota mais próxima do usuário. Juntamente com a economia no tamanho do arquivo, isso quase sempre elimina problemas de latência quando comparado a imagens não otimizadas ou servidores únicos que tentam atender o planeta inteiro.

Ambas as CDNs têm ampla cobertura e servidores rápidos, o que reduz a latência e aumenta a velocidade de download. A velocidade afeta o tempo de carregamento da página e essa é uma das métricas mais importantes para usuários e conversão.

Qual é melhor?

O Cloudinary possui cerca de 160.000 clientes , incluindo Netflix, eBay e Dropbox. O Imgix não informa o número de usuários, mas é menor que o Cloudinary. No entanto, a base Imgix inclui pesos pesados, como Kickstarter, Exposição, remoção de manchas e Eventbrite.

No processamento de imagens, muitos parâmetros não podem ser avaliados objetivamente, o que dificulta a comparação do desempenho dos dois serviços. Depende muito de como você deseja processar a imagem (levará um tempo diferente), de qual tamanho e resolução você precisará no final. No final, o fator mais importante para você pode ser o custo.

CDNs custam dinheiro. Um site pesado com muito tráfego pode pagar centenas de dólares por mês em uma CDN. É necessário um certo nível de conhecimento e habilidades de programação para obter o máximo proveito desses serviços. Mas se você não fizer nada incomum, não haverá problemas especiais.

Conclusão

Se você está carregando atualmente imagens de seu próprio servidor ou planeja fazê-lo, convém pensar em uma CDN.

Cache de imagem

Os recursos podem definir regras de cache através de cabeçalhos de cache HTTP . Em particular, Cache-Controldetermina quem deve armazenar em cache as respostas por quanto tempo.

A maioria das imagens são recursos estáticos que não serão alterados no futuro. A melhor estratégia para eles é o cache agressivo.

Ao configurar cabeçalhos de cache HTTP, configure o Cache-Control por um período de max-ageum ano (por exemplo, Cache-Control:public; max-age=31536000). Esse cache agressivo funciona bem para a maioria das imagens, especialmente para as de longa duração, como avatares e imagens nos cabeçalhos das páginas.

: PHP, - session_cache_limiter . session_cache_limiter('public') , public max-age= . , .

Recursos críticos podem ser pré-carregados usando <link rel = preload> .

<link rel=preload>- Este é um download declarativo que força o navegador a enviar uma solicitação de recurso sem bloquear o evento onloaddo documento. Isso aumenta a prioridade das solicitações de recursos que, de outra forma, seriam detectadas apenas mais tarde durante a análise.

Para pré-carregar imagens, o valor é asindicado como image:

 <link rel="preload" as="image" href="logo.jpg"/>

Desta forma, otimizada a utilização de recursos para <img>, <picture>, srcsete SVG.

Nota: Ele é <link rel=preload> suportado nos navegadores Chrome e Blink, como Opera e Safari Tech Preview , e também é implementado no Firefox.

Sites como Philips , Flipkart e Xerox usam <link rel=preload>para pré-carregar seus logotipos (geralmente usados no início do documento). O caiaque também aplica o pré-carregamento, para que a imagem principal no cabeçalho seja carregada o mais rápido possível.

O que é o cabeçalho de pré-carregamento do Link?

O pré-carregamento do link é definido pela tag HTML ou no cabeçalho HTTP Link Header . De qualquer forma, o link informa ao navegador para começar a carregar o recurso no cache de memória, porque é altamente provável que a página esteja aguardando por esse recurso e você não pode esperar pelo scanner ou analisador de pré-carregamento para detectá-lo.

A legenda para as imagens ficará assim:

 Link: <https://example.com/logo-hires.jpg>; rel=preload; as=image

Quando o Financial Times introduziu essa manchete em seu site, os usuários começaram a abrir o conteúdo 1 segundo mais rápido :

Parte inferior: com <link rel = preload>, parte superior: sem. Comparação do Moto G4 no canal 3G de acordo com o teste do WebPageTest antes e depois da otimização

Da mesma forma, a Wikipedia acelerou o download "para o logotipo", conforme descrito em seu estudo .

Quais são as armadilhas dessa otimização?

Você precisa ter certeza de que o pré-carregamento desse recurso específico é absolutamente necessário, porque ele move o restante do conteúdo para o final da fila. Talvez você deva se concentrar em outro conteúdo?

É importante evitar o rel=preloadpré-carregamento de imagens sem suporte amplo nos navegadores (por exemplo, WebP) e evitar o uso de imagens responsivas definidas no srcset, em que a origem da imagem depende do tipo de dispositivo.

Para obter mais informações, consulte os artigos "Pré-carregamento e prioridades no Chrome" e "Pré-carregamento: por que serve para quê?"

Orçamentos de desempenho da Web para imagens

O orçamento de desempenho é o limite máximo que os desenvolvedores tentam não exceder. Por exemplo, "não mais que 200 KB de imagens em uma página" ou "a interface do usuário deve carregar mais rápido que 3 segundos". Quando o orçamento não for cumprido - saiba por que isso acontece e como corrigir a situação.

Os orçamentos ajudam a discutir os resultados do trabalho. Quando uma decisão de design ou de negócios afeta a produtividade, verifique seu orçamento. Se a mudança não se encaixar no orçamento, essa é a base para adiá-la ou revisá-la.

Descobri que um orçamento de desempenho funciona melhor se o monitoramento for automatizado. Em vez de estudar as agendas da rede, um serviço é iniciado manualmente, o que sinaliza automaticamente que o orçamento foi excedido. Dois desses serviços úteis sãoCalibre e SpeedCurve .

Assim que um orçamento para o tamanho da imagem é determinado, o SpeedCurve inicia o monitoramento e alerta sobre excedentes: o

Calibre oferece uma configuração de orçamento para cada classe de dispositivos. Isso é útil porque o orçamento para o tamanho das fotos de um PC de mesa via Wi-Fi pode ser muito diferente do orçamento para telefones celulares.

Recomendações finais

Por fim, a escolha da estratégia de otimização de imagem se resume aos tipos de imagens que você distribui aos usuários e a um conjunto razoável de critérios de avaliação de seleção. Pode ser SSIM ou Butteraugli e, em um pequeno conjunto de ilustrações, você pode confiar em seus próprios olhos: o que parece melhor e o que é pior.

Aqui estão minhas recomendações finais:

Se você não pode fornecer imagens em diferentes formatos, dependendo do suporte no navegador:

O Guetzli + jpegtran do MozJPEG está bem otimizado para JPEGs acima de 90.
- Para a web, a qualidade é q=90muito dispendiosa. É o suficiente para fotos comuns q=80e até 2 × para DPR q=50. Como o Guetzli não atinge um nível tão baixo, você pode usar o MozJPEG para a web.
- Cornel Lesinsky melhorou recentemente a equipe cjpeg no mozjpeg, adicionando um pequeno perfil sRGB para ajudar o Chrome a exibir cores naturais em displays de ampla gama de cores.
PNG pngquant + advpng fornece uma boa taxa de velocidade / compactação.

Se você pode renderizar imagens em diferentes formatos, dependendo do suporte do navegador usando <picture>, o cabeçalho Accept ou Picturefill :

Dê o WebP aos navegadores que o suportam
- Crie WebP a partir de imagens originais de 100% de qualidade. Caso contrário, você enviará ao seu navegador imagens de menor qualidade e maior volume com distorção JPEG e distorção WebP! Se você compactar a imagem de origem com o codec WebP, a distorção será menos perceptível e o nível de compactação será mais alto.
- As configurações padrão do WebP -m 4 -q 75são boas para a maioria dos casos, como a proporção ideal de velocidade e taxa de compactação.
- O WebP possui um modo de compactação sem perdas especial ( -m 6 -q 100), que reduz os arquivos examinando todas as combinações de parâmetros. Esta é uma ordem de magnitude mais lenta, mas vale a pena para recursos estáticos.
O fallback é Guetzli / MozJPEG para navegadores que não oferecem suporte ao WebP.

Boa compressão!

Nota: para obter dicas mais práticas de otimização de imagem, recomendo o Web Performance in Action de Jeremy Wagner. O livro High Performance Images também possui muitas ótimas dicas e nuances.

Pequenas coisas

JPEG XT JPEG 1992 . 1992 , libjpeg-turbo ( ).
PIK — , . JPEG, Guetzli. 33% JPEG, 54% , libjpeg. Guetzli . , PIK . , , ( 2017 ).
ImageMagick . , , . libvips , . ImageMagick , .
Blink ( Chrome) . . . , . img.decode() API .

Otimização da Web: a mais importante