분류 기타

웹에서 이미지 최적화

컨텐츠 정보

  • 조회 458 (작성일 )

본문

이미지는 인터넷의 방대한 부분입니다. 중앙값 웹 페이지에서 이미지는 로드된 바이트의 51%를 차지하므로 속도나 크기를 개선하면 성능에 상당한 영향을 미칩니다.


오늘 Cloudflare의 이미지 최적화 테스트 도구를 발표하게 되어 기쁩니다. 웹사이트의 URL을 입력하기만 하면 방문자에게 최적의 이미지를 제공하기 위해 개선할 수 있는 사항이 있는지 확인하기 위해 일련의 자동화된 테스트를 실행합니다.


Example screenshot of Cloudflare's Image Optimization Test Results 



사용자가 속도를 경험하는 방법 


웹을 검색해 본 사람이라면 누구나 로드 속도가 느린 웹 사이트를 경험한 적이 있을 것입니다. 종종 이것은 목적에 비해 너무 크거나 정보가 불충분한 페이지에 포함된 웹 페이지의 최적화되지 않은 이미지의 결과입니다.


픽셀이 위에서 아래로 고통스럽게 채워지기 때문에 페이지의 이미지를 로드하는 데 시간이 오래 걸릴 수 있습니다. 또는 더 나쁜 것은 브라우저가 크기에 대해 학습함에 따라 페이지 레이아웃이 크게 변할 수 있다는 것입니다. 이러한 문제는 사용자에게 심각한 성가심이며 2021년 8월 현재 검색 엔진은 그에 따라 페이지를 처벌합니다.


당연히 느린 페이지 로드는 페이지에서 빠르게 이탈하는 방문자의 비율인 페이지의 "이탈률"에 부정적인 영향을 미칩니다. 특히 전자 상거래 사이트에서 이탈률은 일반적으로 직접적인 금전적 영향을 미치며 페이지는 일반적으로 이미지가 매우 많습니다. 웹페이지의 모든 이미지를 최적화하여 원본에서 발생하는 부하를 줄이고 검색 엔진 순위에서 성능을 향상시키며 궁극적으로 사용자에게 훌륭한 경험을 제공하는 것이 매우 중요합니다.


측정 속도 


2021년 8월 말부터 Google은 핵심 웹 바이탈을 사용하여 검색 결과 순위를 고려할 때 페이지 성능을 수량화했습니다. 이러한 측정항목은 LCP(Large Contentful Paint), FID(First Input Delay)CLS(Cumulative Layout Shift)의 세 가지 숫자입니다. 그들은 각각 로딩, 상호 작용 및 시각적 안정성의 경험을 근사합니다.


CLS와 LCP는 이미지를 최적화하여 개선할 수 있는 두 가지 지표입니다. CLS가 높으면 로드할 때 많은 양의 페이지 레이아웃이 이동하고 있음을 나타냅니다. LCP는 뷰포트에서 가장 큰 단일 이미지 또는 텍스트 블록이 렌더링되는 데 걸리는 시간을 측정합니다.


이는 Cloudflare의 Web Analytics와 같은 실제 사용자 모니터링(RUM) 분석을 사용하여 "현장에서" 측정하거나 Cloudflare의 이미지 최적화 테스트 도구를 사용하여 "실험실 환경"에서 측정할 수 있습니다.


속도를 최적화 하는 방법 치수 


웹 사이트 작성자가 수행할 수 있는 가장 영향력 있는 성능 개선 사항 중 하나는 적절한 크기의 이미지를 제공하는 것입니다. 최신 카메라로 촬영한 이미지는 정말 방대할 수 있으며 일부 최신 플래그십 전화기에는 거대한 센서가 있습니다. 예를 들어 Samsung Galaxy S21 Ultra에는 12,000 x 9,000 픽셀 이미지를 캡처하는 108MP 센서가 있습니다. 같은 전화기의 화면 너비는 1440픽셀에 불과합니다. 해당 장치에서 사진의 모든 픽셀을 표시하는 것은 물리적으로 불가능합니다. 가로 사진의 경우 픽셀 열의 12%만 표시할 수 있습니다.


이 이미지를 웹페이지에 삽입하면 동일한 문제가 발생하지만 이번에는 해당 이미지와 사용되지 않은 모든 픽셀이 인터넷을 통해 전송됩니다. 궁극적으로 이것은 서버에 불필요한 부하, 더 높은 이그레스 비용, 더 긴 방문자의 로딩 시간을 초래합니다. 모바일 방문자는 종종 느린 연결을 사용하고 데이터 사용량에 제한이 있기 때문에 이는 더욱 악화됩니다. 빠른 3G 연결에서 108MP 사진은 방문자의 데이터 요금제와 웹사이트의 송신 대역폭 모두에서 26MB를 소비하고 로드하는 데 2분 이상 걸릴 수 있습니다!


"뭉쳐진" 이미지나 픽셀화된 이미지를 피하기 위해 항상 가능한 최고의 해상도로 이미지를 제공하고 싶을 수 있지만 크기 조정이 올바르게 수행되면 문제가 되지 않습니다. "블록" 아티팩트는 일반적으로 이미지가 여러 번 처리될 때 발생합니다(예: 해당 이미지를 압축하는 플랫폼에서 사용자가 이미지를 반복적으로 업로드 및 다운로드함). 픽셀화된 이미지는 이미지가 렌더링된 화면보다 작은 크기로 축소되었을 때 발생합니다.


그렇다면 웹 사이트 작성자는 이러한 함정을 피하고 올바른 크기의 이미지가 방문자의 장치에 전달되도록 하려면 어떻게 해야 할까요? 두 가지 주요 접근 방식이 있습니다.


  • srcset 및 크기가 있는 미디어 조건


웹 페이지에 이미지를 포함할 때 전통적으로 작성자는 단순히 img 태그에 src 속성을 전달했습니다.


<img src="hello_world_12000.jpg" alt="Hello, world!" />


2017년부터 모든 최신 브라우저는 보다 동적인 srcset 속성을 지원했습니다. 이를 통해 작성자는 방문자 브라우저의 일치하는 미디어 조건에 따라 여러 이미지 소스를 설정할 수 있습니다.


<img srcset="hello_world_1500.jpg 1500w,
             hello_world_2000.jpg 2000w,
             hello_world_12000.jpg 12000w"
     sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
     src="hello_world_12000.jpg"
     alt="Hello, world!" />


여기에서 srcset 속성을 사용하여 브라우저에 각각 다른 고유 너비를 가진 세 가지 이미지 변형이 있음을 알립니다: 1,500픽셀, 2,000픽셀 및 원본 12,000픽셀. 그런 다음 브라우저는 srcset 속성에서 적절한 이미지 변형을 선택하기 위해 크기 속성((max-width: 1500px) 및 (max-width: 2000px))의 미디어 조건을 평가합니다. 브라우저의 뷰포트 너비가 1500px보다 작으면 hello_world_1500.jpg 이미지 변형이 로드됩니다. 브라우저의 뷰포트 너비가 1500px에서 2000px 사이이면 hello_world_2000.jpg 이미지 변형이 로드됩니다. 마지막으로 브라우저의 뷰포트 너비가 2000px보다 크면 브라우저는 hello_world_12000.jpg 이미지 변형을 로드하도록 대체합니다.


다양한 다른 선택기를 지원하는 소스 자식 요소를 사용하여 그림 요소에서도 유사한 동작이 가능합니다.


  • 클라이언트 힌트


클라이언트 힌트는 일부 브라우저가 구현하기로 선택하고 일부는 구현하지 않는 표준입니다. 클라이언트의 장치에 대해 서버에 알려주는 HTTP 요청 헤더 집합입니다. 예를 들어 브라우저는 특정 브라우저의 뷰포트 너비를 서버에 알리는 이미지를 요청할 때 Viewport-Width 헤더를 첨부할 수 있습니다(이 헤더는 현재 Sec-CH-Viewport-Width로 이름이 변경되는 중입니다).


이는 이전 예제의 마크업을 크게 단순화합니다. 사실 원래의 단순 HTML에서 변경할 필요가 없습니다.


<img src="hello_world_12000.jpg" alt="Hello, world!" />


클라이언트 힌트가 지원되는 경우 브라우저가 hello_world_12000.jpg를 요청할 때 다음 헤더를 첨부할 수 있습니다.


Viewport-Width: 1440


그러면 서버는 원래 hello_world_12000.jpg 이미지를 요청하는 요청에도 불구하고 더 작은 이미지 변형(예: hello_world_1500.jpg)을 자동으로 제공할 수 있습니다.


브라우저가 적절한 크기의 이미지를 요청할 수 있도록 하여 서버와 방문자 모두의 대역폭과 시간을 절약합니다.


Format 


JPEG, PNG, GIF, WebP, 그리고 이제 AVIF. AVIF는 업계에서 널리 지원되는 최신 이미지 형식이며 종종 이전 형식보다 성능이 뛰어납니다. AVIF는 알파 채널로 투명도를 지원하고 애니메이션을 지원하며 일반적으로 비교 가능한 JPEG보다 50% 작습니다(WebP의 경우 30% 감소).


Google Chrome이 지원을 추가하자 마자 작년에 Cloudflare의 Image Resizing 제품에 AVIF 형식을 추가했습니다. Firefox 93(2021년 10월 5일 출시 예정)은 Firefox의 첫 번째 안정적인 릴리스가 될 것이며 Microsoft와 Apple 모두 AVIF의 Alliance for Open Media 회원으로 참여하여 Edge 및 Safari에서 곧 지원될 수 있기를 바랍니다. 이러한 최신 형식 이전에는 웹 페이지에서 이미지가 로드되는 방식을 개선하는 혁신적인 접근 방식도 보았습니다. BlurHash는 HTML 마크업 내부에 이미지의 아주 작은 표현을 임베딩하는 기술입니다. 이 기술은 즉시 렌더링될 수 있고 최종 이미지가 로드될 때까지 자리 표시자 역할을 합니다. 이 작은 표현(해시)은 최종 이미지와 유사한 색상의 흐릿한 혼합을 생성하여 사용자의 로딩 경험을 용이하게 했습니다.


프로그레시브 JPEG는 사실상 유사하지만 이미지 형식 자체의 기본 제공 기능입니다. 이미지 바이트를 위에서 아래로 인코딩하는 대신 바이트가 이미지 세부 정보 수준을 높이는 순서로 정렬됩니다. 이것은 다시 사용자가 더 많은 바이트가 로드됨에 따라 점진적으로 "향상"되는 낮은 품질의 이미지를 보는 보다 미묘한 로딩 경험을 생성합니다.


At the top, a normal JPEG loading from top-to-bottom at three points (13% complete, 30% complete and 50% complete).  At the bottom, a progressive JPEG loading with incrementally more detail at the same three points (13% complete, 30% complete and 50% complete). 



Quality 


최신 이미지 형식(WebP 및 AVIF)은 이전 버전인 JPEG와 달리 무손실 압축을 지원합니다. 일부 용도의 경우 무손실 압축이 적절할 수 있지만 대부분의 웹 사이트에서는 속도가 우선시되며 이러한 사소한 품질 손실은 시간과 바이트를 절약할 가치가 있습니다.


품질을 설정할 위치를 최적화하는 것은 균형을 유지하는 작업입니다. 너무 공격적이고 인공물이 이미지에 표시됩니다. 너무 작고 이미지가 불필요하게 큽니다. Butteraugli 및 SSIM은 이미지 품질에 대한 우리의 인식을 근사화하는 알고리즘의 예이지만 현재 자동화하기 어려우므로 수동으로 설정하는 것이 가장 좋습니다. 그러나 일반적으로 대부분의 압축 라이브러리에서 약 85%가 합리적인 기본값이라는 것을 알았습니다.


Markup 


이전의 모든 기술은 이미지가 사용하는 바이트 수를 줄입니다. 이는 해당 이미지의 로딩 속도와 LCP(Large Contentful Paint) 메트릭을 개선하는 데 유용합니다. 그러나 CLS(누적 레이아웃 이동) 측정항목을 개선하려면 페이지 레이아웃 변경을 최소화해야 합니다. 이것은 미리 이미지 크기를 브라우저에 알려서 수행할 수 있습니다.


최적화되지 않은 웹 페이지에서는 이미지가 마크업에 크기 없이 포함됩니다. 브라우저는 해당 이미지를 가져오고 이미지의 헤더 바이트를 받은 후에만 해당 이미지의 크기를 알 수 있습니다. 그 효과는 브라우저가 먼저 이미지가 0픽셀을 차지하는 페이지를 렌더링한 다음 실제로 이미지 픽셀 자체를 로드하기 전에 해당 이미지의 크기로 갑자기 다시 그리는 것입니다. 이는 사용자에게 불쾌감을 주고 사용성에 심각한 영향을 미칩니다.


브라우저가 로딩을 시작하기 전에 해당 이미지에 대한 공간을 할당할 수 있도록 HTML 마크업 내부에 이미지의 크기를 포함하는 것이 중요합니다. 이것은 불필요한 다시 그리기를 방지하고 레이아웃 이동을 줄입니다. 반응형 이미지를 동적으로 로드할 때 크기를 설정할 수도 있습니다. 가로 세로 비율이 일정하다고 가정하고 원본 이미지의 높이와 너비를 브라우저에 알려 너비 선택기를 사용하는 경우에도 올바른 높이를 자동으로 계산합니다.


<img height="9000"
     width="12000"
     srcset="hello_world_1500.jpg 1500w,
             hello_world_2000.jpg 2000w,
             hello_world_12000.jpg 12000w"
     sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
     src="hello_world_12000.jpg"
     alt="Hello, world!" />


마지막으로 지연 로딩은 페이지 로딩이 시작될 때 브라우저가 수행해야 하는 작업을 줄이는 기술입니다. 이미지 로드를 필요하기 직전으로 연기함으로써 브라우저는 글꼴, 스타일 및 JavaScript와 같은 더 중요한 자산의 우선 순위를 지정할 수 있습니다. 이미지의 loading 속성을 lazy로 설정하면 이미지가 뷰포트에 들어갈 때만 로드하도록 브라우저에 지시합니다. 예를 들어, 제품 그리드를 렌더링하는 전자 상거래 사이트에서 이는 방문자가 페이지를 더 빨리 로드하고 사용자가 아래로 스크롤할 때 스크롤 없이 볼 수 있는 부분 아래에 이미지를 매끄럽게 가져옴을 의미합니다. 이것은 현재 이 기능이 실험적 플래그 뒤에 숨겨져 있는 Safari를 제외한 모든 주요 브라우저에서 지원됩니다.


<img loading="lazy"  />


Hosting 


마지막으로 동일한 자사 도메인에서 페이지의 모든 이미지를 함께 호스팅하여 이미지 로딩을 개선할 수 있습니다. 각 이미지가 다른 도메인에서 호스팅된 경우 브라우저는 DNS 조회를 수행하고 TCP 연결을 생성하고 모든 단일 이미지에 대해 TLS 핸드셰이크를 수행해야 합니다. 그것들이 모두 단일 도메인에 같은 위치에 있는 경우(특히 페이지 자체와 동일한 도메인인 경우) 브라우저는 해당 이미지를 로드할 수 있는 속도를 향상시키는 연결을 재사용할 수 있습니다.


웹사이트 테스트 


오늘 Cloudflare의 이미지 최적화 테스트 도구 출시를 발표하게 되어 기쁩니다. 웹사이트 URL을 입력하기만 하면 방문자에게 최적의 이미지를 제공하기 위해 개선할 수 있는 사항이 있는지 확인하기 위해 일련의 자동화된 테스트를 실행합니다.


WebPageTest 및 Lighthouse를 사용하여 페이지의 두 가지 버전(하나는 원본 버전이고 다른 하나는 Cloudflare의 최선형 자동 최적화)에서 핵심 성능 평가를 계산합니다. 이러한 최적화는 이미지 크기 조정 제품과 함께 Cloudflare 작업자를 사용하여 수행되며 이미지의 형식, 품질 및 치수를 변환합니다.


앞서 언급한 CLS(Cumulative Layout Shift) 및 LCP(Large Contentful Page)를 포함하여 웹페이지 성능에 대한 주요 요약 메트릭과 페이지의 각 이미지에 대한 자세한 분석 및 수행 가능한 최적화를 보고합니다.


Cloudflare Images 


Cloudflare 이미지는 이 게시물에 설명된 여러 문제를 해결하는 데 도움이 될 수 있습니다. Cloudflare를 사용하여 이미지를 저장하고 변형 세트를 구성하여 에지에서 웹사이트 또는 앱으로 최적화된 이미지를 제공할 수 있습니다. 최적의 이미지 형식을 자동으로 설정하고 사용 사례에 맞게 크기와 맞춤을 사용자 지정할 수 있습니다.


Cloudflare Images를 사용하여 구축한 것을 보게 되어 기쁩니다. 가까운 시일 내에 추가 기능과 통합을 기대할 수 있습니다. 지금 월 $6부터 이미지를 시작하세요.


출처 : https://blog.cloudflare.com/optimizing-images/