반응형 이미지를 위한 초보자 가이드: 이미지를 올바르게 만드는 방법

이 반응형 이미지 자습서에서는 CSS 기술, HTML 기능 및 고려해야 할 몇 가지 도구를 살펴봅니다. 이 모든 것이 오늘날 프로젝트에서 반응형 이미지를 시작하는 데 대한 좋은 개요를 제공해야 합니다.

목차:

• 일반 CSS를 사용한 반응형 이미지
• srcset 및 sizes 속성이 있는 반응형 이미지
• 픽셀 밀도 설명자와 함께 srcset 사용
• <picture> 요소 사용
• 반응형 이미지를 지원하는 도구 및 서비스

일반 CSS를 사용한 반응형 이미지

웹 페이지의 이미지를 반응형으로 만드는 가장 간단한 방법은 미디어 쿼리나 추가 HTML이 필요하지 않습니다. HTML과 CSS 몇 줄로 창 크기에 따라 이미지를 늘리거나 줄일 수 있습니다.

먼저 내 HTML에는 width 및 height 속성이 포함됩니다.

HTML에 width 및 height 값을 포함하는 것이 가장 좋습니다. 이렇게 하면 브라우저가 이미지에 필요한 공간을 예약하고 이미지가 로드될 때 후속 페이지 리플로우가 발생하지 않습니다.

그와 함께 다음 CSS를 사용할 것입니다.

 img { max-width : 100% ; height : auto; }
 코드 언어: CSS ( css )

이 값은 내 HTML을 재정의합니다. max-width 속성은 필요한 공간을 최대 1000px(HTML의 값)까지 채우도록 100% 로 설정됩니다. auto 의 height 값은 이미지의 높이가 이미지 크기를 자연적인 너비와 높이에 비례하도록 유지하도록 합니다. height: auto 줄을 제거하면 너비에 관계없이 이미지가 HTML에 정의된 높이로 유지됩니다. 이는 일반적으로 내가 원하는 것이 아닙니다.

다음 CodePen을 사용하여 이 간단한 예를 시도해 볼 수 있습니다. 응답성을 테스트하려면 새 창에서 데모를 여는 것이 가장 좋습니다.

제 예에서 이미지의 자연 크기는 2000px x 1333px이지만 최대 1000px로 표시하도록 선택했습니다.

이론적으로 내 페이지의 모든 이미지에 대해 위의 작업을 수행할 수 있으며 이는 반응형 이미지를 내 프로젝트에 통합하는 기본적이고 수용 가능한 방법이 될 것입니다. 그러나 이상적으로는 다음 섹션에서 논의할 SEO와 성능을 개선하고 도움을 주기 위해 이것을 한 단계 더 발전시키고 이미지의 해상도 및 기타 요소를 제어하고 싶습니다.

srcset 및 sizes 속성이 있는 반응형 이미지

위의 간단한 CSS 예제에서는 크기를 줄이기 위해 무손실 압축을 사용한 후에도 약 1.44MB 크기의 이미지를 로드하고 있습니다. 데스크탑에서 볼 때 그 자체로는 끔찍하지 않지만, 확실히 스마트폰과 같은 작은 장치에 로드하고 싶은 크기는 아닙니다. 여기에서 srcset 및 sizes 속성이 유용합니다.

srcset 속성을 사용하면 단일 값에 여러 이미지 크기를 지정할 수 있습니다. 브라우저나 장치가 정의된 상황에서 액세스할 수 있는 이미지입니다. sizes 속성은 srcset 과 함께 작동하여 브라우저에 선택할 이미지를 알려줍니다.

다음은 이전 예에서 여러 버전의 leopard.png 이미지를 사용하는 예입니다.

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 코드 언어: HTML, XML ( xml )

이전에 srcset 및 sizes 속성을 본 적이 없다면 언뜻 보기에 혼란스러워 보일 수 있습니다. 비교적 이해하기 쉽도록 모두 분해하겠습니다.

srcset 속성 분석

srcset 속성은 쉼표로 구분된 하나 이상의 문자열 목록을 허용합니다. 각 문자열에는 다음이 포함됩니다.

• 이미지를 가리키는 URL
• 다음 선택적 설명자 중 하나(공백으로 구분):
  • 너비 설명자
  • 픽셀 밀도 설명자

내 예에서는 가장 자주 보게 될 너비 설명자를 포함했습니다. 이미지의 세 가지 다른 버전을 포함했습니다. 하나는 너비가 800px이고 다른 하나는 너비가 480px인 큰 고해상도 버전입니다.

위의 예에서 너비 설명자를 사용했을 때 구문은 너비 값 바로 뒤에 "w"가 옵니다("px" 단위 값을 사용하지 마십시오!). 이미지를 나타내는 각 너비 설명자에 대해 이미지의 고유 너비(픽셀 단위)를 사용하고 있습니다. 파일 시스템, 사진 편집기 또는 브라우저나 브라우저의 개발자 도구에서 속성을 참조하여 다양한 방법으로 이미지의 실제 크기를 얻을 수 있습니다.

sizes 속성 분해

sizes 속성은 srcset 속성과 함께만 작동합니다. srcset 만 사용할 수 있지만(다음 섹션 참조) srcset 을 사용하는 가장 일반적인 방법은 sizes 와 함께 사용하는 것입니다.

sizes 속성은 쉼표로 구분된 하나 이상의 문자열 목록을 허용합니다. 각 문자열에는 다음이 포함됩니다.

• 미디어 조건(CSS에서 사용되는 미디어 쿼리와 유사)
• 이미지의 "슬롯" 크기를 정의하는 값이 차지합니다.

슬롯 값은 em 또는 px 와 같은 절대 길이 또는 뷰포트 상대 단위(예: vw )일 수 있습니다. 내 예에서 sizes 속성의 슬롯 값은 세 가지 너비 설명자와 정확히 일치하지 않습니다. 다음은 다시 코드입니다.

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 코드 언어: HTML, XML ( xml )

슬롯 값이 너비 설명자와 정확히 일치하지 않는다는 사실은 괜찮습니다. 제 경우에는 sizes 값을 다음과 같이 분류할 수 있습니다.

• 너비가 600픽셀인 뷰포트는 너비가 480픽셀인 슬롯 내부의 srcset 값에서 480w 이미지를 로드합니다.
• 1000px 너비의 뷰포트는 800px 슬롯에 800w 이미지를 로드합니다.
• 이전 미디어 조건이 충족되지 않으면 기본 전체 크기 이미지(2000w)가 1000px 슬롯을 채웁니다.

마지막 문자열은 미디어 조건이 없는 슬롯 값 단독입니다. 언급한 바와 같이 이는 브라우저가 어떤 미디어 조건도 충족되지 않는 경우 표시할 내용을 갖도록 하여 기본값으로 작동합니다.

아래 CodePen 데모를 사용하여 작동 중인 예제 코드를 볼 수 있습니다. 이 경우 다른 장치(예: Chrome의 DevTools)를 모방하는 것을 테스트해야 합니다. 실제 테스트를 수행하기 위해 다양한 실제 장치를 사용하여 페이지를 열 수도 있습니다. 편의를 위해 페이지를 볼 때 로드되는 내용을 확인할 수 있도록 각 이미지에 텍스트 오버레이를 포함했습니다.

원본 이미지가 로드된 후 뷰포트의 크기를 변경할 때 이미지의 크기가 변경되지 않습니다. srcset 및 sizes 속성은 첫 번째 로드 시 미디어 조건에 따라 이미지를 로드하는 데 유용하지만 화면 크기 조정을 기반으로 이미지를 전환하는 데는 도움이 되지 않습니다. 나중에 그 문제를 해결할 다른 반응형 이미지 기능을 보여 드리겠습니다.

픽셀 밀도 설명자와 함께 srcset 사용

이전에 srcset 속성을 픽셀 밀도 설명자와 함께 사용할 수 있다고 언급했습니다. 이 설명자를 통해 브라우저는 장치의 해상도 기능에 따라 사용할 이미지를 결정할 수 있습니다. 다음은 다음과 같습니다.

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 코드 언어: HTML, XML ( xml )

여기서 몇 가지를 확인하십시오. 첫째, 일반 src 속성의 경우 가장 작은 이미지를 사용하여 모바일 우선 접근 방식을 보장합니다. 다음으로 srcset 속성에는 1.5x 및 2x 설명자로 표시된 해상도와 함께 몇 가지 다른 버전의 이미지가 포함됩니다. 480 이미지에는 1x가 암시되기 때문에 설명자가 포함되지 않습니다. 마지막으로 이 경우에는 필요하지 않은 sizes 속성이 없습니다. MDN은 브라우저가 이미지를 선택하는 방법을 설명합니다:

설명자의 작동 방식을 이해하려면 하나의 장치 픽셀이 각 CSS 픽셀을 나타냅니다. 따라서 1x는 1:1 비율이 되고 1.5x는 1.5:1 비율이 되는 식입니다. 아래 CodePen에서 시도해 볼 수 있지만 차이점을 확인하려면 다른 장치를 사용하거나 이를 모방하는 도구를 사용해야 합니다.

<picture> 요소 사용

지금까지 반응형 이미지를 통합하기 위해 논의한 기능은 항상 동일한 이미지를 표시하지만 크기와 해상도는 다르다고 가정합니다. 모든 예제에서 CSS를 사용하여 사용자가 브라우저의 크기를 조정할 때 이미지의 너비를 변경하고 있지만 페이지가 로드되면 이미지 자체는 실제로 변경되지 않습니다.

<picture> 요소는 특정 미디어 기능의 존재를 기반으로 이미지의 대체 버전을 제공할 수 있는 HTML 기능입니다. 이것은 또한 사용자가 뷰포트의 크기를 조정할 때 이미지를 전환할 수 있게 하고 본질적으로 이미지로 아트 디렉션을 수행하여 동일한 장면의 다양성을 표시하지만 장치 크기에 따라 다르게 자르거나 확대/축소할 수 있습니다.

예를 들어 가운데에 작은 물체가 있는 와이드 샷은 데스크톱이나 태블릿의 더 큰 장치에 적합하지만 스마트폰과 같은 작은 장치는 자르거나 확대한 동일한 이미지를 로드할 수 있습니다.

다음은 내 이미지에서 아트 디렉션을 수행할 수 있는 몇 가지 예제 코드입니다.

코드에 대해 다음 사항에 유의하십시오.

• <picture> 요소는 여러 개의 중첩된 <picture> 요소를 자식으로 받아들입니다.
• <picture> 내부의 각 <source> 요소는 media 속성을 사용하여 해당 소스 이미지의 사용을 트리거하는 미디어 조건을 정의합니다.
• <picture> 요소는 일반 &lt;img&gt; <picture> 를 지원하지 않는 경우 브라우저가 폴백으로 인식하는 자식으로 요소
• <picture> 요소에 직접 속성이 없습니다( <picture> 는 HTML의 전역 속성만 허용하며 자체 속성이 없습니다)

아래 CodePen은 이를 보여줍니다.

새 창에서 데모를 열면 창 크기를 조정하여 이미지 변경 사항을 확인할 수 있습니다. 브라우저 창이 작아질수록 이미지의 주제가 어떻게 더 확대되는지 확인하십시오. 이것은 어떤 장치를 사용하든 적절하게 보이는 반응형 아트 연출 이미지를 만드는 쉬운 방법입니다. 물론 이것은 약간의 작업이 더 필요하지만 사용되는 모든 장치에서 이미지를 의미 있게 만들고 싶다면 가치가 있습니다.

반응형 이미지를 지원하는 도구 및 서비스

반응형 이미지를 구현하는 데 도움이 되는 무료 및 상업용 도구가 무수히 많이 있습니다. 그리고 이들 중 일부는 내가 논의한 많은 코드를 작성하지 않아도 되는 데 도움이 될 것입니다. 다음은 유용할 수 있는 몇 가지입니다.

중요하고도 편리하게도 다양한 서비스에서 다양한 이미지 크기, 즉석 이미지 생성용 API 등과 같은 기능을 제공하여 반응형 이미지를 자동으로 생성할 수 있습니다.

WordPress 자체에도 반응형 이미지 지원 기능이 내장되어 있습니다(버전 4.4부터).

살펴볼 가치가 있는 또 다른 도구/서비스는 Optimole입니다. Themeisle 뒤에 있는 팀에서 구축한 고급 이미지 최적화 및 전달 도구입니다. 이것은 화질 저하 없이 이미지의 디스크 크기를 줄일 뿐만 아니라 이미지 CDN을 통해 웹사이트 방문자에게 이미지를 전달하는 데에도 도움이 됩니다. 이 이미지 전달 기능의 측면 중 하나는 이미지가 다양한 장치에서 볼 수 있도록 최적화된다는 것입니다.

Optimole의 무료 버전이 있습니다. 매월 최대 5,000개의 웹사이트 방문이 가능하며 모든 자동 크기 조정 기능, CDN 등을 제공합니다.

웹사이트의 반응형 이미지에 대한 경험은 어떻습니까? 아래 의견에 알려주십시오.

Chris Fitzgerald와 Karol K.의 레이아웃 및 프레젠테이션