이미지 압축 원리 이해하기

Discourse의 이미지 압축 방식이 정확히 어떻게 작동하는지 잘 이해가 되지 않습니다. 좀 설명해 주실 수 있나요?

  • 2392x884 해상도의 214kb 이미지를 업로드했는데 해상도가 그대로 유지되었습니다.
  • 3200x1800 해상도의 1.7mb 이미지를 업로드했는데 해상도가 composer media optimization image resize dimensions threshold 설정값에 맞춰 축소되었습니다.

해당 설정을 너비 1280으로 지정해 두었는데, 모든 이미지가 이 너비로 축소될 거라고 기대했습니다. 하지만 composer media optimization image bytes optimization threshold 설정이 우선순위를 갖는 것 같습니다.

  • 첫 번째 이미지는 524kb 미만이었기 때문에 변경되지 않았습니다.
  • 두 번째 이미지는 524kb를 초과했기 때문에 변경되었습니다.

제가 이해한 대로라면, 업로드된 모든 파일을 너비 1280으로 축소하는 방법이 있을까요?

확인용 설정값은 다음과 같습니다:

max image size kb = 4096

그 임계값을 아주 낮게 설정해 보시겠습니까?

주제가 매우 일반적인 방식으로 명명되어 있어서 새 주제를 만들지 않겠습니다. :kissing_face_with_smiling_eyes: 그런데 클라이언트 측 최적화가 실제로는 무엇을 의미하나요? 기기의 운영체제가 작업을 수행할지 말지를 스스로 결정하는 건가요? 그렇다면 거대한 이미지가 클라이언트로 전송된 후에야 비로소 적절한 크기로 줄어든다는 상황이 생기는데, 제가 완전히 오해하고 있는 건가요?

테스트 결과, 맞습니다 :slight_smile:
원하시는 결과를 얻으려면 @pfaffman님의 해결책이 최선의 방법이라고 생각합니다.

긴 설명: Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG
짧은 설명: 큰 이미지는 Discourse로 전송되기 전에 사용자 기기에서(JavaScript를 통해) 리사이즈/재압축됩니다.

맞아요, 그 방향으로 작동하네요. 음, 다른 방향으로 최적화하는 것보다 훨씬 더 똑똑한 방법이네요 :man_facepalming:

감사합니다.

게시글을 올리기 전 어젯밤에 이미 시도해 보았는데, 이것이 핵심인 것 같습니다.

상황은 다음과 같습니다:

composer media optimization image bytes optimization threshold

  • 524288 (기본값) 설정 = 좋은 품질의 이미지, 1920px.
  • 200000 설정 = 화질이 저하된 이미지, 해상도가 1920px에서 1280px로 떨어지기 때문입니다.

따라서 오늘 아침 데스크톱에서 동일한 이미지(2392px)를 1280px로 리사이즈했는데, 이 경우에도 화질이 약간 저하되었습니다. 따라서 이 화질 저하는 피할 수 없는 것 같습니다. 이는 해상도를 2392px에서 1280px로 낮추는 것의 결과입니다. 다만 이미지 크기는 4분의 1로 줄었습니다.

참고: .HEIC 사진은 동일한 규칙을 따르지 않습니다. 4032px의 .HEIC 파일이 2016px로 줄었습니다. 따라서 해당 설정이 어떻게 적용되었는지 알 수 없습니다.

전체적으로, 시행착오를 거쳐 이제 이해가 가는 것 같습니다. 기본 설정을 사용하기로 결정했는데, 1280px보다 1920px 사진의 선명함이 훨씬 마음에 듭니다.

이 정보가 다른 분들에게 도움이 되기를 바랍니다.

수정: composer media optimization image bytes optimization threshold를 기본값인 524288에서 200000으로 낮췄습니다. 1220px, 414kb인 기본 .png 파일을 업로드했을 때 파일 크기가 406kb로만 줄어드는 것을 확인했습니다. 위의 설정을 200000으로 낮추자 파일 크기가 414kb에서 201kb로 줄었습니다. 해상도는 변경되지 않았습니다.

즉, 해당 설정으로 인해 무엇이 더 트리거되는지는 알 수 없지만, 이미지 크기를 추가로 줄이기 위해 분명히 다른 것이 실행되고 있는 것입니다.

블로그 게시물의 다이어그램이 도움이 됩니다:

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

설정 정의 부분을 볼 때 이 부분을 제대로 이해하지 못해서 정말 바보 같다는 생각이 듭니다:

composer_media_optimization_image_dimensions_resize_threshold: 기본값 1920
클라이언트 측 리사이즈를 트리거하기 위한 최소 이미지 너비

composer_media_optimization_image_dimensions_resize_target: 기본값 1920
composer_media_optimization_image_dimensions_resize_threshold보다 넓은 이미지는 이 너비로 리사이즈됩니다.
해당 임계값보다 크거나 같아야 합니다.

특히 이 부분입니다:

Must be ≥ that threshold.

여기서는 ≥ 대신 ≤가 되어야 하지 않나요? 임계값보다 더 큰 너비 값으로 리사이즈하는 이유를 이해할 수 없습니다 :thinking:

또한 같은 설정의 설명에서 첫 번째 설정 이름이 잘못 표기되어 있습니다:

composer_media_optimization_image_dimensions_resize_threshold

올바른 이름은 "Composer media optimization image resize dimensions threshold"입니다( "dimensions resize"가 아니라 “resize dimensions”).