이미지 성능

이미지는 웹에서 가장 무겁고 가장 널리 사용되는 리소스인 경우가 많습니다. 이미지를 최적화하면 웹사이트의 실적이 크게 개선될 수 있습니다. 대부분의 경우, 이미지를 최적화한다는 것은 이미지를 여러 번 전송하면 더 적은 바이트이지만 사용자에게 전송되는 바이트의 양을 최적화할 수도 있습니다. 사용자의 기기에 적합한 크기의 이미지를 제공해야 합니다.

<img> 또는 <picture> 요소를 사용하여 이미지를 페이지에 추가할 수 있습니다. CSS background-image 속성.

이미지 크기

이미지 리소스 사용과 관련하여 수행할 수 있는 첫 번째 최적화는 을 사용하여 이미지를 올바른 크기로 표시합니다. 이 경우 크기는 이미지의 크기입니다. 다른 변수를 고려하지 않고 500픽셀 x 500픽셀 컨테이너에 들어가는 경우 최적의 크기는 500픽셀 500픽셀 예를 들어, 1000픽셀의 정사각형 이미지를 사용하면 만들 수 있습니다

그러나 적절한 이미지 크기를 선택하는 데는 많은 변수가 관련됩니다. 모든 경우에 적절한 이미지 크기를 선택하는 작업은 복잡합니다 2010년 iPhone 4가 출시되었을 때 화면 해상도는 (640x960)은 iPhone 3 (320x480)의 두 배였습니다. 그러나 실제 크기는 iPhone 4의 화면 비율은 iPhone 3와 거의 동일하게 유지되었습니다.

모든 것을 더 높은 해상도로 표시하면 텍스트와 이미지가 이전 크기의 절반으로 축소되었습니다. 대신 1픽셀 2개의 기기 픽셀이 되었습니다. 이를 기기 픽셀 비율 (DPR)이라고 합니다. 이 iPhone 4와 그 이후에 출시된 많은 iPhone 모델의 DPR은 2입니다.

이전 예를 다시 살펴보면, 기기의 DPR이 2이고 이미지가 크기가 500픽셀 x 500픽셀 컨테이너에 표시된 다음 1, 000픽셀의 정사각형 이미지가 (내장 크기라고 함)가 이제 최적의 크기입니다. 마찬가지로 기기의 DPR이 3이면 정사각형 1500픽셀 이미지가 최적의 크기입니다.

srcset

<img> 요소는 srcset 속성을 지원하므로 브라우저가 사용할 수 있는 이미지 소스의 목록입니다. 지정된 각 이미지 소스 이미지 URL 및 너비 또는 픽셀 밀도 설명어를 포함해야 합니다.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

위의 HTML 스니펫은 픽셀 밀도 설명자를 사용하여 브라우저에 DPR이 1인 기기에서 image-500.png, 기기에 image-1000.jpg 사용 DPR이 3인 기기에서는 image-1500.jpg입니다.

이 모든 것이 잘리고 건조해 보일 수 있지만 화면의 DPR만이 다른 것은 아닙니다 이미지를 선택할 때 고려해야 할 사항입니다. 페이지의 레이아웃도 고려해야 합니다.

sizes

이전 솔루션은 동일한 CSS 픽셀에 이미지를 표시하는 경우에만 작동합니다. 크기를 조절해야 합니다. 대부분의 경우 페이지의 레이아웃과 컨테이너의 사용자의 기기에 따라 변경됩니다.

sizes 속성을 사용하면 소스 크기 집합을 지정할 수 있습니다. 각 소스 크기는 소스 크기는 미디어 조건과 값으로 구성됩니다. sizes 속성 은 CSS 픽셀로 이미지의 원하는 표시 크기를 설명합니다. 결합 시 srcset 너비 설명자를 사용하면 브라우저가 이미지 소스 사용자의 기기에 가장 적합합니다.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

위의 HTML 스니펫에서 srcset 속성은 이미지 쉼표로 구분하여 입력하면 됩니다. 지역 사회의 각 후보자 이 목록은 이미지 URL과 이미지를 나타내는 이미지를 나타내는 구문으로 이미지의 고유 너비 이미지의 내장 크기는 이미지의 크기입니다. 대상 예를 들어 1000w 설명자는 이미지의 고유 너비가 다음과 같음을 나타냅니다. 1000픽셀

브라우저는 이 정보를 사용하여 sizes의 미디어 조건을 평가합니다. 속성을 설정하고, 이 경우에는 기기의 표시 영역 너비가 768픽셀을 초과하면 이미지는 너비가 500픽셀로 표시됩니다. 더 작은 크기 기기에서 이미지가 표시되는 경우, 이미지는 100vw 또는 전체 표시 영역 너비로 표시됩니다.

그러면 브라우저에서 이 정보를 srcset 이미지 목록과 결합할 수 있습니다. 최적의 이미지를 찾습니다. 예를 들어 사용자가 휴대기기를 이용 중인 경우 화면 너비가 320픽셀이고 DPR이 3인 기기인 경우 이미지가 표시됩니다. 320 CSS pixels x 3 DPR = 960 device pixels 이 예에서 가장 가까운 크기가 조정된 이미지는 고유 너비가 1000인 image-1000.jpg입니다. 픽셀 (1000w)

파일 형식

브라우저는 다양한 이미지 파일 형식을 지원합니다. 다음과 같은 최신 이미지 형식 WebP 및 AVIF를 사용하면 PNG나 JPEG보다 압축이 더 잘 될 수 있으므로 이미지 파일 크기가 작아서 다운로드하는 데 걸리는 시간이 줄어듭니다. 게재 최신 형식으로 이미지를 사용한다면 리소스의 로드 시간을 단축할 수 있으며, 최대 콘텐츠 페인트 (LCP)가 낮아집니다.

WebP는 모든 최신 브라우저에서 작동하는 널리 지원되는 형식입니다. WebP JPEG, PNG 또는 GIF보다 압축이 더 좋고 손실 및 무손실 압축입니다. 또한 WebP는 알파 채널 투명도를 지원함 JPEG 코덱이 제공하지 않는 기능인 손실이 있는 압축을 사용합니다.

AVIF는 최신 이미지 형식이며 WebP만큼 널리 지원되지는 않지만 여러 브라우저에서 적절히 지원되고 있습니다. AVIF는 손실 및 무결성과 같은 무손실 압축과 비교했을 때, 테스트에 따르면 다를 수 있습니다. 또한 AVIF는 넓은 색 영역 (WCG)과 HDR (High Dynamic Range) 기능

압축

이미지와 관련된 압축에는 두 가지 유형이 있습니다.

1. 손실된 압축
2. 무손실 압축

손실이 있는 압축은 양자화를 통해 이미지 정확도를 낮추는 방식으로 작동합니다. 및 추가 색상 정보는 크로마 서브샘플링을 사용하여 삭제할 수 있습니다. 손실 압축은 노이즈가 많은 고밀도 이미지에서 가장 효과적입니다. 일반적으로 유사한 콘텐츠를 가진 사진이나 이미지를 사용합니다. 이는 손실이 있는 압축에 의해 생성된 아티팩트가 발견될 가능성이 훨씬 낮습니다. 자세히 살펴보겠습니다 그러나 손실이 있는 압축은 라인아트, 유사한 뚜렷한 디테일과 같이 날카로운 가장자리가 포함된 이미지 있습니다. 손실(lossy) 압축은 JPEG, WebP, AVIF 이미지에 적용할 수 있습니다.

무손실 압축은 데이터가 없는 이미지를 압축하여 파일 크기를 줄입니다. 손실이 발생할 수 있습니다. 무손실 압축은 주변 픽셀에 맞추어 크기를 조절합니다. 무손실 압축은 GIF, PNG, WebP, AVIF 이미지 형식.

Squoosh, ImageOptim 또는 이미지를 사용하여 이미지를 압축할 수 있습니다. 제공합니다 압축할 때 적합한 범용 설정이 없음 를 참조하세요. 권장되는 접근 방식은 이미지 품질과 해상도 사이의 적절한 절충안을 찾을 때까지 지정할 수 있습니다. 일부 고급 이미지 최적화 서비스에서 이 작업을 자동으로 수행할 수 있습니다. 자동으로 제공되지만 모든 사용자에게 재정적으로 도움이 되지는 않을 수 있습니다.

<picture> 요소

<picture> 요소를 사용하면 보다 유연하게 여러 속성을 지정할 수 있습니다. 이미지 후보:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

<picture> 요소 내에서 <source> 요소를 사용할 때 AVIF 및 WebP 이미지를 지원하지만 호환되는 레거시 이미지로 대체 최신 형식을 지원하지 않는 경우 이 형식을 사용합니다. 이 접근 방식을 사용하면 브라우저는 일치하는 것으로 지정된 첫 번째 <source> 요소를 선택합니다. 가능할 경우 해당 이미지를 사용합니다. 그렇지 않으면 브라우저에서 지정된 다음 <source> 요소로 이동합니다. 위의 HTML에서 스니펫에서 AVIF 형식이 WebP 형식보다 우선하며 JPEG 형식이 지원되지 않습니다.

<picture> 요소는 내부에 중첩된 <img> 요소가 필요합니다. 이 alt, width, height 속성은 <img>에 정의되어 있으며 선택한 <source>와 상관없이

<source> 요소는 media, srcset, sizes도 지원합니다. 속성 위의 <img> 예와 유사하게 다음을 나타냅니다. 다른 표시 영역에서 선택할 이미지를 브라우저에 지정할 수 있습니다.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media 속성은 미디어 조건을 사용합니다. 앞의 예에서 미디어 상태로 사용됩니다 DPR이 다음보다 큰 모든 기기 1.5 이상이면 첫 번째 <source> 요소를 사용합니다. <source> 요소 는 표시 영역이 768픽셀보다 넓은 기기에서 500픽셀 너비로 표시됩니다. 소형 기기에서는 전체 표시 영역 너비를 차지합니다. media와 srcset 결합 속성을 사용하면 사용할 이미지를 더 세밀하게 제어할 수 있습니다.

이 내용은 다음 표에 나와 있습니다. 여기에서는 여러 표시 영역 너비와 표시 영역이 다음과 같이 기기 픽셀 비율이 평가됩니다.

DPR이 1인 기기는 다음을 포함하여 image-500.jpg 이미지를 다운로드합니다. 너비 500픽셀의 외부 크기로 이미지를 보는 데스크톱 사용자 사용 설정됨 반면에 DPR이 3인 모바일 사용자는 잠재적으로 더 큰 image-1500.jpg: DPR이 3인 데스크톱 기기에 사용된 것과 동일한 이미지입니다.

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

이 예에서 <picture> 요소는 추가 <source> 요소가 높은 DPR으로 넓은 기기에 서로 다른 이미지를 사용합니다.

이 추가 쿼리를 사용하면 image-1000-sm.jpg 및 image-1500-sm.jpg는 작은 표시 영역에 표시됩니다. 이 추가 정보는 압축 아티팩트는 그다지 높지 않기 때문에 이미지를 더 압축할 수 있습니다. 이미지 품질에는 영향을 미치지 않으면서도 (데스크톱 기기에서)

또는 srcset 및 media 속성을 조정하여 작은 표시 영역에 큰 이미지 제공:

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

위의 HTML 스니펫에서 너비 설명자는 대신 삭제되었습니다. 기기 픽셀 비율 설명자입니다. 휴대기기에 게재되는 이미지가 제한됩니다. DPR이 3인 기기에서도 /image-500.jpg 또는 /image-1000.jpg로 변경됩니다.

복잡성을 관리하는 방법

반응형 이미지를 사용할 때는 이미지별 크기 변형 및 형식 앞의 예에서 가 사용되지만 AVIF와 WebP는 제외합니다. 대안이 몇 개인가요? 어떻게 알 수 있나요? 많은 엔지니어링 문제와 마찬가지로 답은 '상황에 따라 다름'입니다.

최대한 많은 변형을 사용하고 싶을 수도 있지만, 모든 추가 이미지 옵션은 비용이 발생하며 확인해 보시기 바랍니다. 하나의 옵션만 있으면 모든 사용자가 동일한 이미지를 받게 됩니다. 매우 효율적으로 캐시할 수 있습니다.

반면 변형이 여러 개인 경우 각 변형에는 다른 변형이 필요합니다. 캐시 항목이 있습니다. 서버 비용이 증가할 수 있으며 변형의 캐시 항목이 만료되어 원본 서버에 저장됩니다

그 외에도 HTML 문서의 크기는 변형마다 증가합니다. 나 각 이미지에 여러 KB의 HTML을 제공해야 할 수 있습니다.

Accept 요청 헤더를 기반으로 이미지 제공

Accept HTTP 요청 헤더는 사용자의 브라우저가 이해할 수 있습니다. 이 정보는 서버에서 최적의 이미지 형식을 찾는 데 도움이 됩니다.

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

위 HTML 스니펫은 태그에 추가할 수 있는 단순화된 버전의 코드입니다. 서버의 JavaScript 백엔드가 최적의 이미지 형식을 선택하고 제공하도록 합니다. 요청 Accept 헤더에 image/avif가 포함된 경우 AVIF 이미지는 다음과 같습니다. 있습니다. 그 외의 경우 Accept 헤더에 image/webp가 포함되어 있으면 WebP 이미지는 게재됩니다. 이러한 조건 중 어느 것에도 해당되지 않는 경우 JPEG 이미지는 있습니다.

Accept 요청 헤더의 콘텐츠에 따라 응답을 수정할 수 있습니다. 확인합니다. 예를 들어 이미지 요청을 재작성하여 (mod_rewrite 사용) Accept 헤더에 따라 Apache 서버 실행

이는 이미지 콘텐츠 전송 네트워크에서와 동일한 방식으로 작동합니다. (CDN). 이미지 CDN은 이미지를 최적화하고 최적의 형식을 선택합니다.

핵심은 균형을 찾고, 적절한 수의 이미지를 생성하고, 사용자 경험에 미치는 영향을 측정할 수 있습니다. 다양한 이미지는 각 이미지에 적용되는 최적화는 이미지에 따라 사용자가 사용하는 기기의 크기가 달라질 수 있습니다. 예를 들어 전체 너비의 히어로 이미지는 썸네일 이미지보다 더 많은 변형이 필요할 수 있습니다. 전자상거래 제품 등록정보 페이지

지연 로드

이미지가 표시 영역(loading 속성 사용) 속성 값 lazy는 브라우저가 이미지를 다운로드해서는 안 됩니다. 이 대역폭이 절약되어 브라우저에서 필요한 리소스의 우선순위를 정할 수 있고 중요한 콘텐츠를 렌더링할 수 있습니다.

decoding

decoding 속성은 이미지를 디코딩하는 방법을 브라우저에 알려줍니다. 가 값 async는 이미지를 비동기식으로 디코딩할 수 있음을 브라우저에 알립니다. 다른 콘텐츠를 렌더링하는 시간을 개선할 수 있습니다. 값이 sync이면 이미지가 다른 콘텐츠와 동시에 표시되어야 한다는 브라우저입니다. 기본값 auto를 사용하면 브라우저에서 있습니다.

이미지 데모

학습한 내용 테스트

다음 동영상: 동영상 실적

이미지는 웹에서 가장 많이 사용되는 미디어 유형이지만 몇 가지만 명심하세요. 동영상 웹에서 사용되는 또 다른 일반적인 미디어 유형으로 고려해야 합니다 이 과정의 다음 모듈에서는 동영상 최적화 및 효율적으로 로드하는 방법에 관한 기술을 다룹니다.