이미지 태그에 width와 height를 명시하는 이유
웹 페이지를 만들 때 가장 흔히 사용하는 태그 중 하나가 바로 <img>입니다.
하지만 이미지를 삽입할 때 src만 지정하고, 크기 정보는 생략하는 경우를 여전히 자주 볼 수 있습니다.
이렇게 하면 페이지 로딩 중 레이아웃이 흔들리거나, 사용자 경험과 성능 지표에 부정적인 영향을 줄 수 있습니다.
이번 포스팅에서는 <img> 태그에 width와 height를 명시하는 것이 왜 중요한지, 그리고 어떤 실질적인 이점을 제공하는지 기술적인 관점에서 살펴보겠습니다.
1. 렌더링 성능과 페이지 로딩 속도
1-1. 레이아웃 안정성(Stable Layout) 확보
브라우저는 HTML을 파싱하면서 가능한 한 빠르게 화면을 렌더링합니다. 이때 이미지의 크기를 알 수 없다면, 브라우저는 해당 요소가 차지할 공간을 미리 계산할 수 없습니다.
그 결과, 이미지가 로드되는 순간 기존 콘텐츠를 밀어내며 사용자가 의도하지 않은 레이아웃 시프트(Layout Shift) 가 발생합니다.
<img src="photo.jpg">
위와 같은 경우, 이미지가 로드되기 전에는 높이가 없는 요소로 취급되고 이미지가 로드된 이후에야 실제 높이가 반영되면서 화면이 재배치됩니다.
1-2. Cumulative Layout Shift (CLS) 감소
CLS는 Google Core Web Vitals 중 하나로, 페이지 로딩 중 발생하는 예기치 않은 레이아웃 이동을 수치화한 지표입니다.
이미지에 width와 height를 지정하면 브라우저는
이미지가 로드되기 전에도 정확한 종횡비(aspect ratio) 를 계산하여
필요한 공간을 미리 확보할 수 있습니다.
CLS 기준
- CLS ≤ 0.1 : 좋음
- CLS ≥ 0.25 : 개선 필요
이미지 크기 명시는 CLS를 줄이는 가장 간단하면서도 효과적인 방법 중 하나입니다.
1-3. 네트워크 대역폭에 대한 정확한 이해
여기서 한 가지 오해하기 쉬운 부분이 있습니다.
width와 height를 지정한다고 해서
다운로드되는 이미지 파일의 용량이 줄어들지는 않습니다.
- 브라우저는 여전히 원본 이미지를 그대로 다운로드합니다.
width/height속성은 레이아웃 계산을 위한 정보입니다.
실제 네트워크 대역폭 절약은 다음과 같은 방식으로 이루어집니다.
srcset/sizes사용- 서버 측 이미지 리사이징
<picture>요소 활용
다만, 이미지 크기를 명시하면 렌더링 과정이 안정화되어 사용자가 체감하는 로딩 성능과 시각적 완성도가 크게 개선됩니다.
2. 접근성(Accessibility) 측면에서의 장점
2-1. 예측 가능한 읽기 흐름
접근성의 핵심은 alt 속성이지만,
레이아웃의 안정성 또한 보조적인 역할을 합니다.
이미지 크기가 명확하면 페이지 구조가 예측 가능해지고, 스크린 리더 사용 시에도 콘텐츠 흐름이 갑작스럽게 변경되지 않아 사용자 경험이 더 안정적입니다.
width와height자체가 접근성의 필수 요소는 아니지만, 레이아웃 안정성은 접근성을 간접적으로 향상시킵니다.
2-2. 모바일 환경에서의 레이아웃 예측성
모바일 환경에서는 화면 크기가 제한적이기 때문에 작은 레이아웃 변화도 사용자에게 크게 인식됩니다.
이미지 크기가 명시되지 않으면,
- 로딩 중 콘텐츠가 밀리거나
- 확대/축소 시 요소 간 간격이 갑자기 변하는 문제가 발생할 수 있습니다.
이미지의 기본 비율을 명확히 하면 이러한 불안정성을 줄일 수 있습니다.
3. SEO(검색 엔진 최적화) 관점
검색 엔진은 페이지의 로딩 성능과 사용자 경험을 중요하게 평가합니다.
- CLS가 낮은 페이지
- 초기 렌더링이 안정적인 페이지
이러한 특성은 검색 엔진에 품질이 높은 페이지로 인식될 가능성을 높입니다.
또한, 명확한 이미지 구조는 검색 엔진이 페이지를 더 효율적으로 이해하고 이미지 검색 결과에서도 긍정적인 영향을 줄 수 있습니다.
4. 실제 코드 예시
4-1. 사이즈 미지정 (문제 사례)
<img src="https://example.com/photo.jpg" alt="Beautiful scenery">
4-2. 사이즈 지정 (권장 사례)
<img
src="https://example.com/photo.jpg"
alt="Beautiful scenery"
width="800"
height="600">
주의사항
width와height는 HTML 속성 기준으로 픽셀 단위 값을 사용합니다.- 반응형 레이아웃에서는 아래 CSS를 함께 사용하는 것이 일반적입니다.
img {
max-width: 100%;
height: auto;
}
5. 실전 팁 정리
| 상황 | 권장 방법 |
|---|---|
| 정적 이미지 | width와 height 명시 |
| 반응형 이미지 | width/height + max-width: 100%; height: auto; |
| 동적 이미지 | 서버에서 메타데이터 기반으로 크기 삽입 |
| SVG | viewBox로 비율 정의, 필요 시 width/height 추가 |
6. 결론
- 레이아웃 안정성 확보 → CLS 감소 → 사용자 경험 개선
- 렌더링 예측 가능성 향상 → 체감 성능 개선
- SEO에 긍정적인 신호 제공
width와 height를 명시하는 것은 단순한 코드 스타일의 문제가 아니라,
웹 퍼포먼스와 UX를 동시에 개선하는 기본 원칙입니다.
이미지를 추가할 때 이 두 속성을 습관처럼 넣는 것만으로도 웹 페이지의 완성도는 눈에 띄게 달라집니다.
프론트엔드 엔지니어분들에게 도움이 될 만한 아래의 포스트들도 확인해보세요!
댓글이 없습니다.