HTML에서 이미지 크기란 이미지의 높이(height)와 너비(width)를 의미합니다. 이 두 값은 <img> 요소의 HTML 속성으로 지정하며, 웹 페이지의 로딩 성능과 레이아웃 안정성에 직접적인 영향을 미칩니다. 이 글에서는 HTML에서 이미지 크기를 설정하는 방법을 예시 코드와 함께 자세히 살펴보겠습니다.
기본 문법
<img> 태그에 width와 height 속성을 설정하는 기본 문법은 다음과 같습니다.
<img src="<이미지 경로>" alt="<대체 텍스트>" height="<픽셀 값>" width="<픽셀 값>" />
속성 적용 전후를 비교할 수 있는 실제 코드 예시입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>HTML 이미지 크기</h1> <h2>속성 없이 사용한 경우</h2> <img src="https://placekitten.com/500/500" /> <h2>속성을 지정한 경우</h2> <img src="https://placekitten.com/500/500" width="300" height="300" /> <script src="script.js"></script> </body> </html>
<img> 요소의 height와 width 값은 따옴표 안에 픽셀(px) 단위의 숫자로 작성합니다. 위 예시에서 원본 이미지는 500×500px이지만, width와 height 속성을 300으로 지정해 화면에는 더 작게 표시됩니다.
왜 width와 height를 함께 지정해야 할까?
height와 width 속성을 모두 함께 명시하는 것이 좋습니다. 그 이유는 브라우저가 페이지를 렌더링하기 전에 이미지가 차지할 공간을 미리 확보할 수 있기 때문입니다. 반대로 이미지 크기를 지정하지 않으면, 이미지가 로드되는 순간 주변 콘텐츠가 위아래로 밀리는 레이아웃 시프트(layout shift) 현상이 발생합니다. 이는 사용자 경험을 해칠 뿐만 아니라, 구글의 핵심 웹 바이탈(Core Web Vitals) 중 하나인 CLS(누적 레이아웃 변경) 점수에도 부정적인 영향을 주어 SEO에도 좋지 않습니다.
브라우저 호환성
<img> 요소의 width와 height 속성은 Chrome, Safari, Firefox, Edge 등 모든 주요 웹 브라우저에서 완벽하게 지원되므로, 호환성 걱정 없이 안심하고 사용할 수 있습니다.