Optimisation d'images composer en cours de test

Don · Juillet 17, 2021, 2:43

Ah, je vois… Il semble que mon Huawei soit trop faible pour le faire, mais je viens de l’essayer avec mon iPhone et la fonction de redimensionnement fonctionne également bien. C’est super ! Merci

fearlessfrog · Juillet 19, 2021, 7:31

Cette image de 9 Mo fonctionne ici, mais pas sur notre site qui exécute la version 2.8.0.beta3 (Chrome sur Windows, version de bureau 91). Lors de la sélection pour téléchargement (non par glisser-déposer, mais via le sélecteur de fichiers du périphérique), aucune erreur ni message utilisateur n’est affiché ; elle semble simplement être rejetée silencieusement.

Nos paramètres de fichiers sont tous par défaut, je pense (taille maximale de l’image : 4096 Ko, optimisation des médias du compositeur activée, stockage S3, CDN Cloudfront, etc.).

Je ne vois rien dans les journaux ou dans la console du navigateur. Les fichiers plus petits semblent fonctionner et être redimensionnés correctement.

Que faire ? C’est-à-dire, quelles informations puis-je collecter pour aider à approfondir le diagnostic ?

Falco · Juillet 19, 2021, 7:44

Essayez d’activer les journaux verbeux :

#ssh dans le serveur
cd /var/discourse
./launcher enter app
rails c
SiteSetting.composer_media_optimization_debug_mode = true

Ensuite, essayez de télécharger l’image à nouveau, et après l’échec, ouvrez les journaux du navigateur.

Aussi, pouvez-vous partager l’image originale ?

fearlessfrog · Juillet 19, 2021, 8:04

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 · Juillet 19, 2021, 8:18

Votre site présente deux problèmes.

Votre site est derrière le proxy complet de Cloudflare. Vous pouvez accéder à vos paramètres DNS et passer le nuage orange en gris pour désactiver cette fonction. Il est connu que Discourse plante aléatoirement lorsqu’il est derrière les transformations de Cloudflare.
Votre site n’est pas configuré pour le HTTPS. Vous ne l’avez pas détecté plus tôt à cause du point 1. Chaque nouvelle API de navigateur est désormais exclusive au HTTPS, et chaque site public devrait utiliser le HTTPS. Vous devez configurer correctement le HTTPS, puis revenir dans la console Rails et exécuter SiteSetting.force_https = true.

fearlessfrog · Juillet 19, 2021, 8:26

« Problèmes » est un terme bien fort, c’est plutôt une bizarrerie délibérée — nous désactiverons simplement cette nouvelle fonctionnalité si vous êtes maintenant certain qu’elle n’est pas compatible avec Cloudflare. Nous n’utilisons ni Brotli ni Rocket Loader.

Nous utilisons Cloudflare pour gérer des sous-domaines génériques (wildcard) sur S3/Cloudfront et des règles de page pour les redirections HTTPS. C’est donc un choix délibéré de notre part qui nous permet d’économiser sur l’hébergement autonome — S3 upload bucket, cdn url and bucket name in CNAME - #7 by fearlessfrog

Falco · Juillet 19, 2021, 8:32

Le principal problème est que si votre site est accessible en HTTPS, SiteSetting.force_https doit être défini à true. Pouvez-vous essayer cela ?

Nous utilisons ce paramètre pour générer les liens vers le forum Discourse ; sans lui, les liens dans les e-mails, par exemple, seront par défaut en HTTP :

fearlessfrog · Juillet 19, 2021, 8:40

Oui, cela semble fonctionner – merci !

Nous avions laissé cela désactivé pendant si longtemps, car le SSL « Flexible » côté Cloudflare était déjà pratiquement ouvert en termes de sécurité. De toute façon, tout ce qui arrivait était redirigé vers HTTPS via la règle de page, et je n’étais pas certain de l’impact. Nous avons d’autres sites sous le domaine .mudspike.com qui nécessitent cette configuration CF, de sorte que le forum a été mal configuré ainsi depuis un certain temps.

Je reçois ceci dans le journal du navigateur lors du téléchargement, mais l’image se compresse/redimensionne correctement côté client. Il se peut donc qu’il s’agisse simplement de solutions de repli valides faisant partie du codage moxjpeg.

mozjpeg_enc.js:1 échec de la compilation du flux wasm : TypeError: Échec de l'exécution de 'compile' sur 'WebAssembly' : Type MIME de réponse incorrect. 'application/wasm' attendu.
(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 basculement vers l'instanciation de 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` a échoué car votre serveur ne sert pas de wasm avec le type MIME `application/wasm`. Basculement vers `WebAssembly.instantiate`, qui est plus lent. Erreur d'origine :
 TypeError: Échec de l'exécution de 'compile' sur 'WebAssembly' : Type MIME de réponse incorrect. 'application/wasm' attendu.
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

Merci pour votre aide.

Falco · Juillet 19, 2021, 8:41

Cela a été corrigé dans notre nginx il y a quelque temps. Quand avez-vous reconstruit pour la dernière fois ? Pouvez-vous essayer de reconstruire ?

fearlessfrog · Juillet 19, 2021, 8:42

J’ai reconstruit ce matin – nous sommes là : https://github.com/discourse/discourse/commits/1472e47aae5bfdfb6fd9abfe89beb186c751f514

EDIT : En fait, j’ai effectué la mise à niveau ce matin via l’interface web et récupéré la mise à niveau du gestionnaire Docker, mais je vais me connecter en SSH, reconstruire et revenir vers vous avec un rapport.

fearlessfrog · Juillet 19, 2021, 8:52

Oui, la dernière image corrige cela — merci.

Faizan_Zahid · Août 1, 2021, 10:56

Super amélioration les gars.

Falco · Septembre 10, 2021, 5:38

J’ai maintenant un vrai appareil photo (Canon EOS Rebel SL3) pour tester cette fonctionnalité, alors essayons :

De 6,1 Mo à 140 Ko

Sujet		Réponses	Vues
Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG \| Blog Blog	36	5042	Mai 13, 2025
Optimize images before uploading? Feature	57	43133	Avril 22, 2021
Optional image optimization before upload Feature rfc	7	2776	Juin 23, 2021
Image upload stuck with "Processing" message Support	11	1755	Novembre 14, 2021
Image upload size/resize question Support	24	5618	Avril 4, 2021

Optimisation d'images composer en cours de test

Sujets connexes