이미지 최적화(2)
-
배포 프로세스 개선 - gulp watch와 이미지 최적화
필자는 실무에서 이런 경우가 있었다. 신규 운영 프로젝트가 맡게 되었고, gulp를 통해서 배포 파일을 생성하면 모든 이미지를 최적화하느라 20분 이상 컴퓨터를 갉아먹는 행위를 하고 있었다. 여러 고심 끝에 현재 이미지 최적화된 모든 이미지를 원본 이미지로 교체하였고 배포할 때 모든 이미지를 최적화하는 프로세스를 제거했다. 그리고 앞으로 최적화할 이미지들은 FastStone Photo Resizer 프로그램을 통해서 일괄 최적화 진행하는 방식으로 진행할 예정이다. watch()를 활용하여 이미지를 업로드하면 해당 이미지가 자동으로 최적화되어 교체되도록 하려 했으나 해결하지 못했다. 예를 들어, 이미지 수 십 개를 붙여 넣으면 이미지 한 개 처리될 동안 최적화를 이용하지 못할 수 가능성이 컸다. 이유는 플..
2023.12.10 -
01 - 피그마 그리고 이미지 최적화에 대한 고민
보통 웹 개발 시 피그마를 활용하여 이미지를 잘라 사용하여 최적화 후 웹사이트에 적용할 것이다. 하지만, 미세하게 파고들어 갔더니 아래와 같은 예상치 못한 결과가 나왔다. 아래 원본 이미지를 기준으로 진행한다. 최적화 도구는 FastStone Photo Resizer, TinyPNG 활용했다. 새로운 사실 1. 아래 원본을 피그마 동일한 크기로 업로드 후 추출만 했을 뿐인데 화질 차이가 심하게 나고 있다. 우측을 보면, 전체적으로 흐리멍덩하고 뿌연 화질이다. 특히, 피그마에서 추출 시 아래 붉은색 표기된 부분과 전체적으로 블록형태의 깨짐이 발생했다. 피그마에서 이미지 랜더링 과정에서 화질을 갉아먹는 행위를 하고 있다. 새로운 사실 2. 원본을 피그마 업로드 후 순정 상태로 추출만 했을 때 용량이 3.53..
2023.12.09