Otimização de imagem do composer de teste

Don · Julho 17, 2021, 2:43pm

Ahh, entendi… Parece que meu Huawei é fraco demais para isso, mas tentei agora com meu iPhone e a função de redimensionamento também funciona bem. Que ótimo! Obrigado

fearlessfrog · Julho 19, 2021, 7:31pm

Esta imagem de 9 MB funciona aqui, mas não no nosso site rodando a versão 2.8.0.beta3 (Chrome no Windows, desktop, versão 91). Ao selecioná-la para upload (não arrastada, mas escolhida pelo seletor de arquivos do dispositivo), nenhum erro ou mensagem ao usuário é exibido; ela parece ser rejeitada silenciosamente.

Acho que todas as configurações de Arquivos estão padrão (tamanho máximo de imagem de 4096 KB, otimização de mídia do compositor ativada, armazenamento S3, CDN Cloudfront, etc.).

Não consigo ver nada nos logs ou nos logs do console do navegador. Arquivos menores parecem funcionar e redimensionar corretamente.

O que fazer? Ou seja, que informações posso buscar para ajudar a diagnosticar isso mais a fundo?

Falco · Julho 19, 2021, 7:44pm

Tente ativar os logs detalhados:

#ssh no servidor
cd /var/discourse
./launcher enter app
rails c
SiteSetting.composer_media_optimization_debug_mode = true

Em seguida, tente fazer o upload da imagem novamente e, após a falha, abra os logs do navegador.

Além disso, você pode compartilhar a imagem original?

fearlessfrog · Julho 19, 2021, 8:04pm

Here’s the original file: 9.01 MB file on MEGA

I’ve enabled SiteSetting.composer_media_optimization_debug_mode = true in the rails console but am not seeing anything in terms of extra output in the Chrome browser log as yet. Here’s the Chrome log for

Creating a reply on an existing topic after enabling the debug site setting in the console.
In the composer using the ‘file upload’ widget to pick the 9mb jpg.

Navigated to https://forums.mudspike.com/t/fyi-discourse-forum-software-update-thread/11937/51
64fdc2109944d83fbd7a700960b4b25bb93228af.js?__ws=forums.mudspike.com:2 Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src https://forums.mudspike.com/logs/ https://forums.mudspike.com/sidekiq/ https://forums.mudspike.com/mini-profiler-resources/ https://forums.mudspike.com/assets/ https://forums.mudspike.com/brotli_asset/ https://forums.mudspike.com/extra-locales/ https://forums.mudspike.com/highlight-js/ https://forums.mudspike.com/javascripts/ https://forums.mudspike.com/plugins/ https://forums.mudspike.com/theme-javascripts/ https://forums.mudspike.com/svg-sprite/ https://www.google-analytics.com/analytics.js".

(anonymous) @ 64fdc2109944d83fbd7a700960b4b25bb93228af.js?__ws=forums.mudspike.com:2
51:1 Refused to load the script 'https://static.cloudflareinsights.com/beacon.min.js' because it violates the following Content Security Policy directive: "script-src https://forums.mudspike.com/logs/ https://forums.mudspike.com/sidekiq/ https://forums.mudspike.com/mini-profiler-resources/ https://forums.mudspike.com/assets/ https://forums.mudspike.com/brotli_asset/ https://forums.mudspike.com/extra-locales/ https://forums.mudspike.com/highlight-js/ https://forums.mudspike.com/javascripts/ https://forums.mudspike.com/plugins/ https://forums.mudspike.com/theme-javascripts/ https://forums.mudspike.com/svg-sprite/ https://www.google-analytics.com/analytics.js". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1 Deprecation notice: Import the User class instead of using User (deprecated since Discourse 2.4.0) (removal in Discourse 2.6.0)
e.default @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
get @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
(anonymous) @ 39ea5db47cef6f4231b07f808d8907fea1fd31fa.js?__ws=forums.mudspike.com:1
e.withPluginApi @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
initialize @ 39ea5db47cef6f4231b07f808d8907fea1fd31fa.js?__ws=forums.mudspike.com:1
i.initialize @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.walk @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.topsort @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
_runInitializer @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
runInstanceInitializers @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
_bootSync @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
didBecomeReady @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.invoke @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._run @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
d @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
l @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
c @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
setTimeout (async)
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
u @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
fireWith @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
fire @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
u @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
fireWith @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
ready @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
B @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
Se @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
on @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
setupHandler @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
setup @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
setupEventDispatcher @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
_bootSync @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
didBecomeReady @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.invoke @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._run @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
d @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
l @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
c @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
Se @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
on @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
setupComposerResizeEvents @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
didInsertElement @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
n @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
trigger @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
o.didCreate @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.commit @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.commit @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
o.commit @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._renderRoots @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._renderRootsTransaction @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._renderRoot @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._appendDefinition @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.appendOutletView @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.invoke @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._run @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
d @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
l @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
c @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
Show 2 more frames
vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22 [Violation] 'setTimeout' handler took 373ms

The https://forums.mudspike.com/logs/ is empty, as in, no new entries.

Falco · Julho 19, 2021, 8:18pm

Seu site tem dois problemas.

O site está atrás do proxy completo do Cloudflare. Você pode acessar suas configurações de DNS e transformar a nuvem laranja em cinza para desativar isso. Sabe-se que o Discourse quebra aleatoriamente quando está atrás de transformações do Cloudflare.
Seu site não está configurado para HTTPS. Você não encontrou isso antes por causa do problema 1. Toda nova API de navegador atualmente é exclusiva para HTTPS, e todo site público deve ser HTTPS. Você precisa configurar corretamente o HTTPS e acessar novamente o console do rails para executar SiteSetting.force_https = true.

fearlessfrog · Julho 19, 2021, 8:26pm

Problemas é uma palavra tão forte, na verdade é apenas uma estranheza proposital - vamos simplesmente desativar esse novo recurso se você tiver certeza de que ele não funciona bem com o Cloudflare. Não usamos Brotli nem o Rocket Loader.

Usamos o Cloudflare como uma maneira de fazer wildcard sobre o S3/Cloudfront e regras de página para redirecionar via HTTPS, então isso é proposital para nós e nos economiza alguns custos de hospedagem própria - S3 upload bucket, cdn url and bucket name in CNAME - #7 by fearlessfrog

Falco · Julho 19, 2021, 8:32pm

O principal problema é que, se o seu site estiver disponível via HTTPS, SiteSetting.force_https deve ser verdadeiro. Você pode tentar isso?

Usamos essa configuração para gerar os links do fórum Discourse; sem ela, os links nos e-mails, por exemplo, serão padrão para HTTP:

fearlessfrog · Julho 19, 2021, 8:40pm

Sim, parece que funciona — obrigado!

Deixamos isso desativado por tanto tempo porque o SSL “Flexível” no lado do Cloudflare já era praticamente inseguro de qualquer forma, e tudo que chegava era redirecionado para HTTPS via regra de página, então não tinha certeza do impacto. Temos outros sites no domínio .mudspike.com que precisam dessa configuração do CF, então o fórum ficou mal configurado assim por um tempo.

Aparece isso no log do navegador ao fazer o upload, mas a imagem é comprimida/redimensionada corretamente no lado do cliente, então isso pode ser apenas fallbacks válidos como parte da codificação do mozjpeg.

mozjpeg_enc.js:1 falha na compilação streaming do wasm: TypeError: Falha ao executar 'compile' em 'WebAssembly': Tipo MIME de resposta incorreto. Esperado 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
instantiateAsync @ mozjpeg_enc.js:1
createWasm @ mozjpeg_enc.js:1
(anonymous) @ mozjpeg_enc.js:1
loadLibs @ media-optimization-worker.js:12
optimize @ media-optimization-worker.js:6
onmessage @ media-optimization-worker.js:11
mozjpeg_enc.js:1 usando fallback para instanciação via ArrayBuffer
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
instantiateAsync @ mozjpeg_enc.js:1
createWasm @ mozjpeg_enc.js:1
(anonymous) @ mozjpeg_enc.js:1
loadLibs @ media-optimization-worker.js:12
optimize @ media-optimization-worker.js:6
onmessage @ media-optimization-worker.js:11
squoosh_resize.js:9 `WebAssembly.instantiateStreaming` falhou porque seu servidor não serve wasm com o tipo MIME `application/wasm`. Usando fallback para `WebAssembly.instantiate`, que é mais lento. Erro original:
 TypeError: Falha ao executar 'compile' em 'WebAssembly': Tipo MIME de resposta incorreto. Esperado 'application/wasm'.
load @ squoosh_resize.js:9
async function (async)
load @ squoosh_resize.js:9
init @ squoosh_resize.js:14
async function (async)
init @ squoosh_resize.js:14
loadLibs @ media-optimization-worker.js:12
async function (async)
loadLibs @ media-optimization-worker.js:12
optimize @ media-optimization-worker.js:6
onmessage @ media-optimization-worker.js:11

Obrigado pela ajuda.

Falco · Julho 19, 2021, 8:41pm

Isso foi corrigido em nosso nginx há algum tempo. Quando foi a última vez que você fez o rebuild? Você pode tentar fazer o rebuild novamente?

fearlessfrog · Julho 19, 2021, 8:42pm

Reconstruí esta manhã — estamos aqui: https://github.com/discourse/discourse/commits/1472e47aae5bfdfb6fd9abfe89beb186c751f514

EDIT: Na verdade, fiz a atualização esta manhã pela interface web e peguei a atualização do gerenciador Docker, mas vou fazer SSH, reconstruir e retornar com o resultado.

fearlessfrog · Julho 19, 2021, 8:52pm

Sim, a imagem mais recente corrige isso – obrigado.

Faizan_Zahid · Agosto 1, 2021, 10:56am

Ótima melhoria, pessoal.

Falco · Setembro 10, 2021, 5:38pm

Agora tenho uma câmera real (Canon EOS Rebel SL3) para testar este recurso, então vamos experimentar:

De 6,1 MB para 140 KB

Tópico		Respostas	Visualizações
Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG \| Blog Blog	36	5038	13 de Maio de 2025
Optimize images before uploading? Feature	57	43133	22 de Abril de 2021
Optional image optimization before upload Feature rfc	7	2776	23 de Junho de 2021
Image upload stuck with "Processing" message Support	11	1754	14 de Novembro de 2021
Image upload size/resize question Support	24	5604	4 de Abril de 2021

Otimização de imagem do composer de teste

Tópicos relacionados