크롬에서 세로 길이가 긴 이미지 늘어짐 및 깨짐 문제
크롬에서 세로 길이가 긴 이미지 파일의 아랫 부분이 깨지는 현상을 해결하는 방법에 대한 글이다.
이 현상은 동영상의 캡쳐 이미지를 이어붙인 파일들이 대표적으로, 이미지의 세로 길이가 대략 30000px를 넘어가는 경우에는 뒷부분이 깨지게 된다. 아래는 세로가 매우 긴 이미지를 표시하는 페이지인데, 스크롤을 해서 아랫 부분으로 내려가다보면 깨지는 것을 볼 수 있다.
참고 : 세로 길이가 긴 이미지가 존재하는 페이지, https://www.issuya.com/bbs/board.php?bo_table=issue&wr_id=1013816
위 페이지는 통으로 만들어진 이미지를 표시하고 있는데, 스크롤 하면서 이미지를 보다보면 아랫 부분은 다음과 같이 깨져서 보인다. 현상만 보면 마치 물감이 흘려내린 듯한 그림을 보는 듯 하다.
이 파일의 크기를 개발자 모드에서 살펴보면 800x37436px 크기에 약 3.1MB의 크기임을 알 수 있다. 보통 4K 모니터라고 해도 세로 길이가 2160이므로, 4K모니터조차 17페이지가 넘어가는 엄청 긴 이미지이다.
이게 정확하지는 않지만 대략 세로길이가 30000px 이상정도면 깨지는 것 같다.
이미지가 깨지는 현상은 크롬 뿐만 아니라 동일한 Chrome engine을 사용하는 Microsoft Edge에서도 동일하게 발생한다. 전혀 다른 엔진을 사용하는 firefox에서는 발생하지 않았다. (이 현상을 조사한 기준 일자는 2024-01-28, Chrome version 121.0.6167.86 으로 차후 버그가 수정될 가능성도 있다.)
처음에는 그래픽 카드나 모니터 문제일 가능성도 있다고 생각했다. 본인이 가진 PC들은 Intel내장, AMD 내장, Nvidia 그래픽 카드를 사용하고 있었고, 일단은 최신 드라이버도 재설치 해봤으나 문제는 해결되지 않았다.
1. 원인
크롬에서 세로로 긴 이미지 깨지는 원인은 의외로 간단하다. 하드웨어 가속을 꺼두면 생긴다. 프로파일러로 CPU나 VGA 사용량을 추적하다보니 긴 이미지 로딩시 그래픽 카드를 잘 쓰지 않는 것을 알게되었다. 그래서 혹시나 해서 설정을 봤더니... 역시 하드웨어 가속이 꺼져 있었다. 디폴트값이 켜져있는 것인데, 본인은 왜 껐는지는 기억이 안난다.
그래서 설정의 시스템에서 "가능한 경우 하드웨어 가속 사용 (Use hardware acceleration when available)"이 꺼져 있었는데, 이를 켜주면 된다.
마이크로소프트의 엣지 브라우저의 경우도 같은 위치에 옵션이 있다.
2. 해결 (hardware acceleration : enabled)
하드웨어 가속 사용을 켜면 "다시 시작"을 요구하게 된다. 다시 시작 한 뒤에 동일한 페이지를 보면 깨지지 않는 것을 볼 수 있다. (인텔 내장 그래픽, AMD 내장 780M, nvidia 30xx대 그래픽 카드 모두 가속 설정을 한 뒤에는 깨지지 않았다)
아마도 CPU로 처리할 때는 엄청 긴 페이지를 렌더링할 때 메모리쪽에 무슨 문제가 있지 않나 생각된다. 바쁘지만 않다면 소스 코드를 보면서 원인을 찾고 싶지만, 다른 일도 바쁜데 굳이 그래야 하나 싶어서 그냥 해결방법으로 퉁친다.
혹시라도 하드웨어 가속을 설정해도 안된다는 경우에는 ANGLE graphics backend를 OpenGL로 변경하는 추가 설정도 있다. 방법은 주소창에 chrome://flags/use-angle#use-angle 를 넣으면 아래와 같이 볼 수 있다. 여기서 OpenGL로 설정하면 된다. 이렇게 해도 안된다면 이건 해당 컴퓨터의 Chrome 설정이 문제인 경우도 있으므로 Chrome 설정에서 초기화를 하고, 삭제 후 재설치를 하도록 한다.
구글 크롬은 의외로 버그가 꽤 있는 편이다. 요새는 크롬보다 차라리 firefox를 사용하는게 더 나을 정도다. 속도도 파이어폭스가 훨씬 빠르다. 결국 애초에 이런 문제를 겪지 않으려면 그냥 firefox를 쓰는 것을 강력하게 권장한다.