프론트엔드 개발 · 기초
이미지 최적화(Image Optimization)를 위해 어떤 방법들을 사용할 수 있으며, 각각의 장점은 무엇인가요?
힌트 · 이미지 압축, WebP와 같은 최신 포맷 사용, 반응형 이미지(srcset), 지연 로딩(lazy loading) 등을 통해 파일 크기를 줄이고 로딩 성능을 개선할 수 있습니다.
압축포맷리사이징CDNLazy Loading
모범답안
이미지 최적화는 웹 성능 향상에 매우 중요합니다. 몇 가지 방법을 말씀드릴 수 있습니다.
첫째, 이미지 압축입니다. 손실 압축이나 무손실 압축을 통해 이미지 품질을 유지하면서 파일 크기를 줄일 수 있습니다. 장점은 서버 용량을 절약하고 다운로드 시간을 단축시킨다는 점입니다.
둘째, WebP와 같은 최신 이미지 포맷을 사용하는 것입니다. WebP는 JPEG나 PNG보다 압축률이 뛰어나 동일한 품질에서 더 작은 파일 크기를 제공합니다.
셋째, 반응형 이미지를 사용하는 것입니다. srcset 속성을 사용하여 화면 크기에 맞는 이미지를 제공함으로써 불필요한 데이터 낭비를 막을 수 있습니다.
넷째, 지연 로딩(Lazy Loading)을 적용하는 것입니다. 사용자가 실제로 이미지를 보기 전까지는 로딩을 지연시켜 초기 페이지 로딩 속도를 개선할 수 있습니다.
마지막으로, CDN을 활용하여 전 세계 사용자에게 더 빠르게 이미지를 전송할 수 있습니다. CDN은 지리적으로 분산된 서버에 콘텐츠를 캐싱하여 사용자에게 가장 가까운 서버에서 콘텐츠를 제공합니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- 웹 페이지 로딩 속도를 측정하는 대표적인 지표(Metrics)에는 어떤 것들이 있으며, 각각 무엇을 의미하나요? (예: FCP, LCP)
- 브라우저 캐싱(Browser Caching)은 웹 성능 최적화에 어떻게 기여하나요? 그 원리에 대해 설명해 주세요.
- CDN(Content Delivery Network)은 웹 성능 향상에 어떤 역할을 하며, 어떤 상황에서 주로 사용되나요?
- CSS와 JavaScript 파일을 압축(Minification)하고 번들링(Bundling)하는 것이 웹 성능에 어떤 이점을 주나요?
- 지연 로딩(Lazy Loading)이란 무엇이며, 어떤 종류의 콘텐츠에 주로 적용되며 웹 성능에 어떤 영향을 미치나요?
- 웹 페이지 렌더링 성능 최적화를 위해 Critical Rendering Path (CRP)를 이해하고 개선하는 것이 중요합니다. CRP의 주요 단계들을 설명하고, 이 경로를 단축하거나 최적화하기 위한 구체적인 방법들을 제시해 보세요.