https://oliveyoung.tech/2025-04-25/web-worker-for-image-processing/
문제 상황
개념정리
<aside>
🎯
HEIC High Efficiency Image Format 고효율 이미지 포맷
- 2017년부터 iPhone과 iPad의 기본 파일 형식으로 사용
- JPEG 보다 더 높은 압축률로 이미지를 저장
- 파일 크기를 줄이고 저장 공간을 효율적으로 활용 가능
</aside>
<aside>
🎯
픽셀 pixel
- 픽셀은 이미지를 구성하는 가장 작은 단위
- 1920 * 1080 은 가로 1920px, 세로 1080px 를 의미하고 총 2,073,500개의 점으로 구성
- 각 픽셀은 8 bit 씩 3 채널 (R, G, B) 총 24bit (3byte)의 용량
- 입축 전 원본 비트맵의 이미지는 가로 * 세로 * 3 byte의 용량
</aside>
<aside>
🎯
비트맵 bitmap
- 비트(bit)와 맵(map)의 합성어
- 비트의 배열 형태로 된 자료구조
- 컴퓨터 그래픽에서의 비트맵은 각 픽셀에 저장된 비트 정보로 색상을 표현합니다.
- 이를 래스터 이미지Raster Image 라고도 합니다.
- 래스터 이미지는 픽셀 격자로 정의된 이미지 파일을 의미합니다.
- JPG, JPEG, BMP등 컴퓨터에서 사용하는 대다수의 이미지는 비트맵 방식을 사용합니다.
</aside>
<aside>
🎯
래스터(Raster, bitmaps)
Raster는 RGB 색상값을 가진 하나의 픽셀들이 모여 이미지를 생성
PPI(pixels per inch): 1 inch정사각형 안에 몇개의 픽셀을 갖고 있는지 나타내는 단위
- Raster 이미지의 선명도는 PPI단위로 나타낼 수 있습니다.
- 인쇄물 용도로 제작하는 이미지는 최소 300PPI를 요구
- 높은 PPI로 이미지를 제작했더라도 이를 출력하는 디바이스의 해상도와는 관련이 없습니다.
- 높은 PPI의 이미지는 실제 이미지를 프린터로 출력할 때 고려해야 합니다.
- 이미지의 사이즈는 디바이스 해상도와 이미지의 실제 넓이와 높이에 영향을 받습니다.
- 해상도가 높으면 같은 물리적 디바이스 크기에서 픽셀을 더 많이 출력할 수 있습니다.
- 이미지 출력 시 (ex) 440 x 550 크기 이 픽셀단위는 고정값입니다.
낮은 해상도 모니터에서는 같은 픽셀수를 더 넓은 면적에 걸쳐서,
픽셀을 키워 보여주므로 덜 선명하게 보이고,
높은 해상도 모니터에서는 같은 픽셀 수를 더 작은 면접에 걸쳐서,
픽셀을 더 작게 보여주므로 더 선명하게 느껴집니다.
- 이미지 정보량은 고정이고 고해상도 디스플레이는 이를 압축해서 선명하게 보일 뿐,
출력하는 디바이스의 PPI를 높여서는 실제 이미지 정보가 많아지지는 않습니다.
- 일정 픽셀 안에 고정된 컬러값과 사이즈를 갖고 있으므로 이미지 확대 시 깨짐현상이 발생합니다.
</aside>
<aside>
🎯
벡터(Vector)
- 래스터 이미지 확대 시 깨짐현상을 보완한 것이 벡터입니다.
- 벡터는 꼭지점vertices과 연결된 선paths 으로 구성됩니다.
- point는 x,y 좌표 값 정보
- path에는 선의 색상과 모양, 굵기 정보
- 이미지를 확대해도 고유정보를 갖고 있어 깨지지 않습니다.
- SVG 파일이 이에 해당하며, (확대 시 깨지지 않으므로) 반응형 디자인 고려 시 적합한 그래픽 포맷입니다.
</aside>
<aside>
🎯
대용량 이미지의 특성
- 크기 4MB 이상
- 해상도 4000px 이상
- 가로 해상도 * 세로 해상도 * 3byte (채널, RGB)
- 12,000,000 * 3 = 36,000,000 약 36MB(비압축상태)
- HEIC > JPEG 변환 시 품질 저하 없이 용량 증가
- 메타데이터(EXIF) 포함으로 추가 용량
</aside>
문제 01 브라우저 이미지 처리 부하
이미지 업로드 전 해당 이미지를 미리 볼 수 있도록 이미지 컴포넌트를 렌더링 합니다.
이미지를 업로드 할 때 브라우저에서는 다음과 같은 과정을 거칩니다.
- 이미지를 JPEG로 디코딩 → 압축 해제 → 메모리 할당 후 픽셀 데이터로 저장