티스토리 뷰
HTML / 요소 - 멀티미디어 - IMG, src, alt, width, height, srcset, sizes
Programmers 2021. 6. 3. 17:25IMG
<img />: 이미지를 삽입
IMG 속성
src: 필수, 이미지 url
alt: 필수, 이미지가 안 들어왔을 때 대체 텍스트
width: 이미지의 가로나비
height: 이미지의 세로 너비
※width, height는 크기를 조절하는 용도라면 둘 중 하나만 입력하는 것이 바람직하다.
width, height 예제 1
<body>
<img width="333" src="images/heropy.png" alt="HEROPY">
</body>
px로 사이즈를 지정하지 않았다. 숫자만 넣었다.
width, height 예제 2
- index.html
<body>
<img src="images/heropy.png" alt="HEROPY">
</body>
- main.css
img {
width: 666px;
}
css를 이용해서도 이미지의 사이즈를 조절할 수 있다.
srcset: 브라우저에게 제시할 이미지 url과 원본 크기의 목록을 정의
값 w, x
sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의
srcset="경로 실제가 로너 비,
경로 실제가 로너 비,
경로 실제가 로너 비, "
sizes="(미디어 조건: 실제) 조건이 해당될 때 실제 최적화된 실제 이미지 사이즈,
(미디어 조건: 실제) 조건이 해당될 때 실제 최적화된 실제 이미지 사이즈,
(미디어 조건: 실제) 조건이 해당될 때 실제 최적화된 실제 이미지 사이즈"
sizes(최적화된 조건) → 출력될 이미지의 목록(후보)
☞ srcset, sizes는 반응형 웹사이트를 제작할 때 사용된다.
반응형 이미지 처리를 위해서는 많은 환경을 고려해야 하는데, 여기서 srcset과 sizes를 사용하면 대부분의 환경설정들을 브라우저에게 떠 넘길 수 있다.
https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/
HTML IMG의 srcset과 sizes 속성(updated)
HTML IMG의 srcset과 sizes를 통해 반응형 이미지를 제공하는 방법에 대해서 알아봅시다!
heropy.blog
<img
srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
sizes="(max-width: 500px) 444px,
(max-width: 800px) 777px,
1222px"
src="images/heropy.png"
alt="HEROPY" />srcset과 sizes가 사용되면 src와 alt는 적용되지 않는다. srcset이 사용될 수 없는 환경에서는 src가 사용된다.
srcset속성
srcset 브라우저에 제시할 이미지들과 그 이미지들의 원본 크기를 지정
사용할 이미지 사이즈별 2장 이상, px 아닌 w, x단위, 작은 크기 이미지부터 입력(위에서 아래로)
w단위: 원본크기(가로나비)를 의미
<body>
<img srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
src="images/heropy.png" alt="HEROPY" />
</body>웹의 크기를 조절하면 적절한 이미지를 웹이 알아서 출력시킨다.
css에서도 구현할 수 있지만 간략하게 반응형을 사용할 수 있다.
나머지 예제들은 https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/ 에서 확인하자.
x단위: 이미지의 비율 의도를 의미한다.
<img
srcset="images/heropy_small.png 1x,
images/heropy_medium.png 1.75x,
images/heropy_large.png 2.5x"
src="images/heropy.png"
alt="HEROPY" />그냥 예제이지만, x보다는 w단위를 사용하면 된다.
sizes속성
미디어 조건과 그 조건에 해당하는 이미지의 최적화 출력 크기를 지정
<img
srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
sizes="(min-width: 1000px) 700px"
src="images/heropy.png"
alt="HEROPY" />
sizes="(min-width: 1000px) 700px"☞ 1000px 이상일 때 최적화 700px를 출력한다.
sizes는 최적화 출력, 출력 크기+최적 크기도 함께 지정한다는 개념☞ size="500px"에서는 700이 가장 적절하기 때문에 700을 줄이는 방법을 사용
width는 일반 출력 크기, 출력 크기만 지정 ☞ width="500px" 출력 크기는 500px로 고정하고 400, 700, 1000을 모두 사용
'HTML CSS JS' 카테고리의 다른 글
| CSS) css 외부 참조 (0) | 2021.07.28 |
|---|---|
| HTML / 요소 - 멀티미디어 - AUDIO, VIDEO, FIGURE, FIGCAPTION, IFRAME, CANVAS, SCRIPT, NOSCRIPT (0) | 2021.06.07 |
| HTML / 요소 - 인라인 텍스트 - DFN, CITE, Q, U, CODE, KBD, SUP, SUB, TIME, SPAN, BR, DEL, INS (0) | 2021.06.03 |
| HTML / 요소 - 인라인 텍스트 - ABBR (1) | 2021.06.03 |
| HTML / 요소 - 인라인 텍스트 - A (1) | 2021.06.03 |