img 태그의 src 속성 및 이미지 최적화 전략
HTML의 <img> 태그는 이미지를 표시하기 위한 기본 요소로, src 속성을 통해 이미지의 위치를 지정합니다.
하지만 단순한 이미지 출력 외에도 웹 성능 최적화를 위해 다양한 기법과 속성을 함께 고려해야 합니다.
1. src 속성에 들어가는 주요 데이터 형식
1. 일반 URL
- 외부 이미지 주소 또는 로컬/상대 경로
- 일반적인 네트워크 요청 기반 이미지 로딩
예
- https://example.com/image.jpg
- /assets/photo.png
2. Base64 인코딩
- 이미지를 텍스트로 인코딩하여 직접 삽입
data:image/형식;base64,...형태
특징
- HTTP 요청 없이 렌더링 가능
- HTML 파일 크기 증가
- 반복 사용 시 비효율적
3. Blob URL
- JavaScript에서 동적으로 생성한 Blob 데이터를 참조하는 임시 URL
URL.createObjectURL()을 통해 생성
특징
- 네트워크 요청 없이 메모리 내 데이터 표시
- 사용 후
URL.revokeObjectURL()로 수동 해제 필요
4. SVG 데이터 URL
- SVG 마크업을
data:URL로 직접 삽입 - 벡터 기반 이미지로 크기 확대·축소에 강함
특징
- 코드 수정, 애니메이션, 스타일 적용 가능
- 작은 UI 아이콘에 적합
2. 이미지 렌더링 최적화를 위한 주요 속성
loading 속성
- 지연 로딩(Lazy Loading)을 위한 속성
- 기본적으로 뷰포트에 들어오기 전까지 로딩하지 않음
예:
<img src="..." loading="lazy" />
값
lazy: 지연 로딩eager: 즉시 로딩
decoding 속성
- 이미지 디코딩 방식 힌트 제공
값
async: 디코딩을 백그라운드에서 비동기 처리 (기본값)sync: 디코딩을 즉시 진행auto: 브라우저 판단에 맡김
width / height 속성
- 레이아웃 시프트 방지를 위해 명시적 이미지 크기 지정 권장
예:
<img src="..." width="400" height="300" />
→ CLS (Cumulative Layout Shift) 개선 효과
srcset / sizes 속성
- 반응형 이미지 대응
- 디바이스 해상도나 뷰포트에 따라 적절한 이미지 선택
예:
<img src="default.jpg" srcset="small.jpg 600w, large.jpg 1200w" sizes="(max-width: 768px) 600px, 1200px" />
alt 속성
- 이미지 대체 텍스트
- 접근성 향상 및 SEO 개선에 필수
예:
<img src="..." alt="제품 썸네일 이미지" />
3. 기타 최적화 전략
이미지 포맷 선택
| 포맷 | 용도 및 특징 |
|---|---|
| JPEG | 사진, 고해상도 이미지 (손실 압축) |
| PNG | 투명 배경 필요할 때 (무손실 압축) |
| SVG | 벡터 기반 로고, 아이콘 |
| WebP | 압축률 높음. 대부분의 브라우저 지원 |
| AVIF | 최신 포맷. 고효율 압축, 일부 브라우저 미지원 |
브라우저 캐싱 전략
- 이미지 URL에
?v=1.0등 버전 쿼리를 추가하여 캐시 관리 - HTTP 캐시 헤더 설정 (
Cache-Control,ETag등)
CDN 활용
- 이미지 로딩 속도 향상을 위해 전 세계적으로 분산된 CDN(Content Delivery Network) 사용 권장
- 이미지 최적화 및 자동 포맷 변환 제공하는 CDN 예시:
- Cloudflare Images
- AWS CloudFront
- imgix, Cloudinary
4. 브라우저 렌더링 흐름 요약
-
src 값 분석
- http/https → 네트워크 요청
- data: → 인코딩 데이터 디코딩
- blob: → 브라우저 메모리 참조
- file:// → 로컬 접근 (보안 제약) -
이미지 디코딩
- PNG/JPEG 등 압축 해제
- SVG: 마크업 파싱 -
렌더링
- 픽셀 또는 벡터 데이터 화면 표시
코드 예시
// 일반 URL
<img src="https://example.com/image.jpg" loading="lazy" alt="풍경 이미지" />
// Base64
<img src="data:image/jpeg;base64,/9j/4AAQSkZ..." />
// Blob URL
const blob = new Blob([imageData], { type: 'image/jpeg' });
const blobUrl = URL.createObjectURL(blob);
<img src={blobUrl} />
// SVG 데이터
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">...</svg>' />
// 반응형 이미지 (srcset)
<img src="default.jpg"
srcset="small.jpg 600w, large.jpg 1200w"
sizes="(max-width: 768px) 600px, 1200px"
alt="반응형 이미지" />
꾸준히