This page contains information related to upcoming products, features, and functionality. It is important to note that the information presented is for informational purposes only. Please do not rely on this information for purchasing or planning purposes. As with all projects, the items mentioned on this page are subject to change or delay. The development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
Status Authors Coach DRIs Owning Stage Created
implemented @craig-gomes @ayufan @timzallmann @joshlambert devops non_devops 2020-10-21

아바타 및 콘텐츠 이미지 크기 조정

현재 모든 업로드된 이미지를 1:1로 표시하고 있으며, 이는 당연히 이상적이지 않습니다. 성능을 크게 향상시키기 위해 백엔드에 이미지 크기 조정을 추가하세요. 이미지 크기 조정을 고려해야 할 두 가지 주요 영역은 아바타와 콘텐츠 이미지입니다. 이 구현의 MVC는 아바타에 중점을 두고 있습니다. 아바타 요청은 총 이미지 요청의 약 70%를 차지합니다. 이 첫 번째 MVC의 범위는 지원할 의도인 크기의 식별된 세트로 매우 제한적입니다. 콘텐츠 이미지 크기 조정은 크기와 기능에 대한 고려해야 할 사항이 훨씬 많습니다. 이미지 크기 조정을 통해 성능을 향상시키기 위해 같은 목표를 가지고 두 개의 별도 개발 노력이 필요할 수 있습니다.

MVC 아바타 크기 조정

동적 이미지 크기 조정 솔루션을 구현할 때 이미지는 실시간으로 조정되고 최적화되어야 합니다. 이렇게 하면 나중에 새로운 대상 크기를 정의해도 동적으로 추가할 수 있습니다. 일부 측정 결과에 따르면 현재 우리의 로드 크기의 최대 95%를 절약할 수 있다고 합니다. 초기 조사 결과, 약 165만 개의 아바타를 업로드했으며, 총 약 80GB의 용량을 차지하며, 평균적으로 약 48KB씩입니다. 초기 측정 결과, 가장 일반적인 아바타 차원을 1-3KB로 줄일 수 있으며, 현재 크기의 90% 이상을 절감할 수 있습니다. MVC에서는 응용 프로그램 수준 캐싱을 고려하지 않고 CDNs 및 브라우저에서 구현된 HTTP 기반 캐시에 완전히 의존하지만, 나중에 이 결정을 재검토할 수 있습니다. 아바타 크기 조정의 성능 문제를 완화하기 위해 특히 Self-Managed의 경우, 동적 이미지 크기 조정을 비활성화하기 위해 운영 기능 플래그가 구현되었습니다.

sequenceDiagram autonumber Requester->>Workhorse: 들어오는 요청 Workhorse->>RailsApp: 들어오는 요청 alt All is true: 1.아바타가 요청됨, 2.요청된 너비가 허용됨, 3.기능이 활성화됨 Note right of RailsApp: 너비 허용목록: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/models/concerns/avatarable.rb#L10 RailsApp->>Workhorse: `send-scaled-img:` 요청 Note right of RailsApp: `send-scaled-img:` 헤더 설정 Workhorse->>Workhorse: Go lib를 사용한 이미지 크기 조정 Workhorse->>Requester: 조정된 이미지 제공 else All other cases RailsApp->>Workhorse: 일반적인 요청 시나리오 Workhorse->>Requester: 일반적인 요청 시나리오 end

콘텐츠 이미지 크기 조정

콘텐츠 이미지 크기 조정은 다루기 더 복잡한 문제입니다. 정해진 크기 제한이 없으며 고려해야 할 추가적인 기능 또는 요구 사항이 있습니다.

  • 동적 WebP 지원 - WebP 형식은 일반적으로 JPEG보다 평균적으로 30% 이상의 압축률을 달성하면서도 이미지 품질을 잃지 않습니다. 자세한 내용은 Google Comparative Study에서 확인할 수 있습니다.
  • 첫 번째 GIF 이미지 추출하여 10MB 픽셀 로딩을 방지
  • 고해상도(DPI) 화면에서 좋은 이미지 제공을 위해 디바이스 픽셀 비율 확인
  • 점진적 이미지 로딩, 이 점진적 이미지 로더를 만드는 방법에 관한 기사에 설명된 것과 유사한 방식
  • 크기 및 선명도에 대한 크기 조정 권고
  • 저장

MVC 아바타 크기 조정 구현은 Workhorse에 통합되어 있습니다. 콘텐츠 이미지 크기 조정의 추가 요구 사항 때문에, GraphicsMagik (GM) 또는 유사한 라이브러리를 더 많이 사용하고, Workhorse에서 분리할 필요가 있을 수 있습니다.

반복 작업

  1. ✓ 다양한 이미지 크기 조정 솔루션에 대한 POC
  2. ✓ 보안 팀과 솔루션 검토
  3. ✓ 아바타 크기 조정 MVC 구현
  4. 배포, 측정, 모니터링
  5. 콘텐츠 이미지 크기 조정을 위한 기능 명확히 하기
  6. 이미지 크기 조정의 현재 구현 vs 새로운 솔루션 사이의 옵션 고려
  7. 콘텐츠 이미지 크기 조정 MVC 구현
  8. 배포, 측정, 모니터링

담당자

제안:

역할 담당자
저자 Craig Gomes
구조 진화 코치 Kamil Trzciński
엔지니어링 리더 Tim Zallmann
도메인 전문가 Matthias Kaeppler
도메인 전문가 Aleksei Lipniagov

DRIs:

역할 담당자
제품 Josh Lambert
리더십 Craig Gomes
엔지니어링 Matthias Kaeppler