canvas로 그린 sprite 이미지 끊김현상 - 이미지 해상도, pixel, 비트 심도

canvas로 그린 sprite 이미지 끊김현상 - 이미지 해상도, pixel, 비트 심도

 

처음에 물개 sprite 이미지를 s3로부터 불러와서 canvas로 그리는데 원본의 이미지 끊김 현상이 발생했다.

우리 서비스는 client단에서 canvas가 60FPS로 화면을 그리기 때문에 이미지가 무거운 것이 끊김의 원인으로 생각했다.

하기 예시 이미지 파일이 실제 물개 파일은 아니지만 동일한 리사이징 과정을 거쳤기 때문에 이것으로 설명하고자 한다.

 

1) 비트 심도 조정을 통한 파일 크기 감소

1) 처음에는 파일 크기만 줄이면 해결되지 않을까라는 생각에 비트 심도를 줄이는 방향(1->2)으로 진행하였으나 여전히 끊김 현상이 발생했다.

이는 s3로부터 이미지 파일을 가져오는 데 시간은 줄여주지만, client단에서 canvas가 sprite이미지를 그리는 '픽셀의 수' 자체는 그대로이기 때문에 여전히 끊긴다고 판단했다.

 

2) 픽셀 수 감소를 통한 파일 크기 감소

이에 이미지 리사이징 앱을 통해 픽셀 수 자체를 줄이는 방향(1->3)으로 resize를 진행하였다. 결과적으로 끊김 현상이 해소되었다. 픽셀 수가 줄어 canvas에서 sprite 이미지를 그리는 데 필요한 픽셀수가 감소했다. 즉, GPU 부하가 줄어들어 끊김현상이 해소 되었다고 생각된다. 추가로  파일 사이즈가 줄어 이미지 파일을 가져오는 시간의 단축 효과도 있을 것이다.

 

물개 프레임당 픽셀수가 줄어들었다는 얘기는 PPI가 줄어들었다는 얘기이고 해상도가 감소되었다고 할 수 있다.

하기 그림 파일을 기준으로 가로세로의 픽셀수가 반씩 줄어들었고, 사진의 size가 동일하다고 가정하면 PPI는 1/4배가 되었을 것이다.

 

 

	pngwing (원본)	pngwing 2	pngwing 3
비트 심도(bit depth)	32비트	8비트	32비트
해상도(resolution)	5196 x 4341	5196 x 4341	2598 x 2171
용량(size)	6.5MB	2.6MB	2.2MB

 

 

 

다시보니 위 info 사진에는 비트 심도 정보가 왜 없나 했더니.. 맥북에선 안보이는 불상사가..