Composer 이미지 최적화 테스트

Optional image optimization before upload에서 이어지는 토론:

이 기능은 이제 Meta에서 테스트용으로 사용 가능합니다. 여기에 이미지를 업로드하면 서버로 전송되기 전에 사용자 브라우저에서 리사이즈/인코딩이 수행됩니다.

이 주제에서 또는 “composer media optimization image enabled” 사이트 설정을 활성화하여 자신의 커뮤니티에서 직접 사용해 보세요. 테스트 기간 동안 기본값은 비활성화되어 있습니다.

차이를 보여주기 위해, 다음은 업로드 전/후 비교입니다:


이 사진은 제 스마트폰으로 방금 촬영한 것으로, 기본 설정을 사용하여 3.7Mb에서 416Kb로 줄었습니다.

이 기능의 목표는 @sam이 여기에서 설명한 것과 같습니다:

Discourse는 기본적으로 사용자 업로드에 대해 4MB 한도를 적용합니다. 이제 58MB의 JPEG 파일을 드래그 앤 드롭할 수 있습니다:

그리고 문제없이 업로드됩니다.

46개의 좋아요

10년 전에 찍은 나무 사진 57MB를 작성창에 끌어다 놓아 봤습니다

꽤 빠르네요! :rocket:

29개의 좋아요

잘하셨습니다!

로딩 퍼센트 미터에 대해 작은 점 하나만 말씀드리자면, 이 6.1MB HEIC 이미지를 업로드할 때 100%에 비교적 빠르게 도달한 후 약 50초 동안 그대로 머물러 있다가 완료되었습니다. 이로 인해 혼란이나 업로드 취소가 발생할 수 있습니다.

문제를 보여주는 영상: Image optimization loading percentage | Loom

20개의 좋아요

정말 좋습니다. 간단히 질문 하나만 드려도 될까요? 아마도 당연한 질문일 수 있지만, 사이트의 제한 크기보다 큰 이미지에서만 활성화되도록 설정할 수 있을까요? 즉, 제한 크기 이하의 이미지는 처리하지 않고, 누군가가 제한을 초과하려고 할 경우 자동으로 축소되는 것처럼 보이게 하는 것입니다.

14개의 좋아요

오래도록 기다려왔던 기능이에요 :heart_eyes: Falco님 감사합니다.

한 가지 질문이 있습니다. 기존 이미지들을 재베이크(Rebake)로 최적화하나요, 아니면 새로 업로드된 이미지만 적용되나요? 다시 한번 감사합니다 :slightly_smiling_face:

4개의 좋아요

이 새 기능을 HEIF 이미지에 대해 테스트하지 않으셨는데, HEIF 이미지에선 이 기능이 작동하지 않기 때문입니다. HEIF를 지원하고 싶었지만, 해당 형식을 디코딩하는 브라우저 지원은 사실상 존재하지 않습니다. HEIF/HEIC image format | Can I use... Support tables for HTML5, CSS3, etc. 따라서 이미 상당한 기간 동안 정상적으로 작동해 온 서버 측 HEIF 변환 기능을 테스트하신 것입니다.

WebAssembly 디코더를 배포하면 작동하게 만들 수 있지만, 이러한 이미지는 매우 드물어 서버 측 변환 기능( @pmusaraj 님이 작업하신 것)이 이미 존재하므로 필요하다고 생각하지 않았습니다.

현재 이 기능은 JPG, PNG, GIF를 가져올 수 있습니다. AVIF/JPEGXL/TIFF 지원은 쉽게 추가할 수 있으며, 곧 그렇게 할 예정입니다.

네! composer media optimization image kilobytes optimization threshold 값을 원하는 값으로 조정하시면 됩니다.

아니요, 그렇지 않습니다. 이 작업은 업로드 직전에 사용자 브라우저에서 실시간으로 수행됩니다. rebake는 서버 측 프로세스이므로 두 과정은 상당히 다릅니다.

13개의 좋아요

(2020년 첫 번째 봉쇄 기간 동안 시내에서 촬영한 28MB 사진)

1Gbps에서 1Mbps까지 다양한 연결 속도로 업로드를 테스트했습니다. 1Mbps 대역폭을 제외하고는 모두 잘 작동했습니다. 후자의 경우 업로드 동작이 다소 이상했습니다.

오래도록 0%에 멈춰 있다가, 갑자기 빠르게 퍼센트가 올라갔습니다(1Mbps 연결로 업로드하는 속도보다 빠르게요). 그리고 이 메시지가 표시되기 전에 100%에 오랫동안 멈춰 있었습니다:

참고로 제 사진의 원래 형식은 jpg이고 png가 아닙니다… :thinking:

[Uploading: 20200328_141218.jpg...]()가 게시글에 그대로 남아 있었으며, 사진이 표시되지 않았습니다.

3개의 좋아요

두 가지 문제:

  1. 이미지 업로드 중 메시지를 취소하고 초안을 삭제한 후, 새로운 답글을 작성하려고 하면 작성기에 여전히 로딩 진행률이 표시됩니다:

    이를 없애려면 페이지를 새로고침해야 합니다.

  1. 사이트에서 50MB 이미지의 전송과 표시를 허용하는데, 여기에서 가져온 21600×21600 해상도의 108MB 이미지를 전송하려고 하면 다음과 같은 메시지가 표시되어 사용자가 혼란스러워할 수 있습니다:

    여기서의 혼란은 4MB 초과가 금지되어 있음에도 불구하고 50MB 이상의 이미지는 허용되는 점입니다.
    이 이미지를 업로드할 수 없는 실제 이유는 무엇인가요?

2개의 좋아요

정말 멋진 사진이네요! 28MB에서 113KB로 줄어든 비율은 꽤 훌륭합니다!

즉, 이 새로운 기능은 ‘업로드 전’ 단계만 변경합니다. 업로드하려는 파일을 가로채 변환을 적용한 후, 새롭고 더 작은 파일로 교체하여 기존 업로드 프로세스를 재개합니다.

업로드 전 단계에서는 0%에 머물러 있고 "처리 중…"이라는 표시가 나타나므로, 이는 예상되는 동작입니다. 하단의 “업로드 중…” 문자열도 함께 교체하도록 시도해 보겠습니다.

4MB는 여전히 금지되어 있습니다. 트릭은 이미지를 최적화하여 가능할 경우 4MB 이하로 줄여 파일 크기 제한을 통과하도록 하는 것입니다.

해당 사이트의 몇 가지 이미지를 시도해 보았지만, 모두 PNG 투명도를 사용하므로 JPG로 안전하게 변환할 수 없었고 최적화기가 실패했습니다.

방금 60MB PNG를 테스트했는데, 최적화기는 이를 처리할 수 있지만, 360KB JPG를 얻기 위해 4GB 이상의 RAM을 사용했습니다.

이 테스트에서 사용하신 기기, 브라우저 및 OS 버전은 무엇이었나요?

5개의 좋아요

지금 정확히 어떤 일이 일어나고 있는지 알 수 있도록 '업로드 처리 중’이라는 새로운 컴포저 상태 메시지를 추가했습니다.

이 기능은 이제 안전하게 테스트할 수 있습니다. 여러분의 커뮤니티에서 어떻게 작동하는지 알려주세요!

9개의 좋아요

아이폰으로 촬영한 1.6MB 사진을 시도해 보았습니다:

와, 300KB인데 화질이 매우 높네요.

6개의 좋아요

5개의 좋아요

8개의 좋아요

Falco님, 안녕하세요.

저는 Composer의 이미지 최적화 기능을 사용하기 시작했습니다. 여러 장의 사진을 업로드하려고 하면 첫 번째 이미지가 업로드된 직후 답글 버튼이 활성화되고, 다음 이미지 최적화가 완료될 때까지 비활성화되지 않는 것을 확인했습니다. 이 사이에 답글 버튼을 클릭하면 다른 이미지 업로드가 멈추고 텍스트만 작성(처리 중) 상태로 남습니다. 제 환경에서는 재현이 어려운데, Meta에서는 버튼이 빠르게 전환되지만 제 사이트에서는 업로드 사이에 대부분 ~10초 이상 멈추는 현상이 발생합니다. 기본 설정을 사용 중이며 3MB~4MB 크기의 이미지를 3장 업로드했습니다.

Huawei P20 Pro Android 10 (Chrome 91.0. 4472.120) 웹앱에서 테스트해 보았습니다.

동영상에서 보시다시피 업로드(Feltöltés) 후 답글 버튼이 활성화됩니다. 각 이미지는 약 2.3MB입니다.

이미지 업로드가 진행되는 동안 답글 버튼을 항상 비활성화할 수 있을까요?


이 설정에 대해 혼란스럽습니다. "킬로바이트(kilobytes)"가 올바른 단위인가요?

답변 주셔서 감사합니다! :slight_smile:

3개의 좋아요

리포트해 주셔서 감사합니다! 버튼의 비활성화 상태를 계산할 때 버그가 있었습니다:

네, Kilobyte - Wikipedia 를 참고해 주세요. 기본값은 반 메가바이트(0.5MB)이지만, 필요에 따라 조정할 수 있습니다. 가장 많은 공간을 절약하려면 약 300KB 정도로 낮추는 것을 권장합니다.

5개의 좋아요

수정해 주셔서 감사합니다. :slightly_smiling_face:

아, 그렇군요. 처음에는 바이트를 킬로바이트로 잘못 표기한 줄 알았어요. 변환기에 524288kb를 입력하니 512mb라고 나오더라고요. 그래서 혼동했던 겁니다. 하지만 이제 이해했어요 :slightly_smiling_face: 감사합니다

3개의 좋아요

아, 이제 보니깐! 내 실수였네요!

3개의 좋아요

안녕하세요,

수정해 주셔서 감사합니다 :slight_smile: 이제 완벽하게 작동합니다!

모바일 업로드에 대해 질문이 있습니다. 모바일에서 이미지를 업로드하면 목표 픽셀 폭에 맞게 이미지가 리사이즈되지 않습니다. 품질만 변경되는 것 같습니다. 데스크톱 PC에서는 리사이즈가 정상적으로 작동합니다. 제가 놓친 부분이 있을까요? 감사합니다 :slight_smile:

2개의 좋아요

모바일과 데스크톱 모두에서 리사이즈를 시도하지만, 기기의 하드웨어 성능이 낮으면 리사이즈 작업이 실패할 수 있습니다. 그런 경우 우리는 해당 작업을 건너뜁니다.

4개의 좋아요