반응형 이미지

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

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

아트 디렉션

아트 디렉션의 예

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

반응형 이미지

Udacity 과정 스크린샷

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

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

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

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

과정 수강

마크업의 이미지

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

요약

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

이미지에 상대 크기 사용

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

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

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

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

srcset로 DPI가 높은 기기에서 img를 개선하세요.

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

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

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

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

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

아트 디렉션의 예

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

이미지 소스가 여러 밀도로 있거나 반응형 디자인에 따라 일부 유형의 화면에서 이미지가 다소 다른 경우 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>

사용해 보기

위의 예에서 브라우저 너비가 800픽셀 이상이면 기기 해상도에 따라 head.jpg 또는 head-2x.jpg가 사용됩니다. 브라우저가 450~800픽셀 사이인 경우 기기 해상도에 따라 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배
600픽셀 2 800.jpg 2.67배
640픽셀 3 1000.jpg 3.125배
1100픽셀 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 속성은 여러 미디어 쿼리를 사용하여 이미지의 크기를 지정합니다. 브라우저 너비가 600픽셀보다 크면 이미지는 표시 영역 너비의 25% 가 되고, 500~600픽셀 사이인 경우 이미지는 표시 영역 너비의 50% 이고 500픽셀 미만이면 전체 너비입니다.

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

J. 확장형 제품 이미지가 있는 Crews 웹사이트
J. 확장형 제품 이미지가 있는 Crew의 웹사이트

고객은 자신이 구매하는 것을 알고 싶어 합니다. 소매 사이트에서 사용자는 제품을 고해상도 클로즈업하여 자세히 볼 수 있기를 기대하지만, 연구 참여자는 이렇게 하지 못하면 실망스러워했습니다.

탭할 수 있는 확장형 이미지의 좋은 예는 J. Crew 사이트. 오버레이가 사라지는 것은 이미지를 탭할 수 있음을 나타내며, 섬세한 디테일이 보이는 확대된 이미지를 제공합니다.

기타 이미지 기법

압축 이미지

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

사용해 보기

JavaScript 이미지 대체

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

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

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

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

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

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

SVG

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

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

HTML5 로고, PNG 형식
HTML5 로고, SVG 형식

페이지에서 수행하는 파일 요청 수를 줄이려면 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, JavaScript를 포함한 전체 웹페이지를 검색할 수 있습니다.

단점:

  • 모바일에서 데이터 URI는 외부 src의 이미지보다 모바일에 표시되는 속도가 훨씬 느릴 수 있습니다.
  • 데이터 URI는 HTML 요청의 크기를 상당히 늘릴 수 있습니다.
  • 마크업과 워크플로가 복잡해집니다.
  • 데이터 URI 형식은 바이너리보다 훨씬 크기 (최대 30%)이므로 총 다운로드 크기가 줄어들지 않습니다.
  • 데이터 URI는 캐시될 수 없으므로, 데이터 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 속성을 향상시켜 다양한 기기 특성에 맞는 여러 이미지 파일을 쉽게 제공할 수 있습니다. 이렇게 하면 브라우저가 기기 특성에 따라 최적의 이미지를 선택할 수 있습니다(예: 2x 디스플레이에서 2x 이미지를 사용하거나 제한된 대역폭 네트워크에서 2x 기기에서 1x 이미지 사용).

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

브라우저는 정확한 이미지를 로드할 뿐만 아니라 이에 따라 이미지 크기를 조정합니다. 즉, 브라우저는 2x 이미지가 1x 이미지보다 2배 더 크다고 가정하므로 이미지가 페이지에 같은 크기로 표시되도록 2x 이미지의 배율을 2의 배로 줄입니다.

image-set() 지원은 아직 새로운 기능이며 Chrome 및 Safari에서만 지원되며 이때 -webkit 공급업체 접두사를 사용합니다. 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">.

사용해 보기

아이콘 글꼴 사용 시 주의

글꼴 아이콘에 FontAwesome을 사용하는 페이지의 예
글꼴 아이콘에 FontAwesome을 사용하는 페이지의 예

아이콘 글꼴은 널리 사용되고 사용이 쉽지만 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, 명령줄 등 이미지 압축을 위한 여러 가지 도구가 있습니다. 가능한 경우 이미지 최적화를 자동화하여 워크플로에 기본적으로 제공하는 것이 가장 좋습니다.

이미지 품질에 영향을 미치지 않고 JPGPNG 파일에서 추가 무손실 압축을 실행하는 여러 도구를 사용할 수 있습니다. JPG의 경우 jpegtran 또는 jpegoptim을 사용해 보세요 (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>

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