<div id="readability-page-1" class="page"><article id="mainContent">
              <div>
                <p><a href="/m/category/%EC%BB%B4%ED%93%A8%ED%84%B0%20%EA%B4%80%EB%A0%A8/%EA%B8%B0%ED%83%80%20%EB%93%B1%EB%93%B1"><span>컴퓨터 관련/기타 등등</span></a></p><h3>크롬에서 세로 길이가 긴 이미지 파일이 깨지는 문제</h3>
              </div>
              <p><cite>sunyzero</cite>
                <span> 2024. 1. 28. 16:22</span>
              </p>
              

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-we6apVVPwuoDAazb"></ins>


                <div>
                                <div data-ke-size="size16"><p><span>크롬에서 세로 길이가 긴 이미지 파일의 아랫 부분이 깨지는 현상을 해결하는 방법에 대한 글이다</span>.</p><p>이 현상은 동영상의 캡쳐 이미지를 이어붙인 파일들이 대표적으로, 이미지의 세로 길이가 30000px를 넘어가는 경우에는 뒷부분이 깨지게 된다. 아래는 세로가 매우 긴 이미지를 표시하는 페이지인데, 스크롤을 해서 아랫 부분으로 내려가다보면 깨지는 것을 볼 수 있다.</p></div>

<figure data-ke-mobilestyle="widthOrigin" data-filename="chrome_long_image_rendering fail.png" data-origin-width="1064" data-origin-height="1367">
    <span data-url="https://blog.kakaocdn.net/dn/bnd5Qy/btsD26VL5Wo/ubbc9U22uq6JpywzmMpsek/img.png" data-lightbox="lightbox" data-alt="크롬에서 세로가 긴 이미지 깨짐">
        <img src="https://blog.kakaocdn.net/dn/bnd5Qy/btsD26VL5Wo/ubbc9U22uq6JpywzmMpsek/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="chrome_long_image_rendering fail.png" data-origin-width="1064" data-origin-height="1367">
    </span>
    <figcaption>크롬에서 세로가 긴 이미지 깨짐</figcaption>
</figure>
<p data-ke-size="size16">이 파일의 크기를 개발자 모드에서 살펴보면 800x37436px 크기에 약 3.1MB의 크기임을 알 수 있다. 보통 4K 모니터라고 해도 세로 길이가 2160이므로, 4K모니터조차 17페이지가 넘어가는 엄청 긴 이미지이다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="chrome_long_image_rendering fail dimension.png" data-origin-width="751" data-origin-height="383">
    <span data-url="https://blog.kakaocdn.net/dn/Q0zOm/btsD5xdviSD/gv4fb4T1hJUgf7kt6qYRaK/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/Q0zOm/btsD5xdviSD/gv4fb4T1hJUgf7kt6qYRaK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="chrome_long_image_rendering fail dimension.png" data-origin-width="751" data-origin-height="383">
    </span>
    
</figure>
<p data-ke-size="size16">이게 정확하지는 않지만 대략 세로길이가 30000px 이상정도면 깨지는 것 같다.</p>
<p data-ke-size="size16">이미지가 깨지는 현상은 크롬 뿐만 아니라 동일한 Chrome engine을 사용하는 Microsoft Edge에서도 동일하게 발생한다. 전혀 다른 엔진을 사용하는 firefox에서는 발생하지 않았다. (이 현상을 조사한 기준 일자는 2024-01-28, Chrome version 121.0.6167.86 으로 차후 버그가 수정될 가능성도 있다.)</p>
<p data-ke-size="size16">처음에는 그래픽 카드나 모니터 문제일 가능성도 있다고 생각했다. 본인은 Nvidia 그래픽 카드를 사용하고 있었기에 nvidia의 최신 드라이버도 재설치 해봤으나 문제는 해결되지 않았다.</p>

<h2 data-ke-size="size26">1. 원인</h2>
<p data-ke-size="size16">크롬에서 세로로 긴 이미지 깨지는 원인은 의외로 간단하다. 하드웨어 가속을 꺼두면 생긴다. 프로파일러로 CPU나 VGA 사용량을 추적하다보니 긴 이미지 로딩시 그래픽 카드를 잘 쓰지 않는 것을 알게되었다. 그래서 혹시나 해서 설정을 봤더니... 역시 하드웨어 가속이 꺼져 있었다. 디폴트값이 켜져있는 것인데, 본인은 왜 껐는지는 기억이 안난다.</p>
<p data-ke-size="size16">그래서 설정의 시스템에서 "가능한 경우 하드웨어 가속 사용 (Use hardware acceleration when available)"이 꺼져 있었는데, 이를 켜주면 된다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="chrome_system_settings_hardware_acceleration_off.png" data-origin-width="1264" data-origin-height="742">
    <span data-url="https://blog.kakaocdn.net/dn/kQl4r/btsD09S4cVi/RyFK1ZXkzyukLz9oST7J11/img.png" data-lightbox="lightbox" data-alt="Chrome settings, System, Use Hardware acceleration when available, diabled">
        <img src="https://blog.kakaocdn.net/dn/kQl4r/btsD09S4cVi/RyFK1ZXkzyukLz9oST7J11/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="chrome_system_settings_hardware_acceleration_off.png" data-origin-width="1264" data-origin-height="742">
    </span>
    <figcaption>Chrome settings, System, Use Hardware acceleration when available, diabled</figcaption>
</figure>

<p data-ke-size="size16">마이크로소프트의 엣지 브라우저의 경우도 같은 위치에 옵션이 있다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="chrome_edge_system settings.png" data-origin-width="1527" data-origin-height="699">
    <span data-url="https://blog.kakaocdn.net/dn/bLK45t/btsD3aDUoZh/CKkgwUYZAsWbcLRfSVwFYk/img.png" data-lightbox="lightbox" data-alt="Edge settings, System, Use Hardware acceleration when available, diabled">
        <img src="https://blog.kakaocdn.net/dn/bLK45t/btsD3aDUoZh/CKkgwUYZAsWbcLRfSVwFYk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="chrome_edge_system settings.png" data-origin-width="1527" data-origin-height="699">
    </span>
    <figcaption>Edge settings, System, Use Hardware acceleration when available, diabled</figcaption>
</figure>


<h2 data-ke-size="size26">2. 해결 (hardware acceleration : enabled)</h2>
<p data-ke-size="size16">하드웨어 가속 사용을 켜면 "다시 시작"을 요구하게 된다. 다시 시작 한 뒤에 동일한 페이지를 보면 깨지지 않는 것을 볼 수 있다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="chrome_system_settings_hardware_acceleration_on.png" data-origin-width="1241" data-origin-height="206">
    <span data-url="https://blog.kakaocdn.net/dn/0c9XZ/btsD0IOJZQu/wZO0JA4ipQ2Y6DbkKbwrt1/img.png" data-lightbox="lightbox" data-alt="Chrome settings, System, Use Hardware acceleration when available, enabled">
        <img src="https://blog.kakaocdn.net/dn/0c9XZ/btsD0IOJZQu/wZO0JA4ipQ2Y6DbkKbwrt1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="chrome_system_settings_hardware_acceleration_on.png" data-origin-width="1241" data-origin-height="206">
    </span>
    <figcaption>Chrome settings, System, Use Hardware acceleration when available, enabled</figcaption>
</figure>

<p data-ke-size="size16">아마도 CPU로 처리할 때는 엄청 긴 페이지를 렌더링할 때 메모리쪽에 무슨 문제가 있지 않나 생각된다. 바쁘지만 않다면 소스 코드를 보면서 원인을 찾고 싶지만, 다른 일도 바쁜데 굳이 그래야 하나 싶어서 그냥 해결방법으로 퉁친다.</p>
            
            
                </div>
                          
            
            </article></div>

Linux Programmer

크롬에서 세로 길이가 긴 이미지 파일의 아랫 부분이 깨지는 현상을 해결하는 방법에 대한 글이다.
이 현상은 동영상의 캡쳐 이미지를 이어붙인 파일들이 대표적으로, 이미지의 세로 길이가 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 으로 차후 버그가 수정될 가능성도 있다.)
처음에는 그래픽 카드나 모니터 문제일 가능성도 있다고 생각했다. 본인은 Nvidia 그래픽 카드를 사용하고 있었기에 nvidia의 최신 드라이버도 재설치 해봤으나 문제는 해결되지 않았다.
 
1. 원인
크롬에서 세로로 긴 이미지 깨지는 원인은 의외로 간단하다. 하드웨어 가속을 꺼두면 생긴다. 프로파일러로 CPU나 VGA 사용량을 추적하다보니 긴 이미지 로딩시 그래픽 카드를 잘 쓰지 않는 것을 알게되었다. 그래서 혹시나 해서 설정을 봤더니... 역시 하드웨어 가속이 꺼져 있었다. 디폴트값이 켜져있는 것인데, 본인은 왜 껐는지는 기억이 안난다.
그래서 설정의 시스템에서 "가능한 경우 하드웨어 가속 사용 (Use hardware acceleration when available)"이 꺼져 있었는데, 이를 켜주면 된다.
 
마이크로소프트의 엣지 브라우저의 경우도 같은 위치에 옵션이 있다.
 
 
2. 해결 (hardware acceleration : enabled)
하드웨어 가속 사용을 켜면 "다시 시작"을 요구하게 된다. 다시 시작 한 뒤에 동일한 페이지를 보면 깨지지 않는 것을 볼 수 있다.
 
아마도 CPU로 처리할 때는 엄청 긴 페이지를 렌더링할 때 메모리쪽에 무슨 문제가 있지 않나 생각된다. 바쁘지만 않다면 소스 코드를 보면서 원인을 찾고 싶지만, 다른 일도 바쁜데 굳이 그래야 하나 싶어서 그냥 해결방법으로 퉁친다.

크롬에서 세로 길이가 긴 이미지 파일이 깨지는 문제

댓글