이 페이지는 Cloud Translation API를 통해 번역되었습니다.

반응형 이미지

사진 한 장은 1, 000단어의 가치가 있으며 이미지는 모든 페이지에서 중요한 역할을 합니다. 그러나 다운로드되는 바이트의 대부분을 차지하는 경우도 많습니다. 반응형 웹 디자인을 사용하면 기기 특성에 따라 레이아웃을 변경할 수 있을 뿐만 아니라 이미지도 변경할 수 있습니다.

Pete LePage

Twitter GitHub Glitch Mastodon 홈페이지

반응형 웹 디자인은 기기 특성에 따라 레이아웃을 변경할 수 있을 뿐만 아니라 콘텐츠도 변경할 수 있음을 의미합니다. 예를 들어 고해상도 (2x) 디스플레이에서 고해상도 그래픽은 선명도를 보장합니다. 너비가 50% 인 이미지는 브라우저의 너비가 800px일 때는 잘 작동할 수 있지만 좁은 휴대전화에서는 공간을 너무 많이 사용하며 작은 화면에 맞게 축소할 때도 동일한 대역폭 오버헤드가 필요합니다.

아트 디렉션

이미지를 보다 대폭 변경해야 하는 경우도 있습니다. 예를 들어 비율을 변경하고 이미지를 자르고 전체 이미지를 교체해야 할 수도 있습니다. 이 경우 이미지를 변경하는 것을 일반적으로 아트 디렉션이라고 합니다. 자세한 예는 responsiveimages.org/demos/를 참고하세요.

반응형 이미지

이미지는 웹페이지를 로드하는 데 필요한 평균 바이트의 60% 이상을 차지한다는 사실을 알고 계셨나요?

이 과정에서는 최신 웹에서 이미지를 사용하여 모든 기기에서 이미지를 멋지게 표시하고 빠르게 로드하는 방법을 알아봅니다.

이 과정에서 반응형 이미지를 개발 워크플로에 원활하게 통합하는 데 필요한 다양한 기술과 기법을 익힐 수 있습니다. 과정을 마치면 다양한 표시 영역 크기 및 사용 시나리오에 맞게 조정 및 응답하는 이미지를 개발할 수 있습니다.

Udacity를 통해 제공되는 무료 과정입니다.

과정 수강하기

마크업의 이미지

img 요소는 강력합니다. 콘텐츠를 다운로드하고 디코딩하고 렌더링하며 최신 브라우저는 다양한 이미지 형식을 지원합니다. 여러 기기에서 작동하는 이미지를 포함하는 것은 데스크톱의 경우와 다르지 않으며, 몇 가지만 조정하면 좋은 환경을 만들 수 있습니다.

요약

이미지가 실수로 컨테이너를 오버플로하는 것을 방지하려면 이미지에 상대적 크기를 사용합니다.
기기 특성 (아트 디렉션)에 따라 다른 이미지를 지정하려면 picture 요소를 사용하세요.
img 요소에서 srcset 및 x 설명자를 사용하여 다양한 밀도를 선택할 때 사용할 최적의 이미지에 관한 힌트를 브라우저에 제공합니다.
페이지에 이미지가 한두 개만 있고 이 이미지가 사이트의 다른 곳에서 사용되지 않는다면 인라인 이미지를 사용하여 파일 요청을 줄여보세요.

이미지에 상대적 크기 사용

이미지가 실수로 표시 영역을 오버플로하는 것을 방지하려면 이미지의 너비를 지정할 때 상대 단위를 사용해야 합니다. 예를 들어 width: 50%;를 사용하면 이미지 너비가 포함된 요소의 50% 가 됩니다 (표시 영역의 50% 또는 실제 픽셀 크기의 50% 가 아님).

CSS에서는 콘텐츠가 컨테이너를 오버플로하도록 허용하므로, 이미지 및 기타 콘텐츠가 오버플로되지 않도록 하려면 max-width: 100% 를 사용해야 할 수 있습니다. 예를 들면 다음과 같습니다.

img, embed, object, video {
    max-width: 100%;
}

img 요소의 alt 속성을 통해 의미 있는 설명을 제공해야 합니다. 이렇게 하면 스크린 리더 및 기타 보조 기술에 대한 컨텍스트를 제공하여 사이트에 더 쉽게 액세스할 수 있습니다.

높은 DPI 기기에서 `srcset`로 `img`를 개선합니다.

srcset 속성을 사용하면 img 요소의 동작을 개선하여 다양한 기기 특성에 맞는 여러 이미지 파일을 쉽게 제공할 수 있습니다. CSS의 기본 image-set CSS 함수와 마찬가지로, srcset를 사용하면 브라우저에서 기기 특성에 따라 최적의 이미지를 선택할 수 있습니다. 예를 들어 2배 디스플레이에서 2배 이미지를 사용하고, 향후에는 제한된 대역폭 네트워크에서 2배 기기에 1x 이미지를 사용할 수 있습니다.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

srcset를 지원하지 않는 브라우저에서는 브라우저가 src 속성으로 지정된 기본 이미지 파일을 사용합니다. 따라서 기능에 관계없이 모든 기기에 표시할 수 있는 1x 이미지를 항상 포함하는 것이 중요합니다. srcset가 지원되는 경우 요청하기 전에 쉼표로 구분된 이미지/조건 목록이 파싱되며 가장 적절한 이미지만 다운로드되어 표시됩니다.

조건에는 픽셀 밀도, 너비, 높이 등 모든 항목이 포함될 수 있지만 현재는 픽셀 밀도만 제대로 지원됩니다. 현재 동작과 향후 기능의 균형을 이루려면 속성에 2배 이미지만 제공하면 됩니다.

반응형 이미지에서 `picture`를 사용한 아트 디렉션

기기 특성(아트 디렉션)에 따라 이미지를 변경하려면 picture 요소를 사용합니다. picture 요소는 기기 크기, 기기 해상도, 방향 등 다양한 특성에 따라 여러 버전의 이미지를 제공하기 위한 선언적 솔루션을 정의합니다.

참고: 브라우저에 picture 요소가 표시되기 시작합니다. 아직 모든 브라우저에서 사용할 수 있는 것은 아니지만, 강력한 이전 버전과의 호환성과 Picturefill 폴리필의 잠재적 용도가 있기 때문에 이 요소를 사용하는 것이 좋습니다. 자세한 내용은 ResponsiveImages.org 사이트를 참고하세요.

이미지 소스가 여러 밀도로 있거나 반응형 디자인이 일부 유형의 화면에서 약간 다른 이미지를 지시하는 경우 picture 요소를 사용합니다. video 요소와 마찬가지로 여러 source 요소를 포함할 수 있으므로 미디어 쿼리 또는 이미지 형식에 따라 서로 다른 이미지 파일을 지정할 수 있습니다.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

사용해 보기

위의 예에서 브라우저 너비가 800px 이상이면 기기 해상도에 따라 head.jpg 또는 head-2x.jpg가 사용됩니다. 브라우저가 450px에서 800px 사이인 경우 기기 해상도에 따라 head-small.jpg 또는 head-small- 2x.jpg가 다시 사용됩니다. 화면 너비가 450px 미만이고 picture 요소가 지원되지 않는 이전 버전과의 호환성의 경우 브라우저는 img 요소를 대신 렌더링하며, 항상 포함되어야 합니다.

상대 크기의 이미지

이미지의 최종 크기를 알 수 없는 경우 이미지 소스의 밀도 설명자를 지정하기 어려울 수 있습니다. 브라우저의 크기에 따라 브라우저의 비례 너비에 걸쳐 유동적인 이미지의 경우 특히 그렇습니다.

고정된 이미지 크기와 밀도를 제공하는 대신, 이미지 요소의 크기와 함께 너비 설명어를 추가하여 제공된 각 이미지의 크기를 지정할 수 있습니다. 그러면 브라우저에서 자동으로 유효 픽셀 밀도를 계산하고 다운로드할 최적의 이미지를 선택할 수 있습니다.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

사용해 보기

위의 예에서는 브라우저의 너비와 기기 픽셀 비율에 따라 표시 영역 너비의 절반(sizes="50vw")인 이미지를 렌더링합니다. 따라서 브라우저 창 크기에 관계없이 브라우저에서 올바른 이미지를 선택할 수 있습니다. 예를 들어 아래 표는 브라우저에서 선택하는 이미지를 보여줍니다.

브라우저 너비	기기 픽셀 비율	사용된 이미지	효과적인 해결 방법
400픽셀	1	`200.jpg`	1x
400픽셀	2	`400.jpg`	2배
320px	2	`400.jpg`	2.5배
600px	2	`800.jpg`	2.67배
640픽셀	3	`1000.jpg`	3.125배
1,100픽셀	1	`800.png`	1.45배

반응형 이미지의 중단점 고려

대부분의 경우 사이트의 레이아웃 중단점에 따라 이미지 크기가 변경될 수 있습니다. 예를 들어 작은 화면에서는 이미지가 표시 영역의 전체 너비에 맞게 확장되도록 하고 큰 화면에서는 이미지가 작은 부분만을 차지하도록 할 수 있습니다.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

사용해 보기

위의 예에서 sizes 속성은 여러 미디어 쿼리를 사용하여 이미지의 크기를 지정합니다. 브라우저 너비가 600px보다 크면 이미지는 표시 영역 너비의 25% 가 됩니다. 500px~600px 사이인 경우 이미지는 표시 영역 너비의 50% 이고 500px 미만이면 전체 너비입니다.

제품 이미지를 확대 가능하게 만들기

J. 확장형 제품 이미지가 있는 Crews 웹사이트 — J. 확장형 제품 이미지가 포함된 Crew 웹사이트

고객은 자신이 구매하는 것을 알고 싶어 합니다. 소매 사이트에서 사용자는 제품을 고해상도 클로즈업하여 자세히 볼 수 있기를 기대하지만 연구 참여자는 그렇지 못한 경우 불만을 느꼈습니다.

탭할 수 있는 확장형 이미지의 좋은 예는 J. Crew 사이트. 사라지는 오버레이는 이미지를 탭할 수 있음을 나타내며, 세밀하게 볼 수 있는 확대된 이미지를 제공합니다.

기타 이미지 기법

압축 이미지

압축 이미지 기법은 기기의 실제 기능과 관계없이 고도로 압축된 2x 이미지를 모든 기기에 제공합니다. 이미지 유형과 압축 수준에 따라 이미지 품질은 바뀌지 않는 것처럼 보일 수 있지만 파일 크기는 크게 줄어듭니다.

사용해 보기

자바스크립트 이미지 대체

자바스크립트 이미지 대체는 기기의 기능을 확인하고 '올바른 작업을 실행'합니다. window.devicePixelRatio를 통해 기기 픽셀 비율을 확인하고 화면 너비와 높이를 가져올 수 있으며 navigator.connection를 통해 일부 네트워크 연결 스니핑을 실행하거나 가짜 요청을 실행할 수도 있습니다. 이 모든 정보를 수집했다면 로드할 이미지를 결정할 수 있습니다.

이 접근 방식의 한 가지 큰 단점은 자바스크립트를 사용하면 최소한 Look-Ahead 파서가 완료될 때까지 이미지 로드가 지연된다는 점입니다. 즉, pageload 이벤트가 실행될 때까지 이미지 다운로드도 시작되지 않습니다. 또한 브라우저가 1x 및 2x 이미지를 모두 다운로드할 가능성이 높으므로 페이지 크기가 커집니다.

이미지 인라인 처리: 래스터 및 벡터

근본적으로 다른 두 가지 방법으로 이미지를 만들고 저장할 수 있으며, 이는 이미지를 반응형으로 배포하는 방식에 영향을 미칩니다.

사진 및 기타 이미지와 같은 래스터 이미지는 개별 색상 점의 그리드로 표시됩니다. 래스터 이미지는 카메라 또는 스캐너에서 가져올 수도 있고, HTML 캔버스 요소로 만들 수도 있습니다. 래스터 이미지를 저장하는 데 PNG, JPEG, WebP와 같은 형식이 사용됩니다.

로고, 라인 아트와 같은 벡터 이미지는 곡선, 선, 도형, 채우기 색상, 그라데이션의 집합으로 정의됩니다. 벡터 이미지는 Adobe Illustrator 또는 Inkscape와 같은 프로그램을 사용하여 만들거나 SVG와 같은 벡터 형식을 사용하여 코드로 필기 작성할 수 있습니다.

SVG

SVG를 사용하면 반응형 벡터 그래픽을 웹페이지에 포함할 수 있습니다. 래스터 파일 형식에 비해 벡터 파일 형식의 장점은 브라우저가 벡터 이미지를 모든 크기로 렌더링할 수 있다는 것입니다. 벡터 형식은 이미지의 도형, 즉 선, 곡선, 색상 등으로 구성된 이미지의 구조를 설명합니다. 반면 래스터 형식은 색상의 개별 점들에 관한 정보만 포함하므로 크기 조정 시 빈칸을 채우는 방법을 브라우저에서 추측해야 합니다.

다음은 동일한 이미지의 두 가지 버전입니다. 왼쪽은 PNG 이미지이고, 오른쪽은 SVG입니다. SVG는 모든 크기에서 잘 보이지만 옆에 있는 PNG는 더 큰 디스플레이 크기에서 흐릿하게 보입니다.

페이지에서 보내는 파일 요청 수를 줄이려면 SVG 또는 데이터 URI 형식을 사용하여 이미지를 인라인으로 코딩하면 됩니다. 이 페이지의 소스를 보면 아래의 두 로고(데이터 URI, SVG)가 모두 인라인으로 선언된 것을 확인할 수 있습니다.

SVG는 모바일과 데스크톱에서 훌륭한 지원을 제공하며 최적화 도구를 통해 SVG 크기를 크게 줄일 수 있습니다. 다음 두 인라인 SVG 로고는 모양이 동일하지만 하나는 약 3KB이고 다른 하나는 2KB입니다.

데이터 URI

데이터 URI는 이미지와 같은 파일을 인라인으로 포함하는 방법을 제공합니다. img 요소의 src를 다음 형식을 사용하여 Base64로 인코딩된 문자열로 설정하면 됩니다.

<img src="data:image/svg+xml;base64,[data]">

위 HTML5 로고의 코드 시작은 다음과 같습니다.

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(전체 버전은 5,000자(영문 기준) 이상입니다.)

jpillora.com/base64-encoder와 같은 드래그 앤 드롭 도구를 사용하여 이미지와 같은 바이너리 파일을 데이터 URI로 변환할 수 있습니다. SVG와 마찬가지로 데이터 URI도 모바일 및 데스크톱 브라우저에서 잘 지원됩니다.

CSS에서 인라인 처리

데이터 URI 및 SVG는 CSS에서도 인라인 처리될 수 있으며 모바일과 데스크톱에서 모두 지원됩니다. 다음은 CSS에서 배경 이미지로 구현된 똑같은 모습의 이미지 두 개입니다. 하나는 데이터 URI이고 하나는 SVG입니다.

인라인 삽입의 장단점

이미지의 인라인 코드는 장황할 수 있으며, 특히 데이터 URI는 왜 사용해야 할까요? HTTP 요청을 줄이려면 SVG와 데이터 URI를 사용하면 단일 요청으로 이미지, CSS, 자바스크립트를 포함한 전체 웹페이지를 가져올 수 있습니다.

단점:

모바일에서는 데이터 URI가 외부 src의 이미지보다 모바일의 표시 속도가 훨씬 느릴 수 있습니다.
데이터 URI는 HTML 요청의 크기를 상당히 늘릴 수 있습니다.
또한 마크업과 워크플로가 복잡해집니다.
데이터 URI 형식은 바이너리보다 훨씬 크기 (최대 30%)이므로 총 다운로드 크기가 줄어들지 않습니다.
데이터 URI는 캐시할 수 없으므로 사용되는 모든 페이지에 대해 다운로드해야 합니다.
IE 6 및 7에서는 지원되지 않으며, IE8에서는 지원이 불완전합니다.
HTTP/2에서는 애셋 요청 수를 줄이는 것이 우선순위가 낮아집니다.

반응형 모든 것과 마찬가지로, 가장 효과적인 것을 테스트해야 합니다. 개발자 도구를 사용하여 다운로드 파일 크기, 요청 수, 총 지연 시간을 측정할 수 있습니다. 데이터 URI는 때때로 래스터 이미지에 유용할 수 있습니다(예: 홈페이지에 다른 곳에서 사용되지 않는 사진이 한두 개만 있는 경우). 벡터 이미지를 인라인해야 한다면 SVG가 훨씬 더 나은 옵션입니다.

CSS의 이미지

CSS background 속성은 복잡한 이미지를 요소에 추가하기 위한 강력한 도구로, 여러 이미지를 손쉽게 추가하고 반복하는 등의 작업을 할 수 있습니다. 미디어 쿼리와 결합되면 백그라운드 속성이 더욱 강력해져 화면 해상도, 표시 영역 크기 등을 기반으로 조건부 이미지 로드가 가능합니다.

요약

디스플레이 특성에 맞는 최적의 이미지를 사용하고 화면 크기, 기기 해상도, 페이지 레이아웃을 고려하세요.
min-resolution 및 -webkit-min-device-pixel-ratio로 미디어 쿼리를 사용하는 높은 DPI 디스플레이의 경우 CSS에서 background-image 속성을 변경합니다.
마크업의 1x 이미지 외에 고해상도 이미지를 제공하려면 srcset를 사용하세요.
JavaScript 이미지 대체 기법을 사용하거나 고도로 압축된 고해상도 이미지를 저해상도 기기에 제공할 때는 성능 비용을 고려하세요.

조건부 이미지 로드 또는 아트 디렉션에 미디어 쿼리 사용

미디어 쿼리는 페이지 레이아웃에 영향을 미칠 뿐만 아니라 미디어 쿼리를 사용하여 조건부로 이미지를 로드하거나 표시 영역 너비에 따라 아트 디렉션을 제공할 수도 있습니다.

예를 들어 아래 샘플에서 작은 화면에서는 small.png만 다운로드되어 콘텐츠 div에 적용되고 큰 화면에서는 background-image: url(body.png)가 본문에 적용되고 background-image: url(large.png)는 콘텐츠 div에 적용됩니다.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

사용해 보기

image-set을 사용하여 고해상도 이미지 제공

CSS의 image-set() 함수는 동작 background 속성을 개선하여 다양한 기기 특성에 맞는 여러 이미지 파일을 쉽게 제공할 수 있게 해줍니다. 이렇게 하면 브라우저에서 기기 특성에 따라 최적의 이미지를 선택할 수 있습니다(예: 2배 디스플레이에서 2배 이미지를 사용하거나 제한된 대역폭 네트워크에서 2배 기기에서 1배 이미지 사용).

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

브라우저는 올바른 이미지를 로드할 뿐만 아니라 그에 따라 이미지 크기를 조정합니다. 즉, 브라우저는 2x 이미지가 1x 이미지보다 2배 크다고 가정하고 2배 이미지를 2의 배수만큼 축소하여 이미지가 페이지에 같은 크기로 표시되도록 합니다.

image-set() 지원은 아직 새로운 기능이며 -webkit 공급업체 접두사가 있는 Chrome 및 Safari에서만 지원됩니다. image-set()가 지원되지 않는 경우를 위한 대체 이미지를 포함해야 합니다. 예를 들면 다음과 같습니다.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

사용해 보기

위에서는 image-set을 지원하는 브라우저에서 적절한 애셋을 로드하며, 그렇지 않으면 1x 애셋으로 대체합니다. image-set() 브라우저 지원 기능은 부족하지만 대부분의 브라우저에서 1x 애셋을 얻는다는 점에 주의해야 합니다.

미디어 쿼리를 사용하여 고해상도 이미지 또는 아트 디렉션 제공

미디어 쿼리는 기기 픽셀 비율에 기반하여 규칙을 만들 수 있으므로 2배 디스플레이와 1배 디스플레이에 서로 다른 이미지를 지정할 수 있습니다.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox, Opera는 모두 표준 (min-resolution: 2dppx)를 지원하는 반면, Safari와 Android 브라우저는 dppx 단위 없이 이전 공급업체 접두사 문법을 사용해야 합니다. 이러한 스타일은 기기가 미디어 쿼리와 일치하는 경우에만 로드되며 기본 사례의 스타일을 지정해야 합니다. 이렇게 하면 브라우저가 해상도별 미디어 쿼리를 지원하지 않는 경우 렌더링이 보장되는 이점도 있습니다.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

사용해 보기

min-width 문법을 사용하여 표시 영역 크기에 따라 대체 이미지를 표시할 수도 있습니다. 이 기법의 이점은 미디어 쿼리가 일치하지 않으면 이미지가 다운로드되지 않는다는 것입니다. 예를 들어 브라우저 너비가 500픽셀 이상인 경우에만 bg.png가 다운로드되어 body에 적용됩니다.

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

아이콘에 SVG 사용

페이지에 아이콘을 추가할 때 가능하면 SVG 아이콘을 사용하고 일부 경우에는 유니코드 문자를 사용합니다.

요약

아이콘에 래스터 이미지 대신 SVG 또는 유니코드를 사용합니다.

간단한 아이콘을 유니코드로 대체

많은 글꼴에서 이미지 대신 사용할 수 있는 수많은 유니코드 글리프를 지원합니다. 이미지와 달리 유니코드 글꼴은 화면에 표시되는 크기에 관계없이 원활하게 확장되고 보기 좋게 표시됩니다.

유니코드에는 일반적인 문자 집합 외에도 화살표 (←), 수학 연산자 (√), 기하학적 도형(★), 제어 그림 (▶), 음표 (♬), 그리스 문자 (Ω), 체스 말 (♞)의 기호가 포함될 수 있습니다.

유니코드 문자를 포함하는 작업은 이름이 지정된 항목 &#XXXX와 동일한 방식으로 이루어집니다. 여기서 XXXX는 유니코드 문자 번호를 나타냅니다. 예를 들면 다음과 같습니다.

You're a super &#9733;

최고 ★입니다

복잡한 아이콘을 SVG로 대체

아이콘 요구사항이 더 복잡한 경우 SVG 아이콘은 일반적으로 가볍고 사용하기 쉽고 CSS로 스타일을 지정할 수 있습니다. SVG에는 래스터 이미지에 비해 여러 가지 장점이 있습니다.

무한 확장이 가능한 벡터 그래픽입니다.
색상, 음영, 투명도, 애니메이션과 같은 CSS 효과는 간단합니다.
SVG 이미지는 문서에서 바로 인라인 처리될 수 있습니다.
의미가 있습니다.
적절한 속성을 사용하여 더 나은 접근성을 제공합니다.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

사용해 보기

아이콘 글꼴 사용 시 주의

아이콘 글꼴은 널리 사용되고 사용이 쉽지만 SVG 아이콘에 비해 몇 가지 단점이 있습니다.

이는 무한 확장이 가능한 벡터 그래픽이지만 앤티앨리어싱으로 인해 아이콘이 예상대로 선명하지 않을 수 있습니다.
CSS를 사용한 스타일 지정이 제한됩니다.
선 높이, 글자 간격 등에 따라 완벽한 픽셀 배치가 어려울 수 있습니다.
시맨틱이 아니며 스크린 리더 또는 기타 보조 기술과 함께 사용하기 어려울 수 있습니다.
범위가 잘못 지정되면 제공되는 아이콘의 일부만 사용하기 위해 파일 크기가 커질 수 있습니다.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

사용해 보기

Font Awesome, Pictos, Glyphicons를 비롯하여 수백 가지의 무료 및 유료 아이콘 글꼴이 제공됩니다.

추가 HTTP 요청 및 파일 크기의 가중치와 아이콘의 필요성 간에 균형을 이루어야 합니다. 예를 들어 아이콘이 몇 개만 필요한 경우 이미지나 이미지 스프라이트를 사용하는 것이 더 나을 수 있습니다.

성능 향상을 위한 이미지 최적화

대개 이미지는 다운로드되는 바이트의 대부분을 차지하며, 페이지에서 시각적 공간의 상당 부분을 차지하기도 합니다. 따라서 이미지를 최적화하면 바이트를 최대한 절약할 수 있고 웹사이트의 성능을 개선할 수 있는 경우가 많습니다. 브라우저에서 다운로드해야 하는 바이트가 줄어들고, 클라이언트의 대역폭 경쟁이 줄어들고, 브라우저가 모든 애셋을 더 빠르게 다운로드하고 표시할 수 있습니다.

요약

이미지 형식을 무작위로 선택하지 마세요. 사용 가능한 다양한 형식을 이해하고 가장 적합한 형식을 사용하세요.
파일 크기를 줄이려면 이미지 최적화 및 압축 도구를 워크플로에 포함합니다.
자주 사용하는 이미지를 이미지 스프라이트에 배치하여 http 요청 수를 줄입니다.
초기 페이지 로드 시간을 개선하고 초기 페이지 크기를 줄이려면 이미지가 뷰로 스크롤한 후에만 이미지를 로드하는 것이 좋습니다.

올바른 형식 선택하기

고려해야 할 두 가지 이미지 유형은 벡터 이미지와 래스터 이미지입니다. 래스터 이미지의 경우 올바른 압축 형식(예: GIF, PNG, JPG)도 선택해야 합니다.

사진 및 기타 이미지와 같은 래스터 이미지는 개별 점 또는 픽셀의 그리드로 표시됩니다. 래스터 이미지는 일반적으로 카메라 또는 스캐너에서 가져오거나 canvas 요소를 사용하여 브라우저에서 만들 수 있습니다. 이미지 크기가 커질수록 파일 크기도 커집니다. 원래 크기보다 더 크게 확장되면 래스터 이미지가 흐려집니다. 누락된 픽셀을 어떻게 채울지 브라우저가 추측해야 하기 때문입니다.

로고, 라인 아트와 같은 벡터 이미지는 곡선, 선, 도형, 채우기 색상으로 정의됩니다. 벡터 이미지는 Adobe Illustrator 또는 Inkscape와 같은 프로그램으로 생성되고 SVG와 같은 벡터 형식으로 저장됩니다. 벡터 이미지는 단순 프리미티브를 기반으로 하므로 품질 손실이나 파일 크기 변경 없이 크기를 조정할 수 있습니다.

적절한 형식을 선택할 때는 이미지 출처 (래스터 또는 벡터)와 콘텐츠 (색상, 애니메이션, 텍스트 등)를 모두 고려해야 합니다. 모든 이미지 유형에 맞는 하나의 형식은 없으며 각각 고유한 장단점이 있습니다.

적절한 형식을 선택할 때는 다음 가이드라인에 따라 시작하세요.

사진 이미지에는 JPG를 사용합니다.
벡터 아트 및 단색 그래픽(예: 로고, 라인 아트)에는 SVG를 사용합니다. 벡터 아트를 사용할 수 없는 경우 WebP 또는 PNG를 사용해 보세요.
GIF 대신 PNG를 사용하세요. 더 많은 색상을 허용하고 더 나은 압축 비율을 제공하기 때문입니다.
긴 애니메이션의 경우 <video>를 사용하는 것이 좋습니다. 이렇게 하면 이미지 품질이 향상되고 사용자가 재생을 제어할 수 있습니다.

파일 크기 줄이기

저장 후 이미지를 '후처리'하여 이미지 파일 크기를 크게 줄일 수 있습니다. 손실 및 무손실, 온라인, GUI, 명령줄 등 이미지 압축을 위한 다양한 도구가 있습니다. 가능하면 이미지 최적화를 자동화하여 워크플로에 기본 제공되도록 하는 것이 가장 좋습니다.

이미지 품질에 영향을 주지 않으면서 JPG 및 PNG 파일에 추가적인 무손실 압축을 실행하는 여러 도구를 사용할 수 있습니다. JPG의 경우 jpegtran 또는 jpegoptimize를 사용해 보세요 (Linux에서만 사용 가능하며 --strip-all 옵션으로 실행). PNG의 경우 OptiPNG 또는 PNGOUT을 사용해 보세요.

이미지 스프라이트 사용

CSS 스프라이트는 여러 이미지를 하나의 '스프라이트 시트' 이미지로 결합하는 기법입니다. 그런 다음 요소 (스프라이트 시트)의 배경 이미지와 올바른 부분을 표시하는 오프셋을 지정하여 개별 이미지를 사용할 수 있습니다.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

사용해 보기

스프라이트를 사용하면 여러 이미지를 가져오는 데 필요한 다운로드 수를 줄이면서도 캐싱을 사용 설정할 수 있는 이점이 있습니다.

지연 로드 고려

지연 로드를 사용하면 필요에 따라 또는 기본 콘텐츠의 로드와 렌더링이 완료될 때 페이지를 로드하여 스크롤해야 볼 수 있는 부분에 많은 이미지가 포함된 긴 페이지에서 로드 속도를 크게 높일 수 있습니다. 지연 로드를 사용하면 성능이 개선될 뿐만 아니라 무한 스크롤 환경을 만들 수 있습니다.

무한 스크롤 페이지를 만들 때는 주의해야 합니다. 콘텐츠가 표시될 때 로드되기 때문에 검색엔진에 콘텐츠가 전혀 표시되지 않을 수 있습니다. 또한 새 콘텐츠가 항상 로드되므로 바닥글에서 기대하는 정보를 찾는 사용자에게는 바닥글이 표시되지 않습니다.

이미지는 아예 사용하지 않습니다

때로는 실제로 이미지가 아닌 것이 최고의 이미지일 수 있습니다. 가능하면 브라우저의 기본 기능을 사용하여 동일하거나 유사한 기능을 제공하세요. 이전에는 이미지가 필요했을 수 있는 시각적 효과를 브라우저가 생성합니다. 즉, 브라우저에서 더 이상 별도의 이미지 파일을 다운로드할 필요가 없으므로 어색하게 조정된 이미지를 방지할 수 있습니다. 유니코드 또는 특수 아이콘 글꼴을 사용하여 아이콘을 렌더링할 수 있습니다.

이미지에 삽입하는 대신 마크업에 텍스트 삽입

가능한 경우 텍스트는 텍스트여야 하며 이미지에 삽입해서는 안 됩니다. 예를 들어 광고 제목에 이미지를 사용하거나 전화번호나 주소와 같은 연락처 정보를 이미지에 직접 배치하면 사용자가 정보를 복사하여 붙여넣을 수 없으며 스크린 리더가 정보에 액세스할 수 없으며 반응이 없습니다. 대신 텍스트를 마크업에 배치하고 필요한 경우 웹 글꼴을 사용하여 필요한 스타일을 얻으세요.

CSS를 사용하여 이미지 대체

최신 브라우저에서 CSS 기능을 사용하여 이전에는 이미지가 필요했던 스타일을 만들 수 있습니다. 예를 들어 복잡한 그라데이션은 background 속성을 사용하여 만들 수 있고 box-shadow를 사용하여 그림자를 만들 수 있으며 border-radius 속성을 사용하여 둥근 모서리를 추가할 수 있습니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Duis ornare fringilla dui non vehicula. Donec ipsum lectus, hendrerit malesuada sapien eget, venatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

이러한 기법을 사용하려면 렌더링 주기가 필요하며 모바일에서는 상당한 부담이 될 수 있다는 점에 유의하세요. 과도하게 사용하면 얻을 수 있는 이점이 사라지고 성능이 저하될 수 있습니다.

반응형 이미지

아트 디렉션

반응형 이미지

마크업의 이미지

요약

이미지에 상대적 크기 사용

높은 DPI 기기에서 srcset로 img를 개선합니다.

반응형 이미지에서 picture를 사용한 아트 디렉션

상대 크기의 이미지

반응형 이미지의 중단점 고려

제품 이미지를 확대 가능하게 만들기

기타 이미지 기법

압축 이미지

자바스크립트 이미지 대체

이미지 인라인 처리: 래스터 및 벡터

SVG

데이터 URI

CSS에서 인라인 처리

인라인 삽입의 장단점

CSS의 이미지

요약

조건부 이미지 로드 또는 아트 디렉션에 미디어 쿼리 사용

image-set을 사용하여 고해상도 이미지 제공

미디어 쿼리를 사용하여 고해상도 이미지 또는 아트 디렉션 제공

아이콘에 SVG 사용

요약

간단한 아이콘을 유니코드로 대체

복잡한 아이콘을 SVG로 대체

아이콘 글꼴 사용 시 주의

성능 향상을 위한 이미지 최적화

요약

올바른 형식 선택하기

파일 크기 줄이기

이미지 스프라이트 사용

지연 로드 고려

이미지는 아예 사용하지 않습니다

이미지에 삽입하는 대신 마크업에 텍스트 삽입

CSS를 사용하여 이미지 대체

높은 DPI 기기에서 `srcset`로 `img`를 개선합니다.

반응형 이미지에서 `picture`를 사용한 아트 디렉션