반응형 이미지 제공

Katie Hempenius

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

반응형 이미지 및 Core Web Vitals

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

이미지 로드 속도가 빨라지는 효과는 페이지의 최대 콘텐츠 페인트 (LCP)에도 미칠 수 있습니다. 예를 들어 페이지의 LCP 요소가 이미지인 경우 반응형으로 제공하면 리소스 로드 기간을 줄일 수 있습니다.

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

이미지 크기 조절

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

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

날카로운

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

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

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

# 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의 너비가 480px라고 알려주는 너비 설명자입니다. 1080w는 flower-large.jpg의 너비가 1,080픽셀임을 브라우저에 알려주는 너비 설명자입니다.

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

'sizes' 속성

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

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

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

보너스 콘텐츠: 멋진 디자인을 원한다면 sizes 속성을 사용하여 여러 개의 슬롯 크기를 지정할 수도 있습니다. 이렇게 하면 다양한 표시 영역 크기에 따라 다른 레이아웃을 사용하는 웹사이트를 수용할 수 있습니다. 이 다중 슬롯 코드 샘플을 확인하여 방법을 알아보세요.

(더 많은) 추가 크레딧

이미 나열된 모든 추가 크레딧 (이미지가 복잡함) 외에도 아트 디렉션에도 동일한 개념을 사용할 수 있습니다. 아트 디렉션은 동일한 이미지의 다른 버전 대신 완전히 다른 모양의 이미지를 서로 다른 표시 영역에 제공하는 방식입니다. 아트 디렉션 Codelab에서 자세히 알아보세요.

확인

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