오랜 시간 클라우드 4 명의 독자는 반응 형 이미지에 대한 Jason의 결정적인 시리즈에 익숙 할 것입니다. 이 기사는 가장 일반적인 반응 형 이미지 사용 사례 인 해상도 전환에 중점을 둔 짧은 동반자입니다.
https://cloudfour.com/thinks/responsive-images-the-simple-way/
반응형 이미지 사양은 환상적이며 많은 사용 사례를 다루지만 필자의 경험에 따르면 대부분 사용자 경험 중 하나만 이해하면 됩니다.
사용자의 뷰포트 너비에 따라 동일한 이미지의 다른 크기의 사본을 제공합니다. 이 해상도 전환을 호출하고 srcset 및 크기 속성을 사용하여 이를 수행할 수 있습니다.
반응형으로 이미지를 표시하는 논리는 복잡합니다. 여기에는 이미지가 표시 될 크기를 결정하고 사용자가 고해상도 디스플레이를 사용하는지 여부를 이해하는 것이 포함됩니다. 고맙게도 이 로직을 처리하는 것보다 브라우저가 더 잘 갖추어져 있습니다.
우리가 해야 할 일은 힌트를 주는 것입니다. srcset 속성을 사용하여 선택할 이미지 자산 목록을 제공하고 크기 속성을 사용하여 다양한 중단 점에서 이미지가 얼마나 크게 표시되는지 브라우저에 알려줍니다.
아, 그리고 브라우저 지원에 대해 걱정하지 마십시오!
이러한 특성은 전반적으로 뛰어난 지원을 제공 할뿐만 아니라 IE11과 같은 이전 브라우저에도 대체 기능을 제공 할 것입니다.
The srcset Attribute
srcset 속성은 브라우저에 선택할 소스 세트와 해당 소스 각각의 크기를 제공합니다.
너비와 쉼표로 구분 된 URL 목록입니다. 목록의 각 항목은“image.jpg 1000w”와 비슷합니다.
이는 image.jpg 파일의 너비가 1000 픽셀임을 브라우저에 알려줍니다.
이러한 방식으로 이미지 자산 모음을 제공함으로써 브라우저에 다음과 같이 말하고 있습니다. "이미지 목록을 제공하고 있으며 최상의 이미지를 선택할 것을 믿습니다."
브라우저는 현재 뷰포트 크기에서 이미지가 사용자에게 표시되는 크기 및 사용자가 고해상도 디스플레이를 가지고 있는지 여부를 포함하여 복잡한 기준 세트를 기반으로 최상의 이미지를 선택합니다.
이미지가 800 픽셀 너비로 표시 될 경우 저해상도 데스크톱 화면에서는 너비가 800 픽셀 이상인 자산을 목록에서 선택해야 한다는 것이 현명합니다.
또한 이미지가 망막 화면에서 320 픽셀 너비로 표시 될 경우 너비가 640 픽셀 이상인 자산을 선택해야 합니다. 따라서 1x 및 2x 자산에 대해 걱정할 필요가 없습니다. 좋은 이미지 세트를 제공하기 만하면 나머지는 브라우저에서 수행합니다.
어떤 이미지 크기를 제공해야 할지 잘 모르시겠습니까? 아래를 보십시오!
The sizes Attribute
srcset 속성은 모두 훌륭하지만 브라우저가 HTML을 읽을 때 CSS를 사용하여 이미지를 화면 너비의 50 %로 조정했는지 여부는 알 수 없습니다.
이것이 바로 sizes 속성이 나오는 곳입니다. CSS를 적용한 후에 이미지가 렌더링 되는 방법에 대한 힌트를 브라우저에 제공합니다.
크기 속성은 너비와 쌍을 이루는 쉼표로 구분 된 미디어 조건 1입니다. 목록의 각 항목은 "(최소 너비 : 1023px) 780px"와 같이 표시되는데, 이는 브라우저가 뷰포트의 너비가 1023 픽셀 (또는 더 넓은) 일 때 이미지의 너비는 정확히 780 픽셀이라는 것을 알려줍니다.
이미지가 뷰포트 너비의 50 %라는 50vw와 같은 상대 너비를 사용할 수도 있습니다. 더 복잡한 상황에서도 calc를 사용할 수 있습니다. 예를 들어 calc (50vw-2rem)는 이미지가 패딩 또는 경계를 설명하기 위해 뷰포트 너비의 50 %에서 2rem을 뺀 값이라고 말합니다.
목록의 마지막 항목에는 미디어 조건이 필요하지 않습니다. 너비를 제공하고 용지 상태를 끈 상태로 두면 다른 너비와 일치하지 않을 경우 사용되는 기본 너비로 처리됩니다.
브라우저는 이 목록을 따라 작동하며 뷰포트와 일치하는 첫 번째 항목을 적용합니다. 따라서 크기 속성은 다음과 같습니다.
(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw물론 이것들은 단지 예일 뿐이며 실제 세계는 지저분합니다. 좁은 창을 가진 대형 디스플레이 사용자는 더 작은 이미지를 얻을 수 있습니다.
iPad Pro 사용자는 태블릿을 가로 모드로 잡고 있을 때 큰 이미지를, 세로 모드를 잡고 있을 때 중간 이미지를, 분할 화면 모드에서 브라우저를 사용하는 경우 작은 이미지를 얻을 수 있습니다.
일부 더 큰 전화는 가로 모드로 유지 될 때 두 번째 규칙에 적합합니다.
이것이 이 시스템의 아름다움입니다. 이러한 모든 폼 팩터에 대해 생각할 필요는 없습니다.
뷰포트 너비를 기준으로 표시 할 이미지 크기 만 고려해야 합니다.
어떤 값을 선언해야 할지 모르겠습니까? 아래를 보십시오!
The src Attribute
내가 제공 한 모든 예제에는 여전히 src 속성이 있으며 여전히 필요한지 궁금합니다.
대답은 srcset 속성을 제공하면 최신 브라우저는 DOM의 src 값을 srcset에서 선택한 이미지로 대체한다는 것입니다.
따라서 최신 브라우저는 srcset을 위해 src 속성에 지정한 값을 무시합니다.
그러나 src는 반응 형 이미지를 지원하지 않는 브라우저에는 여전히 중요합니다.
이 오래된 브라우저는 srcset 및 크기 속성을 이해할 수 없으므로 무시합니다.
그러나 src 속성을 이해하므로 단일 이미지를 대체 이미지로 제공 할 수 있습니다.
나는 보통 레티 나가 아닌 데스크탑 모니터에서 좋아 보이는 가장 작은 이미지를 선택합니다.
FAQs
이미지 자산을 어떻게 생성해야 합니까?
손으로, 반응형 이미지 생성기 도구 또는 이미지 CDN을 사용하여 이미지를 생성 할 수 있습니다.
손으로 이미지를 생성하려면 Photoshop (또는 선택한 편집기)에서 원본 이미지를 열고 원하는 크기로 내보내십시오.
시간이 오래 걸리므로 도구를 사용하여 이미지를 생성 할 수 있습니다. 여러 도구가 이 작업을 수행하지만 가장 마음에 드는 도구는 Cloudinary의 반응형 이미지 중단점 생성기입니다.
이미지를 업로드하면 다양한 크기가 자동으로 생성됩니다. 설정을 조정하여 생성되는 이미지 수를 제어 할 수 있습니다. 그런 다음 사용할 이미지를 다운로드 할 수 있습니다.
다른 옵션은 Cloudinary 또는 imgix와 같은 이미지를 CDN에 호스팅 하는 것입니다.
이와 같은 서비스를 사용하는 경우 CDN에 고해상도 이미지를 업로드 한 다음 URL 매개 변수를 사용하여 이미지의 크기를 조정할 수 있습니다.
어떤 작업도 수행 할 필요가 없으며 CDN에 이미지를 렌더링 할 크기를 알려 주기만 하면 됩니다.
https://docs.google.com/spreadsheets/d/1e4qdGEoq7tqDCnY7iSSnl3OFoWkzhRfVAly-73A3uCc/edit#gid=0
https://www.responsivebreakpoints.com/
어떤 이미지 크기를 제공해야 합니까?
이것은 좋은 질문입니다! 너무 많은 자산을 제공하면 시간과 에너지를 낭비하게 됩니다. 너무 적게 제공하면 사용자가 필요한 것보다 더 큰 이미지를 다운로드하게 됩니다.
단일 이미지를 처리하고 해당 이미지에 대한 사용자 정의 마크 업을 제공 할 수 있는 경우 Cloudinary의 반응형 이미지 중단점 생성기를 사용할 수 있습니다.
이미지를 자동으로 검사하여 파일 크기와 해상도 사이의 최적 균형을 제공하기 위한 최적의 자산 세트를 결정합니다.
그런 다음 파일을 생성 할 뿐만 아니라 srcset 및 size 속성도 생성합니다.
슬롯에 표시 될 정확한 이미지를 모르는 CMS 또는 웹 앱에서 작업하는 경우 표준 이미지 크기 배열을 선택하는 것이 좋습니다. 과거에는 320w, 640w, 960w, 1280w, 1920w 및 2560w를 사용했습니다. 논리적 진행을 따르는 둥근 숫자 (320의 배수)입니다. 이 세트는 모바일에서 풀 블리드 데스크톱까지의 크기에 적용됩니다.
그러나 표준 크기 배열은 항상 사용자 지정 크기보다 효율성이 떨어집니다. 이 경우 숫자가 논리적이지만 폭이 두 배가 되면 픽셀이 4 배가 되기 때문에 파일 크기가 점차 커집니다. 결과적으로 표준 크기 배열을 선택해야 하는 경우 작은 크기의 자산이 많고 더 큰 크기의 자산이 더 많은 것을 고려할 수 있습니다.
Cloudinary에서 이미지를 호스팅 하는 경우 Cloudinary API를 활용하여 이미지를 업로드 할 때 이미지에 반응 형 이미지 중단 점 생성기를 실행하는 또 다른 방법이 있습니다. 그런 다음 API에서 응답을 가져 와서 srcset 및 크기 속성을 동적으로 채울 수 있습니다.
어떤 크기 값을 선언해야 합니까?
CSS를 보고 다양한 중단 점에서 이미지가 얼마나 넓게 표시되는지 확인하여 크기 속성에 넣을 크기를 결정해야 합니다.
때때로 이것은 이미지 자체의 너비에 의해 결정됩니다.
img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}이 경우 이미지에는 두 가지 고정 크기가 있으며 크기 속성에 직접 반영 될 수 있습니다.
<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">그러나 이미지가 유동적이며 컨테이너에서 너비를 상속 받는 경우가 종종 있습니다.
img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}이 예제 (.container가 이미지 너비에 영향을 미치는 유일한 요소라고 가정)에서 컨테이너 너비를 이미지에 적용 할 수 있습니다. 컨테이너 너비에서 패딩 너비를 빼기도 합니다. 패딩이 전체 너비에 미치는 영향에 따라 이 작업을 수행해야 할 수도 있고 필요하지 않을 수도 있습니다.
<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">보시다시피, 이것은 특정 레이아웃에 크게 의존합니다. 일반적으로 브라우저의 devtools에서 이미지를 검사하여 중단 점이 이미지 너비에 어떤 영향을 미치는지 알아냅니다.
내가 올바르게 했는지 어떻게 확인할 수 있습니까?
상상할 수 있듯이 반응 형 이미지 코드가 올바른지 테스트하는 것은 까다롭고 시간이 많이 걸릴 수 있습니다.
고맙게도 반응형 이미지 린터 (Responsive Image Linter)라고 하는 도구가 있습니다.
브라우저에 추가하고 사이트에서 사용하는 북마크입니다. 트리거 하면 페이지를 다양한 뷰포트 크기와 픽셀 밀도로 자동 스캔하여 이미지를 테스트합니다.
그런 다음 페이지의 모든 이미지와 크기가 올바르게 조정되었는지 여부를 보여주는 보고서를 제공합니다. 그렇지 않은 경우 문제가 무엇인지 알려주고 문제 해결 방법을 제안 할 수도 있습니다.
결론
보시다시피, srcset과 크기 속성의 조합은 당신에게 돈을 많이 넣습니다. 두 가지 속성을 추가하면 브라우저에“이 화면 크기에서 이 이미지의 너비가 넓으므로 이 이미지 목록에서 가장 적합한 옵션을 선택하십시오”라고 브라우저에 지시합니다.
WebP와 같은 최신 이미지 형식을 제공하거나 화면 크기가 다른 여러 이미지를 제공하는 등의 복잡한 작업을 수행해야 하는 경우 더 많은 기능을 사용할 수 있습니다.
이러한 사용 사례에 대한 세부 정보가 필요한 경우 Jason의 Responsive Images 101 시리즈를 강력히 권장합니다.
등록된 댓글이 없습니다.
