사진 한 장은 1,000단어의 가치가 있으며, 이미지는 모든 페이지에서 중요한 역할을 합니다. 그러나 또한 다운로드되는 바이트의 대부분을 차지하기도 합니다. 반응형 웹 디자인을 사용하면 기기 특성에 따라 레이아웃을 변경할 뿐만 아니라 이미지도 변경할 수 있습니다.
반응형 웹 디자인을 사용하면 기기에 따라 레이아웃을 변경할 뿐만 아니라 콘텐츠도 변할 수 있습니다. 예를 들어, 해상도 (2x) 디스플레이, 고해상도 그래픽이 선명도를 보장합니다. 이미지 50% 너비의 광고는 브라우저의 너비가 800픽셀일 때는 잘 작동할 수 있지만 좁은 휴대폰에 공간이 너무 많고 동일한 대역폭 오버헤드가 필요합니다. 작은 화면에 맞게 축소되었을 때
아트 디렉션
어떤 경우에는 이미지를 대폭 변경해야 할 수도 있습니다. 즉, 비율을 조정하고, 자르고, 심지어 바꿀 수도 있습니다. 이 경우 일반적으로 아트 디렉션이라고 합니다. 자세한 내용은 자세한 내용은 responsiveimages.org/demos/를 참고하세요. 예로 들 수 있습니다
반응형 이미지
이미지가 웹페이지를 로드하는 데 필요한 평균 바이트의 60% 이상을 차지한다는 사실을 알고 계셨나요?
이 과정에서는 최신 웹에서 이미지로 작업하는 방법을 배우므로 이미지를 멋지게 표시하고 모든 기기에서 빠르게 로드할 수 있습니다.
그 과정에서 원활하고 순조롭게 진행하는 데 도움이 되는 다양한 스킬과 기법을 익혀 반응형 이미지를 개발 워크플로에 통합할 수 있습니다. 종료일 이미지에 적응하고 반응하는 이미지를 사용하여 다양한 표시 영역 크기를 지원합니다.
Udacity를 통해 무료로 제공되는 과정입니다.
마크업의 이미지
img 요소는 강력합니다. 다운로드, 디코딩, 렌더링합니다.
최신 브라우저는 다양한 이미지 형식을 지원합니다. 포함
다양한 기기에서 작동하는 이미지는 데스크톱과 다르지 않으며
약간의 조정이 필요합니다.
요약
- 이미지에 상대 크기를 사용하여 실수로 이미지가 오버플로되는 것을 방지 kube-APIserver입니다
- 이미지에 따라 다른 이미지를 지정하려면
picture요소를 사용합니다. 기기 특성에 따라 적용됩니다 (아트 디렉션이라고도 함). img요소에서srcset및x설명어를 사용하여 다양한 밀도를 선택할 때 사용할 최적의 이미지를 결정하게 됩니다.- 페이지에 이미지가 하나 또는 두 개만 있고 이 이미지가 다른 곳에서 사용되지 않는다면 인라인 이미지를 사용하여 파일 요청을 줄여 보세요.
이미지에 상대 크기 사용
이미지의 너비를 지정할 때 상대 단위를 사용하면
표시 영역 밖으로 넘치지 않도록 할 수 있습니다. 예를 들어 width: 50%;은
이미지 너비는 포함하는 요소의 50%(뷰포트의 50% 또는
50%).
CSS는 콘텐츠가 컨테이너를 오버플로하도록 허용하므로 최대 너비: 100% 로 설정하면 이미지와 기타 콘텐츠가 오버플로되는 것을 방지할 수 있습니다. 예를 들면 다음과 같습니다.
img, embed, object, video {
max-width: 100%;
}
img의 alt 속성을 통해 의미 있는 설명을 제공하세요.
요소 이렇게 하면 화면에 문맥을 제공하여
사이트의 접근성을 높일 수 있습니다
읽기 및 기타 보조 테크가 포함됩니다.
높은 DPI 기기의 경우 srcset를 사용하여 img를 개선합니다.
srcset 속성은
여러 이미지 파일을 쉽게 제공할 수 있게 해주는 img 요소
다양한 기기 특성에 맞게
맞춤설정할 수 있습니다 image-set과(와) 유사함
CSS 함수
srcset를 사용하면 브라우저에서 최적의 이미지를
이미지(예:
2x 디스플레이에는 2x 이미지를, 향후에는 1x 이미지를
대역폭이 제한된 네트워크에 있을 때는 2배의 기기를 사용하는 것입니다.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
srcset를 지원하지 않는 브라우저에서는 단순히
src 속성으로 지정된 이미지 파일입니다. 그렇기 때문에
기기에 관계없이 모든 기기에서 표시할 수 있는 1x 이미지를
기능을 제공합니다 srcset가 지원되는 경우 쉼표로 구분된 목록
이미지/조건은 요청하기 전에 파싱되며 가장 좋은 이미지/조건만 파싱됩니다.
적절한 이미지가 다운로드되어 표시됩니다.
조건에는 픽셀 밀도, 너비 및 현재 픽셀 밀도만 잘 지원됩니다. 현재 균형을 맞추기 위해 2배의 이미지를 제공하는 것만으로도 속성
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가 사용됩니다. 만약
브라우저가 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배 |
| 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 속성은 여러 미디어 쿼리를 사용하여
이미지의 크기를 지정합니다. 브라우저 너비가
600px인 경우 이미지는 표시 영역 너비의 25% 입니다. 500픽셀 사이일 때
600px인 경우 이미지는 표시 영역 너비의 50% 입니다. 500px 미만이면
전체 너비입니다.
제품 이미지를 확대 가능하게 만들기
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">고객은 자신이 구매하는 제품을 확인하고 싶어 합니다. 소매 사이트에서 사용자는 제품의 고해상도 클로즈업 이미지를 통해 세부정보와 연구 참여자 좌절감을 느낍니다.
탭할 수 있는 확장형 이미지의 좋은 예는 J. Crew 사이트. 사라지는 오버레이는 이미지를 탭할 수 있음을 나타내며 확대/축소된 세밀한 이미지가 포함된 이미지
기타 이미지 기법
압축 이미지
이 압축 이미지 기법 실제 해상도에 관계없이 모든 장치에 고도로 압축된 2배 이미지를 기기의 성능입니다. 이미지 유형과 이미지 수준에 따라 이미지 품질에는 변화가 없는 것처럼 보일 수 있지만 파일 크기가 줄어듭니다. 크게 향상되었습니다.
JavaScript 이미지 대체
자바스크립트 이미지 대체는 기기의 성능을 확인하고 '
생각해야 합니다. 다음을 통해 기기 픽셀 비율을 확인할 수 있습니다.
window.devicePixelRatio, 화면 너비와 높이를 가져오고
navigator.connection를 통한 일부 네트워크 연결 스니핑 또는 가짜
합니다. 이 모든 정보를 수집한 후에는 어떤 정보를 공유할지 결정할 수 있습니다.
있습니다.
이 접근 방식의 한 가지 큰 단점은 JavaScript를 사용하면
적어도 미리보기 파서가 완료될 때까지 이미지 로드를 지연시킵니다. 이
즉, pageload 이벤트 이후까지 이미지 다운로드조차 시작되지 않습니다.
발생할 수 있습니다. 또한 브라우저에서는 대부분의 경우 1x와 2x를 모두 다운로드합니다.
이로 인해 페이지 용량이 증가하게 되었습니다.
이미지 인라인 처리: 래스터 및 벡터
이미지를 만들고 저장하는 데는 근본적으로 다른 두 가지 방법이 있습니다. 이는 반응형 이미지를 배포하는 방식에 영향을 미칩니다.
사진 및 기타 이미지와 같은 래스터 이미지는 색상의 개별 점 그리드로 표현됩니다. 래스터 이미지가 포함될 수 있음 HTML 캔버스 요소로 만들어질 수 있습니다. 형식 래스터 이미지를 저장하는 데 사용됩니다.
로고, 라인아트 등의 벡터 이미지는 곡선, 선, 도형, 채우기 색상, 그라데이션입니다. 벡터 이미지를 만들 수 있습니다. 코드를 직접 작성하거나 Adobe Illustrator 또는 Inkscape와 같은 프로그램에서 벡터 형식으로 변환해야 합니다.
SVG
SVG를 사용하면 웹페이지에 반응형 벡터 그래픽을 포함할 수 있습니다. 이 래스터 파일 형식에 비해 벡터 파일 형식의 장점은 브라우저가 벡터 이미지를 원하는 크기로 렌더링할 수 있습니다. 벡터 형식은 즉, 선, 곡선, 색상 등으로 구성된 이미지의 구조입니다. 반면 래스터 형식에는 개별 점에 대한 정보만 있습니다. 따라서 브라우저가 배율을 조정할 때 공백을 어떻게 채울지 추측해야 합니다.
다음은 동일한 이미지의 두 가지 버전입니다. 왼쪽은 PNG 이미지이고 다른 하나는 SVG입니다. 있습니다. SVG는 모든 크기에서 멋지게 보이지만 옆에 있는 PNG는 흐릿하게 보입니다.
페이지에서 보내는 파일 요청 수를 줄이려면 SVG 또는 데이터 URI 형식을 사용하여 이미지를 인라인으로 표시할 수 있습니다. 이 페이지의 소스를 보면 데이터 URI와 SVG라는 두 가지 로고가 모두 인라인으로 선언되어 있는 것을 확인할 수 있습니다.
SVG는 모바일 및 데스크톱에서 훌륭하게 지원됩니다. 최적화 도구를 사용하면 SVG 크기를 크게 줄일 수 있습니다. 다음 두 인라인 SVG 로고는 같지만 하나는 약 3KB이고 다른 하나는 2KB입니다.
데이터 URI
데이터 URI는
base64 인코딩 문자열로 표시된 img 요소의 src
다음 형식을 따릅니다.
<img src="data:image/svg+xml;base64,[data]">
위 HTML5 로고 코드의 시작 부분은 다음과 같습니다.
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(정식 버전의 길이는 5000자가 넘습니다.)
'n' 드래그 드래그 앤 드롭 도구로 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는 캐시할 수 없으므로 사용되는 모든 페이지에 대해 다운로드해야 합니다.
- IE 6 및 7에서는 지원되지 않으며 IE8에서는 지원이 불완전합니다.
- HTTP/2에서는 애셋 요청 수를 줄이는 것이 덜 중요합니다.
모든 반응형과 마찬가지로 무엇이 가장 잘 작동하는지 테스트해야 합니다. 개발자 사용 다운로드 파일 크기, 요청 수 및 총 다운로드 수를 측정할 수 있는 지연 시간을 최소화합니다 데이터 URI는 때때로 래스터 이미지에 유용할 수 있습니다(예: 다른 곳에서 사용되지 않은 사진이 한두 장만 있는 홈페이지에 적합합니다. 만약 SVG가 훨씬 더 나은 옵션입니다.
CSS의 이미지
CSS background 속성은 복잡한 이미지를 추가하는 강력한 도구입니다.
쉽게 여러 이미지를 추가하고 반복하도록 할 수 있습니다.
기타 등등 백그라운드 속성이 미디어 쿼리와 결합되면
한층 강력해져 화면 기반의 조건부 이미지 로딩이 가능함
해상도, 표시 영역 크기 등을 변경할 수 있습니다.
요약
- 디스플레이 특성에 가장 적합한 이미지를 사용하고 화면을 고려합니다. 크기, 기기 해상도, 페이지 레이아웃 등이 있습니다.
- 다음을 사용하여 높은 DPI 디스플레이의 경우 CSS에서
background-image속성을 변경합니다.min-resolution및-webkit-min-device-pixel-ratio가 포함된 미디어 쿼리 - srcset를 사용하여 1x 이미지 외에도 고해상도 이미지를 마크업
- 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);
}
}
이미지 세트를 사용하여 고해상도 이미지 제공
CSS의 image-set() 함수는 background 속성을 개선합니다.
다양한 기기에 여러 이미지 파일을 쉽게 제공할 수 있음
특성에 따라 다릅니다 이렇게 하면 브라우저에 따라
장치의 특성(예: 2배 디스플레이에 2배 이미지 사용)
또는 2배속 기기에서 1x 이미지를 전송하는 것입니다.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
브라우저는 올바른 이미지를 로드할 뿐만 아니라 변경할 수 있습니다 다시 말해, 브라우저는 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를 지원하는 브라우저에서 적절한 애셋을 로드합니다.
그렇지 않으면 1배 애셋으로 대체됩니다. 명백한 주의 사항은
image-set() 브라우저 지원이 낮으므로 대부분의 브라우저에서 1x 애셋을 받습니다.
미디어 쿼리를 사용하여 고해상도 이미지 또는 아트 디렉션 제공
미디어 쿼리는 기기 픽셀 비율 2x 및 1x 디스플레이에 서로 다른 이미지를 지정할 수 있습니다.
@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 구문을 사용하여
지정할 수 있습니다. 이 기법의 장점은 이미지가 일반적인
일치하지 않으면 다운로드되지 않습니다. 예를 들어 bg.png는
브라우저 너비가 500픽셀 이상인 경우 body에 다운로드되어 적용됩니다.
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
아이콘에 SVG 사용
페이지에 아이콘을 추가할 때 가능하면 SVG 아이콘을 사용하거나 유니코드 문자를 지원합니다.
요약
- 래스터 이미지 대신 SVG 또는 유니코드를 아이콘에 사용합니다.
간단한 아이콘을 유니코드로 대체
많은 글꼴에는 무수한 유니코드 글리프가 지원되므로 이미지 대신 이미지와 달리 유니코드 글꼴은 확장성이 뛰어나고 보기에도 좋습니다. 크든 작든 화면에 표시되는 것이 중요합니다.
유니코드는 일반적인 문자 집합 외에 화살표 (←), 수학 연산자 (√), 기하학적 도형 (★), 제어 영상 (▶), 음표 (♬), 그리스 문자 (Ω), 체스 말 (♞)
유니코드 문자 포함은 이름이 지정된 항목이 다음과 같은 방식으로 수행됩니다.
&#XXXX, 여기서 XXXX는 유니코드 문자 번호를 나타냅니다. 예를 들면 다음과 같습니다.
You're a super ★
최고 ★
복잡한 아이콘을 SVG로 대체
아이콘 요구사항이 더 복잡한 경우에는 SVG 아이콘이 일반적으로 가벼우며 CSS로 스타일을 지정할 수 있습니다. SVG는 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">.
아이콘 글꼴 사용 시 주의
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">아이콘 글꼴은 널리 사용되고 사용이 쉽지만 몇 가지 단점이 있습니다. SVG 아이콘과 비교:
- 무한 확장이 가능한 벡터 그래픽이지만 이로 인해 아이콘이 예상보다 선명하지 않게 됩니다.
- CSS를 사용한 스타일 지정이 제한됩니다.
- 선 높이에 따라 완벽한 픽셀 포지셔닝이 어려울 수 있습니다. 문자 간격 등
- 문맥적이 아니며 스크린 리더나 기타 보조 테크놀로지에 대해 이야기했습니다.
- 범위를 적절하게 지정하지 않으면 사용할 수 있는 아이콘의 작은 하위 집합입니다.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
글꼴을 비롯하여 수백 가지의 무료 및 유료 아이콘 글꼴이 좋습니다. Pictos, Glyphicons
추가 HTTP 요청 및 파일 크기의 가중치와 아이콘의 필요성입니다. 예를 들어 몇 개의 아이콘만 필요한 경우 이미지나 이미지 스프라이트를 사용하는 것이 더 나을 수 있습니다.
성능을 위해 이미지 최적화
이미지는 다운로드되는 바이트의 대부분을 차지하며 상당량의 시각적 공간을 차지할 수 있습니다. 그 결과 이미지를 사용하면 바이트를 가장 크게 절약하고 성능을 향상시키는 경우가 많기 때문에 브라우저에서 다운로드해야 하는 바이트가 적을수록 클라이언트의 대역폭에 대한 경쟁이 적을수록 브라우저에서 모든 애셋을 다운로드하고 표시할 수 있습니다.
요약
- 이미지 형식을 무작위로 선택하지 마세요. 가장 적합한 형식을 사용합니다.
- 이미지 최적화 및 압축 도구를 워크플로에 포함하여 지정할 수 있습니다.
- 자주 사용되는 이미지를 이미지 스프라이트가 있습니다.
- 초기 페이지 로드 시간을 개선하고 초기 페이지 크기를 줄이려면 이미지가 뷰로 스크롤한 후에만 로드하는 것이 좋습니다.
올바른 형식 선택
다음 두 가지 이미지 유형을 고려해야 합니다.
벡터 이미지
및 래스터 이미지가 있습니다.
래스터 이미지의 경우 올바른 압축 형식도 선택해야 합니다.
예: GIF, PNG, JPG
사진 및 기타 이미지와 같은 래스터 이미지는 그리드로 표시됩니다.
개별 점 또는 픽셀로 표현됩니다. 래스터 이미지는 일반적으로 카메라나
스캐너를 사용하거나 브라우저에서 canvas 요소를 사용하여 만들 수 있습니다. 이
이미지 크기가 커질수록 파일 크기도 커집니다. 실제 크기보다 크게 조정된 경우
래스터 이미지는 흐려질 수 있습니다.
채우는 방법을 배웠습니다.
로고, 라인 아트 등의 벡터 이미지는 일련의 곡선으로 정의되며,
채우기 색상입니다. 벡터 이미지는
또는 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. 펠렌테스크 좌석 amet augue eu magna scelerisque porta ut dolor. 널람 플레이스랏 에게스타스 nisl sed sollicitudin입니다. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. 두이 오네르 fringilla dui non vehicula. 도네츠 ipsum lectus, hendrerit malesuada sapien eget, venenatis 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>
이러한 기법을 사용하려면 렌더링 주기가 필요하다는 점에 유의하세요. 모바일에서 상당한 영향을 미칠 수 있습니다. 과도하게 사용할 경우 얻을 수 있는 이점을 모두 잃게 됩니다. 실적이 저하될 수 있습니다