반응형 이미지 다루는 방법

오늘은 웹 반응형 이미지에 대해 이야기하겠습니다. 매우 인기 있고 꽤 문제가 되는 주제입니다.

이 주제를 검색하면 온갖 설명이 담긴 수많은 글을 찾을 수 있지만, 저는 그것들을 반복하지 않고 다르게 가르쳐 드리겠습니다.

이미지를 올바르게 로드하고, SEO 순위를 높이며, 웹사이트의 사용자 경험을 개선하세요.

반응형 이미지란?

반응형 이미지는 자동으로 화면 크기에 맞게 조정됩니다(조정되어야 합니다). 하지만… 이것이 올바른 방법일까요? 네, 아니오 모두입니다. 이것을 구글에서 검색하거나 Bootstrap 같은 모던 프레임워크를 보면 “반응형 이미지"의 정의가 다음과 같은 간단한 CSS임을 알 수 있습니다:

1max-width: 100%;
2height: auto;

이것이 “작동"하긴 하지만 완전히 올바르지는 않습니다. 여러 이유가 있지만 가장 중요한 것은 이미지 크기입니다. 이미지의 “너비/높이"가 아닌 킬로바이트/메가바이트 단위의 실제 이미지 크기를 말하는 것입니다.

대부분의 웹사이트(제가 그동안 본 웹사이트의 약 80%)는 믿을 수 없을 정도로 큰 이미지를 사용하고 단순히 크기를 조절합니다. 이런 이미지는 보통 1000px에서 4000px, 심지어 8000px까지 본 적 있습니다!!! (얼마나 미친 건지).

이러한 이미지는 크기가 매우 커서 1MB에서 10MB, 심지어 20MB까지 됩니다. 이미지를 내보낼 때 압축하는 사람은 매우 드물게 봤습니다. 즉, 5개, 10개, 20개 또는 그 이상의 이미지로 구성된 이미지 중심 웹사이트가 있고 사용자가 모바일로 방문하는 경우를 상상해 보세요. 5G에서도 이미지만을 위해 다운로드해야 할 데이터가 상당하며, 나머지는 말할 것도 없습니다.

반응형 이미지를 만드는 방법?

브라우저는 image source set(srcset) 지원으로 도와줍니다. 이 기능으로 다양한 크기의 이미지 여러 버전을 효과적으로 가질 수 있으며, 브라우저가 화면 크기에 따라 적절한 것을 선택합니다. 이것이 반응형입니다!

하지만 대부분의 사람들은 “모르겠다"부터 “이해가 안 된다"까지 다양한 이유로 image source set을 다루지 못합니다.

기술이 발전함에 따라 이제 온라인 도구와 API를 사용하여 이러한 source set을 자동으로 만들 수 있습니다. 하지만 서두르지 마세요. 자동으로 만든다고 해서 결과를 단순히 복사 붙여넣기하여 올바르게 작동할 것으로 기대할 수는 없습니다.

모든 작업과 테스트에서 “만능” 해결책은 없으며 항상 추가 작업이 필요합니다.

올바른 이미지 HTML 태그 선택

이것이 가장 먼저 이해해야 할 가장 중요한 사항입니다. 전통적인 <img />나 모던한 <picture> 태그를 사용할 수 있습니다.

각각 함정이 있지만, 제 경험상 <picture>가 항상 승리합니다. 이 태그는 브라우저에서 널리 지원되므로 문제가 되지 않습니다.

동적 웹사이트에 대한 올바른 크기를 자동으로 생성하는 방법은 (제가 아는 한) 없습니다. 예를 들어 잘 알려진 WordPress는 어떤 이미지를 업로드하고 어디에 배치하느냐에 따라 불규칙하고 잘못된 크기를 생성합니다.

img 태그 사용

img 태그는 대부분의 웹사이트에 있습니다. 반응형 이미지에서 <img /> 태그는 srcset 속성과 결합되지만, 이들 중 어느 것도 올바르게 작동하지 않는다고 자신 있게 말할 수 있습니다.

문제 중 하나는 <img /> 태그가 일부 브라우저, 예를 들어 Chrome에서 올바르게 작동하지 않는다는 것입니다. 실제로 stackoverflow.com 에 이에 관한 질문을 올렸지만 왜 그런지 설명이 없습니다.

또 다른 문제는 sizes 속성을 올바르게 설정하는 것이 고통스럽다는 것입니다. 매우 무뚝뚝하고 불완전한 설명이 담긴 수많은 글이 있어 솔직히 매우 실망스러웠습니다.

이를 바탕으로 반응형 이미지를 위한 <img /> 사용은 논의하지 않겠습니다. 제 의견으로는 무의미하기 때문입니다.

picture 태그 사용

picture 태그가 제 의견으로는 최고입니다. 브라우저를 조작하고 원하는 이미지를 로드하도록 지시할 수 있습니다.

또한 아트 디렉션 지정, 대체 이미지 포맷 등 많은 기능을 지원합니다. 이러한 멋진 기능들로 목표를 달성할 수 있습니다.

하지만 문제없습니다. 이 브라우저가 올해 죽을 때가 된 겁니다.

반응형 이미지 크기 생성

위에서 언급한 대로, 많은 온라인 도구를 사용하여 몇 번의 클릭만으로 올바른 이미지 크기 조정과 소스 코드를 생성할 수 있습니다.

시작점으로 이것을 사용하는 것을 추천합니다: https://responsivebreakpoints.com/ . 이 도구는 이미지 크기를 조정하고 반응형 이미지를 위한 브레이크포인트를 생성합니다.

예를 들어 사이트의 개 사진은 다양한 크기로 조정된 여러 이미지와 해당 HTML 코드를 생성합니다:

 1<picture>
 2
 3<source
 4		media="(max-width: 767px)"
 5		sizes="(max-width: 1534px) 100vw, 1534px"
 6		srcset="
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
16		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
17<source
18		media="(min-width: 768px) and (max-width: 991px)"
19		sizes="(max-width: 1983px) 70vw, 1388px"
20		srcset="
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
27		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
28<source
29		media="(min-width: 992px) and (max-width: 1199px)"
30		sizes="(max-width: 2400px) 60vw, 1440px"
31		srcset="
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
36		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
37<img
38		sizes="(max-width: 7000px) 40vw, 2800px"
39		srcset="
40		dog_c_scale,w_480.jpg 480w,
41		dog_c_scale,w_713.jpg 713w,
42		dog_c_scale,w_1036.jpg 1036w,
43		dog_c_scale,w_1180.jpg 1180w,
44		dog_c_scale,w_1313.jpg 1313w,
45		dog_c_scale,w_1433.jpg 1433w,
46		dog_c_scale,w_1606.jpg 1606w,
47		dog_c_scale,w_1748.jpg 1748w,
48		dog_c_scale,w_1884.jpg 1884w,
49		dog_c_scale,w_2015.jpg 2015w,
50		dog_c_scale,w_2133.jpg 2133w,
51		dog_c_scale,w_2260.jpg 2260w,
52		dog_c_scale,w_2377.jpg 2377w,
53		dog_c_scale,w_2345.jpg 2345w,
54		dog_c_scale,w_1871.jpg 1871w,
55		dog_c_scale,w_2800.jpg 2800w"
56		src="dog_c_scale,w_2800.jpg"
57		alt="">
58</picture>

얼마나 많은 화면 크기를 커버하는지 보세요, 멋지죠? 하지만 이것을 사이트에 그대로 복사 붙여넣기해도 될까요? 아닙니다.

이러한 image source set의 가장 큰 문제는 sizes와 media 속성입니다. 이해하기 상당히 복잡하고 올바르게 작동시키기는 더욱 복잡합니다.

따라서 코드를 더 짧고 이해하기 쉽게 만들어야 합니다. 제 웹사이트(지금 읽고 계신 것)에서는 Bootstrap이 제공하는 일반적인 반응형 브레이크포인트를 사용하여 자체 세트를 만들었습니다.

반응형 이미지 크기를 직접 만들기

최선의(그리고 솔직히 유일한) 해결책은 이미지 태그를 직접 만드는 것입니다.

처음부터 맞춤형 웹사이트를 개발할 때 잘 작동하지만, WordPress 같은 것이 있으면 또 다른 이야기이며 그에 대한 별도의 글이 있을 것입니다.

시작점으로 장치 브레이크포인트를 이해하는 명확하고 쉬운 방법이 필요했습니다. 그래서 매우 신뢰할 수 있는 Bootstrap에서 제공하는 것을 사용했습니다:

위 내용으로 장치 크기에 따라 적절한 이미지를 로드하는 “자체” image source set을 만들었습니다:

 1<picture>
 2
 3<source srcset="" media="(min-width: 1400px)">
 4<source srcset="" media="(min-width: 1200px)">
 5<source srcset="" media="(min-width: 992px)">
 6<source srcset="" media="(min-width: 768px)">
 7<source srcset="" media="(min-width: 576px)">
 8<source srcset="" media="(min-width: 320px)">
 9<img src="" width="" height="" class="" alt="" >
10</picture>

이로써 무슨 일이 일어나야 하고 어떻게 일어나야 하는지 명확하게 이해할 수 있습니다. 즉, 각 기기에서 어떤 이미지가 로드되어야 하는지 알고 실제로 그렇게 됩니다.

이것이 사용할 준비가 된 것처럼 보이지만 아직 완전히 준비되지 않았습니다. 특정 기기에서 이미지를 로드하는 것만으로는 충분하지 않습니다. 이미지가 여전히 너무 클 수 있기 때문입니다.

예시 1:

• 대형 기기(대형 데스크톱, 1200px 이상)에서 이미지 세트를 삽입하는 컨테이너가 800px 고정 크기
• 브라우저는 뷰포트를 봅니다. 예를 들어 1920px인 경우 1400px 크기의 이미지를 로드합니다 (실제로는 768px 이미지 크기가 필요한데…)

예시 2:

• 어떤 기기에서든 이미지 세트를 삽입하는 컨테이너가 400px 고정 크기 (카드나 간단한 박스일 수 있음)
• 브라우저는 뷰포트를 봅니다. 예를 들어 1920px인 경우 1400px 크기의 이미지를 로드합니다 (실제로는 320px 이미지 크기가 필요한데…)

즉, 잘못된 이미지를 로드하고 있으며, 이는 당신과 사용자 모두에게 비용이 듭니다. 먼저 속도를 잃고 (이는 SEO 순위에도 영향) 사용자는 모바일이나 저속 대역폭에서 이미지 로딩을 영원히 기다립니다.

올바른 해결책은 이미지를 삽입하는 컨테이너를 조사하고 적절한 크기를 결정하는 것입니다.

이는 페이지를 검사하고 다양한 기기를 에뮬레이션하여 매우 쉽게 할 수 있습니다. 보통 컨테이너는 거의 같은 크기를 유지합니다.

따라서 위의 예시 1에서 코드를 다음과 같이 수정했습니다:

1<picture>
2
3<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
4<source srcset="" media="(min-width: 992px)">
5<source srcset="" media="(min-width: 768px)">
6<source srcset="" media="(min-width: 576px)">
7<source srcset="" media="(min-width: 320px)">
8<img src="" width="" height="" class="" alt="">
9</picture>

이것이 무엇을 의미할까요? 꽤 자명하지만 설명하겠습니다:

• 최소 너비 320px 기기에서는 320px 이미지를 로드
• 최소 너비 576px 기기에서는 576px 이미지를 로드
• 최소 너비 768px 기기에서는 768px 이미지를 로드
• 최소 너비 992px 기기에서는 992px 이미지를 로드
• 최소 너비 1200px 또는 1400px 또는 2500px 기기에서는 1200px 이미지를 로드

마지막 줄은 컨테이너 크기가 800px(또는 기사 확장 시 1200px)일 때 브라우저가 더 큰 이미지를 로드하지 않도록 보장합니다.

위 방법은 올바른 이미지 크기를 로드하는 측면에서 거의 완벽하다고 생각합니다. Google Pagespeed도 좋아하며 올바른 이미지 크기를 로드하므로 경고를 생성하지 않습니다.

반응형 이미지 테스트

위 내용을 읽은 후 이미지가 올바르게 로드되는지 테스트하는 방법에 대한 일반적인 아이디어가 있을 것이라 확신하지만, 그래도 설명하겠습니다.

테스트 과정은 이미지가 많으면 부담스러울 수 있지만 충분히 가치 있습니다.

해야 할 일은 간단하며, 시간이 좀 걸릴 뿐입니다:

• 원하는 브라우저를 열고 페이지를 로드
• 개발자 도구를 열고 Network 탭에서 “이미지” 필터만 선택
• 여러 기기(모바일, 태블릿 등)에서 페이지를 새로고침하고 어떤 이미지가 로드되는지 확인

그게 다입니다, 특별한 것은 없습니다.

팁과 트릭

• 이미지가 많으면(헤더 이상) loading=lazy 속성을 사용하세요. 자세한 내용은 여기 에서 읽을 수 있습니다.
• 이미지를 직접 내보내기/크기 조정할 수 없다면 온라인 서비스를 사용할 수 있습니다. CDN도 제공하여 이미지를 매우 빠르게 로드합니다. Cloudflare Images 를 추천합니다.
• 이미지 이름을 올바르게 지정하세요, 이것은 매우 중요합니다. 이미지 이름을 올바르게 지정하지 않으면(예: image-small.jpg 또는 image-320.jpg) 테스트할 때 어떤 이미지가 로드되는지 쉽게 파악할 수 없습니다.

이상입니다. 이 글이 도움이 되었기를 바랍니다.