2023. 12. 9. 22:50ㆍWeb Frontend
보통 웹 개발 시 피그마를 활용하여 이미지를 잘라 사용하여 최적화 후 웹사이트에 적용할 것이다.
하지만, 미세하게 파고들어 갔더니 아래와 같은 예상치 못한 결과가 나왔다.
아래 원본 이미지를 기준으로 진행한다.
최적화 도구는 FastStone Photo Resizer, TinyPNG 활용했다.
새로운 사실 1. 아래 원본을 피그마 동일한 크기로 업로드 후 추출만 했을 뿐인데 화질 차이가 심하게 나고 있다.
우측을 보면, 전체적으로 흐리멍덩하고 뿌연 화질이다.
특히, 피그마에서 추출 시 아래 붉은색 표기된 부분과 전체적으로 블록형태의 깨짐이 발생했다. 피그마에서 이미지 랜더링 과정에서 화질을 갉아먹는 행위를 하고 있다.
새로운 사실 2. 원본을 피그마 업로드 후 순정 상태로 추출만 했을 때 용량이 3.53배 증가했다.
아래의 단계를 거친 이미지들의 용량을 비교 보았는데 주목할 부분은 볼드 처리된 부분이다. 해당 이미지는 아래 첨부파일로 확인 가능하다.
| 원본 | 3.62MB (3,806,023 바이트) |
| 원본 > FastStone Photo Resizer | 1.67MB (1,752,087 바이트) |
| 원본 > TinyPNG | 1.38MB (1,455,693 바이트) |
| 원본 > 피그마 업로드 후 추출 | 12.8MB (13,519,577 바이트) |
| 원본 > TinyPNG > 피그마 업로드 후 추출 | 9.86MB (10,341,933 바이트) |
| 원본 > 피그마 업로드 후 추출 > FastStone Photo Resizer | 1.51MB (1,586,334 바이트) |
결론.
- 미세한 화질도 중요한 이미지의 경우, 디자인팀에 피그마를 거치지 않은 원본 이미지를 받아서 개발팀에서 직접 이미지 최적화를 진행하자.
- 일반적인 이미지는 그냥 피그마에서 추출 후에 개발팀에서 이미지 최적화를 진행하자.
'Web Frontend' 카테고리의 다른 글
| git에서 특정 커밋 구간의 폴더구조 채로 변경된 부분 추출 방법 (0) | 2023.12.12 |
|---|---|
| 배포 프로세스 개선 - gulp watch와 이미지 최적화 (0) | 2023.12.10 |
| iframe(cross domain)에서 동적으로 높이 얻기, CORS 에러 해결책 (0) | 2023.08.19 |
| openAI API를 사용하면서... (비용, 방식 등) (0) | 2023.06.09 |
| aws codewhisper 사용 후기 (0) | 2023.04.18 |