HTML / img / 이미지 삽입하는 태그
img
img
는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다.
src
: 이미지의 경로alt
: 이미지를 표시할 수 없을 때 출력할 내용width
: 이미지의 가로 크기height
: 이미지의 세로 크기loading
: 이미지 로딩 방식
예제 1
width
,height
속성을 정하지 않으면 이미지 원본 크기 그대로 나온다.- 만약 지정한 경로에 이미지가 없다면
alt
속성에 있는 값이 출력된다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <img src="images/200x200.png" alt="My Image"> <img src="images/200x200_.png" alt="My Image"> </body> </html>
alt
속성이 없는 것을 검색 엔진이 싫어한다. 따라서 alt=""
라도 넣어주는 것이 좋다.
예제 2
width
속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율에 맞게 정해진다.height
속성으로 세로 크기만 정하면 가로 크기는 원본의 가로 세로 비율에 맞게 정해진다.- 가로 크기와 세로 크기를 동시에 정하면 원본의 가로 세로 비율과 상관없이 설정한 크기로 나온다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <img src="images/200x200.png" alt="My Image"> <img src="images/200x200.png" alt="My Image" width="100"> <img src="images/200x200.png" alt="My Image" height="150"> <img src="images/200x200.png" alt="My Image" width="100" height="200"> </body> </html>
예제 3
loading
속성을 이용하여 이미지를 불러오는 방식을 정할 수 있다.- 기본값은
eager
로, 모든 이미지를 불러온다. lazy
로 설정하면 이미지가 뷰포트의 일정 거리 안으로 들어오면 불러온다. 불필요한 이미지 로딩을 줄여서 페이지 속도를 증가시킬 수 있다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Lazy Loading</title> <style> body { font-family: Consolas, sans-serif; } h1 { margin: 30px 0px; text-align: center; } img { max-width: 100%; display: block; margin: 0px 0px 500px 0px; } </style> </head> <body> <div class="a"> <h1>Lazy Loding</h1> </div> <div class="b"> <img src="images/img-01.jpg" alt="" loading="lazy"> <img src="images/img-02.jpg" alt="" loading="lazy"> <img src="images/img-03.jpg" alt="" loading="lazy"> <img src="images/img-04.jpg" alt="" loading="lazy"> <img src="images/img-05.jpg" alt="" loading="lazy"> <img src="images/img-06.jpg" alt="" loading="lazy"> <img src="images/img-07.jpg" alt="" loading="lazy"> <img src="images/img-08.jpg" alt="" loading="lazy"> <img src="images/img-09.jpg" alt="" loading="lazy"> <img src="images/img-10.jpg" alt="" loading="lazy"> <img src="images/img-11.jpg" alt="" loading="lazy"> <img src="images/img-12.jpg" alt="" loading="lazy"> <img src="images/img-13.jpg" alt="" loading="lazy"> <img src="images/img-14.jpg" alt="" loading="lazy"> <img src="images/img-15.jpg" alt="" loading="lazy"> <img src="images/img-16.jpg" alt="" loading="lazy"> <img src="images/img-17.jpg" alt="" loading="lazy"> <img src="images/img-18.jpg" alt="" loading="lazy"> <img src="images/img-19.jpg" alt="" loading="lazy"> <img src="images/img-20.jpg" alt="" loading="lazy"> </div> </body> </html>
loading
의 값을lazy
로 정하면 모든 이미지를 로드하지 않고 일부만 불러온다.
- 스크롤하여 밑으로 내려가면 이미지를 하나씩 불러온다.
모든 브라우저가 loading 속성을 지원하는 것은 아니다. 특히 IE가 문제인데, IE에서도 이 효과를 내고 싶다면 Lozad.js 등 스크립트를 이용한다.