반응형 이미지 제공

Katie Hempenius

데스크톱 크기의 이미지를 휴대기기에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이 페이지의 가이드라인에 따라 기기마다 다른 이미지 크기를 제공하여 사용자 환경을 개선하세요.

반응형 이미지 및 코어 웹 바이탈

반응형 이미지를 제공하면 페이지에서 사용자 기기의 디스플레이 기능을 평가하고 이러한 기준에 따라 표시하기에 가장 적합한 이미지 조합 중 하나를 선택합니다. 이렇게 하면 주로 작은 화면의 기기에 더 작은 이미지를 제공하여 사용자의 데이터가 절약됩니다.

빠른 이미지 로드의 효과는 페이지의 콘텐츠가 포함된 최대 페인트 (LCP)까지 확대될 수 있습니다. 예를 들어 페이지의 LCP 요소가 이미지인 경우 반응형으로 제공하면 리소스 로드 시간을 줄일 수 있습니다.

리소스 로드 시간이 짧을수록 LCP 이미지 로드 시간이 단축되어 페이지의 LCP 점수가 개선됩니다. LCP가 낮을수록 사용자에게 사이트가 더 빠르게 로드되며, 특히 가장 중요한 콘텐츠 (LCP 요소)가 더 빨리 로드된다고 생각합니다. 반응형 이미지를 제공하면 페이지의 다른 리소스에 대한 대역폭 경합도 줄여서 페이지가 일반적으로 로드되는 속도를 개선할 수 있습니다.

이미지 크기 조절

가장 널리 사용되는 이미지 크기 조절 도구 중 두 가지는 sharp npm 패키지와 ImageMagick CLI 도구입니다.

Sharp 패키지는 이미지 크기 조절을 자동화하는 데 적합합니다. 예를 들어 웹사이트의 모든 동영상에 대해 여러 크기의 썸네일 이미지를 생성합니다. 속도가 빠르고 빌드 스크립트 및 도구와 원활하게 통합됩니다. ImageMagick은 완전히 명령줄에서 실행되므로 일회성 이미지 크기 조절에 더 편리합니다.

날카로운

Sharp를 노드 스크립트로 사용하려면 이 코드를 프로젝트에 별도의 스크립트로 저장한 다음 실행하여 이미지를 변환합니다.

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ImageMagick

이미지 크기를 원래 크기의 33% 로 조정하려면 터미널에서 다음 명령어를 실행합니다.

convert -resize 33% flower.jpg flower-small.jpg

너비 300픽셀, 세로 200픽셀 높이 공간에 맞게 이미지 크기를 조절하려면 다음 명령어를 실행합니다.

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

이미지 버전을 몇 개 만들어야 하나요?

이 질문에 대한 하나의 '정답'은 없습니다. 그러나 일반적으로 3~5개의 서로 다른 크기의 이미지를 제공합니다. 더 많은 이미지 크기를 제공하면 성능은 향상되지만 서버에서 더 많은 공간을 차지하고 약간 더 많은 HTML을 작성해야 합니다.

기타 옵션

Thumbor (오픈소스) 및 Cloudinary와 같은 이미지 서비스도 살펴볼 가치가 있습니다. 두 가지 모두 요청 시 이미지 조작도 제공하는 반응형 이미지를 만드는 간단한 방법입니다. Thumbor를 설정하려면 서버에 설치하세요. Cloudinary가 세부정보를 관리하므로 서버 설정이 필요하지 않습니다.

여러 이미지 버전 제공

여러 이미지 버전을 지정하면 브라우저에서 사용하기에 가장 적합한 버전을 선택합니다.

<img> 태그의 src, srcset, sizes 속성은 모두 상호작용하여 이 최종 결과를 달성합니다.

'src' 속성

src 속성을 사용하면 이 코드가 srcset 및 sizes 속성을 지원하지 않는 브라우저에서 작동합니다. 이러한 브라우저는 src 속성에 지정된 리소스를 로드합니다.

'srcset' 속성

srcset 속성은 쉼표로 구분된 이미지 파일 이름과 너비 또는 밀도 설명자를 나열한 목록입니다.

이 예에서는 브라우저에 이미지의 너비를 알려주는 너비 설명자를 사용하므로, 알아보기 위해 이미지를 다운로드할 필요가 없습니다. 480w는 너비 설명어로, flower-small.jpg의 너비가 480픽셀임을 브라우저에 알려줍니다. 1080w는 너비 설명어로, flower-large.jpg의 너비가 1,080픽셀임을 브라우저에 알려줍니다.

추가 크레딧: 다양한 이미지 크기를 제공하기 위해 밀도 설명자를 알 필요가 없습니다. 하지만 밀도 설명어의 작동 방식이 궁금하다면 해상도 전환 Codelab을 참고하세요. 밀도 설명어는 기기의 픽셀 밀도에 따라 다양한 이미지를 제공하는 데 사용됩니다.

'sizes' 속성

크기 속성은 이미지가 표시될 때의 너비를 브라우저에 알려주지만 이미지의 표시 크기에는 영향을 미치지 않으므로 CSS가 필요합니다.

브라우저는 이 정보와 사용자 기기에 대해 알고 있는 정보 (크기 및 픽셀 밀도 포함)를 사용하여 로드할 이미지를 결정합니다.

브라우저가 'sizes' 속성을 인식하지 못하면 'src' 속성으로 지정된 이미지를 로드하는 방식으로 대체됩니다. sizes 및 srcset는 동시에 도입되었으므로 모든 브라우저가 두 속성을 모두 지원하거나 둘 다 지원하지 않습니다.

추가 크레딧: 세련되게 다듬으려면 크기 속성을 사용하여 여러 슬롯 크기를 지정할 수도 있습니다. 따라서 표시 영역 크기에 따라 다른 레이아웃을 사용하는 웹사이트를 수용할 수 있습니다. 이렇게 하는 방법을 알아보려면 이 다중 슬롯 코드 샘플을 확인하세요.

추가 크레딧

이미 나열된 모든 추가 크레딧 (이미지가 복잡함) 외에도 이러한 동일한 개념을 아트 디렉션에 사용할 수 있습니다. 아트 디렉션은 동일한 이미지의 여러 버전이 아닌 완전히 다른 모습의 이미지를 여러 표시 영역에 게재하는 방식입니다. 자세한 내용은 아트 디렉션 Codelab에서 확인하세요.

확인

반응형 이미지를 구현한 후 Lighthouse를 사용하여 누락된 이미지가 없는지 확인할 수 있습니다. Lighthouse 성능 감사(Lighthouse > 옵션 > 성능)를 실행하고 적절한 크기의 이미지 감사 결과를 찾습니다. 이 결과에는 크기를 조절해야 하는 이미지가 나열됩니다.