프론트엔드의 성능 최적화
프론트엔드에서 성능 최적화는 여러가지 이유로 강조되고 있습니다. 웹 페이지의 로딩 속도가 느려지면 사용자가 사이트를 이탈할 가능성이 높아지기 때문에 사용자 확보를 위해서 성능 최적화를 통한 사용자 경험 향상이 중요한 역할을 합니다. 이번 글에서는 성능 최적화 중 중요한 요소인 이미지 최적화에 대한 내용을 말씀드리겠습니다.
이미지 최적화의 장점
- 웹사이트 속도 개선 → 빠른 로딩으로 사용자 만족도 향상
- SEO(Search Engine Optimization) 향상 → 구글 검색 순위에 긍정적인 영향
- 트래픽 절감 → 불필요한 데이터 사용을 줄여 서버 비용 절감
- 반응형 웹 지원 → 다양한 기기에서 적절한 이미지 제공
이미지 최적화 방식
이미지는 여러가지 방식으로 최적화 시킬 수 있습니다.
- 이미지 포맷 설정
- 이미지 크기 조정 및 압축
- 반응형 이미지 적용
- Lazy Loading (지연 로딩)
- CDN(Content Delivery Network) 활용
- 캐싱 및 브라우저 최적화
- SVG 및 아이콘 최적화
이미지 포맷은 어떤걸 사용할까?
이미지 포맷은 상황에 따라 적절한 포맷을 선택해야 합니다.
웹사이트에서는 가급적 WebP 또는 AVIF를 사용합니다.
로고나 아이콘은 SVG를 사용하면 선명한 품질을 유지할 수 있습니다.
포맷 | 특징 | 적합한 경우 |
JPEG | 손실 압축, 용량이 작음 | 일반 사진, 배경 이미지 |
PNG | 무손실 압축, 투명 배경 지원 | 아이콘, 로고, 투명 배경 필요 시 |
GIF | 애니메이션 가능, 색상 제한(256컬러) | 간단한 애니메이션 |
WebP | JPG, PNG보다 용량 작고 품질 유지 | 모든 이미지 (모던 브라우저 지원) |
AVIF | WebP보다 더 나은 압축률, 품질 우수 | 최신 브라우저, 고품질 이미지 |
SVG | 벡터 형식, 해상도 무제한 확대 가능 | 아이콘, 로고, 일러스트 |
이미지 크기 조정 및 압축
이미지 크기가 클수록 로딩 속도가 느려지므로 적절한 크기 조정과 압축이 필요합니다.
이미지 크기 조정 방법
- 사용자의 화면 크기에 맞게 적절한 해상도 설정
- 불필요하게 큰 해상도의 이미지를 사용하지 않기
- CSS를 이용한 이미지 축소보다는, 적절한 크기의 이미지를 미리 제공
이미지 압축 도구 추천
- TinyPNG → PNG & JPG 압축
- Squoosh → 다양한 포맷 지원, 직접 압축율 조정 가능
- ImageMagick → 명령어 기반 대량 이미지 압축
반응형 이미지 적용
반응형 웹 디자인에서는 기기별 최적화된 이미지를 제공해야 합니다.
srcset과 sizes 속성 활용
HTML의
<img> 태그에서 srcset과 sizes 속성을 사용하면, 브라우저가 적절한 해상도의 이미지를 자동으로 선택합니다.<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" alt="반응형 이미지 예제">
srcset: 다양한 크기의 이미지 제공sizes: 화면 크기에 따라 적절한 이미지 크기 지정Lazy Loading(지연 로딩) 적용
Lazy Loading은 현재 화면에 보이지 않는 이미지의 로딩을 나중에 하는 기술입니다.React에서는
Image 컴포넌트를 사용하면 기본적으로 Lazy Loading 이 적용되어 있습니다.HTML 속성 활용
<img src="large-image.jpg" alt="Lazy Loading" loading="lazy">
CDN(Content Delivery Network) 활용
CDN을 이용하면 전 세계에 분산된 서버에서 사용자가 가까운 위치에서 이미지를 다운로드할 수 있어 로딩 속도가 빨라집니다.
대표적인 이미지 최적화 CDN 서비스
- Cloudflare → 무료 사용 가능
- Imgix → 실시간 이미지 변환 및 최적화 제공
- Cloudinary → 다양한 이미지 변환 기능 제공
CDN을 활용하면?
- 사용자가 가까운 서버에서 이미지를 받아서 응답 속도가 빨라짐
- 캐싱을 통해 불필요한 서버 요청을 줄일 수 있음
캐싱 및 브라우저 최적화
이미지를 자주 불러오는 웹사이트라면 캐싱(Cache) 을 활용해야 합니다.
# 30일 동안 캐싱 유지 <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpeg "access plus 30 days" ExpiresByType image/png "access plus 30 days" </IfModule>
SVG 및 아이콘 최적화
아이콘과 벡터 이미지는 SVG를 사용하면 크기가 작고 해상도 독립적인 장점이 있습니다.
SVG 최적화 방법
- 불필요한
fill,stroke속성 제거
- SVGOMG 같은 도구를 이용해 최적화
