Ajude-me a entender a compressão de imagem

Não tenho certeza se entendi a compressão de imagem no Discourse. Esclareça para mim.

  • Fiz o upload de uma imagem de 2392x884 com 214kb e a resolução permaneceu a mesma.
  • Fiz o upload de uma imagem de 3200x1800 com 1,7mb e a resolução foi reduzida para o limite de composer media optimization image resize dimensions threshold.

Com a configuração em 1280 de largura, eu esperava que todas as imagens fossem reduzidas para essa largura. No entanto, parece que o composer media optimization image bytes optimization threshold estabelece o precedente.

  • Minha primeira imagem estava abaixo de 524kb, então não foi alterada.
  • A segunda imagem estava acima de 524kb, então foi alterada.

Se entendi corretamente, existe uma maneira de reduzir todos os arquivos enviados para 1280 de largura?

Aqui estão minhas configurações para confirmar:

max image size kb = 4096

Talvez definir esse limite muito baixo?

4 curtidas

Como o tópico é nomeado de forma muito geral, não vou iniciar um novo tópico :kissing_face_with_smiling_eyes:, mas o que significa otimização do lado do cliente na prática - um sistema operacional do dispositivo decidirá se fará ou não algo? Mas isso levará à situação em que uma imagem enorme terá que ser transferida para o cliente antes que seu tamanho seja alterado para uma escala decente, ou estou totalmente perdido agora?

Após testar, está correto :slight_smile:
Acredito que a solução do @pfaffman seja o caminho a seguir para alcançar o que você deseja.

Explicação longa: Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG
Explicação curta: imagens grandes são redimensionadas/recomprimidas no seu dispositivo (via javascript) antes de serem enviadas para o Discourse.

3 curtidas

Certo, funciona nessa direção. Bem, essa é uma maneira muito mais inteligente do que otimizar para outra direção :man_facepalming:

Obrigado.

Eu tentei isso ontem à noite antes de postar e essa parece ser a chave.

Aqui está o negócio:

composer media optimization image bytes optimization threshold

  • Configuração de 524288 (padrão) = Imagem de boa qualidade, 1920px.
  • Configuração de 200000 = Imagem degradada, pois reduz a resolução de 1920 para 1280.

Então, esta manhã, no meu desktop, peguei a mesma imagem (2392px), redimensionei para 1280px e ela também degradou um pouco. Então a degradação que não consigo contornar. É um produto da redução da resolução de 2392px para 1280px. No entanto, reduziu o tamanho da imagem em quatro vezes.

Observação: fotos .HEIC não seguem as mesmas regras. Um .HEIC de 4032px foi reduzido para 2016px. Então, não sei como essa configuração foi aplicada.

No geral, acho que entendi, depois de um pouco de tentativa e erro. Acho que usarei as configurações padrão, gosto muito da nitidez extra de uma foto de 1920px em vez de 1280px.

Espero que isso ajude outra pessoa.

Editar: Reduzi composer media optimization image bytes optimization threshold do padrão 524288 para 200000. Notei, ao fazer upload de um arquivo .png básico em 1220px @ 414kb, que resultou apenas em um tamanho de arquivo de 406kb. Ao reduzir a configuração acima para 200000, o tamanho do arquivo foi reduzido de 414kb para 201kb. A resolução permaneceu inalterada.

Então, não sei o que mais está sendo acionado com essa configuração, mas claramente algo mais para reduzir ainda mais o tamanho da imagem.

Acho o diagrama na publicação do blog útil:

X → composer media optimization image bytes optimization threshold
Y → composer media optimization image resize dimensions threshold
Z → composer media optimization image resize width target

6 curtidas

Receio ter que ser burro por não entender completamente esta parte ao olhar as definições das configurações:

composer_media_optimization_image_dimensions_resize_threshold: padrão 1920
Largura mínima da imagem para acionar o redimensionamento do lado do cliente

composer_media_optimization_image_dimensions_resize_target: padrão 1920
Imagens mais largas que composer_media_optimization_image_dimensions_resize_threshold serão redimensionadas para esta largura.
Deve ser ≥ que o limite.

Esta parte especificamente:

Deve ser ≥ que o limite.

Não deveria ser ≤ em vez disso? Não entendo por que redimensionaria para um valor de largura maior do que o limite :thinking:

Além disso, na descrição da mesma configuração, a primeira configuração está com o nome incorreto:

composer_media_optimization_image_dimensions_resize_threshold

O nome correto é “Composer media optimization image resize dimensions threshold” (“resize dimensions”, não “dimensions resize”).