반응형 이미지 제공
데스크톱 크기의 이미지를 모바일 장치에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이미지에 대한 "일률적인" 접근 방식 대신 다양한 장치에 다양한 이미지 크기를 제공하십시오.
이미지 크기 조정 #
가장 널리 사용되는 이미지 크기 조정 도구 중 두 가지는 Sharp npm 패키지 와 ImageMagick CLI 도구 입니다.
Sharp 패키지는 이미지 크기 조정을 자동화하는 데 적합합니다(예: 웹사이트의 모든 동영상에 대해 여러 크기의 축소판 그림 생성). 빌드 스크립트 및 도구와 빠르고 쉽게 통합됩니다. 반면 ImageMagick은 전적으로 명령줄에서 사용되기 때문에 일회성 이미지 크기 조정에 유용합니다.
sharp #
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
너비 300픽셀 x 높이 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
의 너비가 480px임을 브라우저에 알리는 너비 설명자입니다. 1080w
는 flower-large.jpg
의 너비가 1080px임을 브라우저에 알리는 너비 설명자입니다.
"너비 설명자"는 멋지게 들리지만 브라우저에 이미지의 너비를 알려주는 하나의 방법일 뿐입니다. 이렇게 하면 브라우저에서 이미지 크기를 결정하기 위해 이미지를 다운로드할 필요가 없습니다.
추가 크레딧: 다양한 이미지 크기를 제공하기 위해 밀도 설명자에 대해 알 필요는 없습니다. 그러나 밀도 설명자의 작동 방식이 궁금한 경우 해상도 전환 코드 랩을 확인합니다. 밀도 설명자는 장치의 픽셀 밀도에 따라 다양한 이미지를 제공하는 데 사용됩니다.
"크기" 속성 #
크기 속성은 이미지가 표시될 때 브라우저에 이미지의 너비를 알려줍니다. 그러나 크기 속성은 표시 크기에 영향을 주지 않습니다. 이를 위해서는 여전히 CSS가 필요합니다.
브라우저는 로드할 이미지를 결정하기 위해 사용자 장치에 대해 알고 있는 정보(예: 치수 및 픽셀 밀도)와 함께 이 정보를 사용합니다.
브라우저가 'sizes
' 속성을 인식하지 못하는 경우 브라우저는 'src
' 속성에서 지정한 이미지를 로드하도록 대체합니다. (브라우저는 'sizes
' 및 'srcset
' 속성을 동시에 지원하므로 브라우저는 두 속성을 모두 지원하거나 둘 다 지원하지 않게 됩니다.)
추가 크레딧: 멋지게 만들고 싶은 경우 크기 속성을 사용하여 여러 슬롯 크기를 지정할 수도 있습니다. 이것은 다른 뷰포트 크기에 대해 다른 레이아웃을 사용하는 웹 사이트를 수용합니다. 이 작업을 수행하는 방법을 알아 보려면 이 다중 슬롯 코드 샘플을 확인하십시오.
(좀 더) 추가 크레딧 #
이미 나열된 모든 추가 크레딧 외에도(이미지는 복잡합니다!) 아트 디렉션에도 이와 동일한 개념을 사용할 수 있습니다. 아트 디렉션은 완전히 다른 모양의 이미지(같은 이미지의 다른 버전이 아닌)를 다른 뷰포트에 제공하는 실행 방법입니다. 아트 디렉션 코드 랩에서 자세히 알아볼 수 있습니다.
검증 #
반응형 이미지를 구현한 후에는 Lighthouse를 사용하여 누락된 이미지가 없는지 확인할 수 있습니다. Lighthouse 성능 감사(Lighthouse > 옵션 > 성능)를 실행하고 적절한 크기의 이미지 감사 결과를 찾습니다. 이 결과에는 크기를 조정해야 하는 이미지가 나열됩니다.