Q. 이미지 최적화에 대해 설명, 방법에 대해 설명

❓이미지 최적화란?

이미지 최적화는 웹페이지의 로딩 시간을 줄이고, 사용자 경험을 향상시키며, 데이터 사용량을 감소시키기 위해 이미지 파일의 크기를 줄이는 과정을 의미함
웹 페이지의 대부분의 데이터는 이미지에서 오기 때문에, 이미지를 최적화하는 것은 성능 향상에 큰 영향을 미침

❓이미지 최적화 방법

- 적절한 파일 형식 선택
   JPG는 사진이나 풍부한 색성을 가진 이미지에 적합함
   PNG는 배경이 투명한 이미지나 고해상도의 이미지에 적합함
   GIF는 간단한 애니메이션에 사용됨
   SVG는 로고나 아이콘 같은 벡터 기반 그래픽에 사용됨
   WebP는 최신 이미지 포맷으로 JPEG, PNG보다 더 좋은 압축률을 제공하면서도 높은 품질 유지

- 압축
    여러 온라인 도구나 라이브러리를 사용해 이미지 크기를 줄일수 있음

- Responsive Images
   다양한 화면 크기와 해상도에 맞게 여러 버전의 이미지를 제공함
   HTML의 'sreset' 속성이나 'picture' 요소를 사용하여 구현할 수 있음

- Lazy Loadgin
   페이지 로딩 시점에 화면에 표시되지 않는 이미지는 로딩을 지연시키는 기법
   이를 통해 초기 로딩 시간을 단축시킬 수 있음

- CDN 사용
   이미지를 전세계의 다양한 서버에 분산하여 제공하는 것으로, 사용자가 가장 가까운 서버에서 이미지를 다운로드 받을 수 있게 해 로딩 속도를 향상시킴

- 스프라이트 사용
  여러 개의 작은 이미지를 하나의 큰 이미지로 합쳐서 서버 요청 횟수를 줄이는 기법임
  CSS를 통해 필요한 부분만 표시함

- SVG사용
   텍스트나 아이콘 같은 벡터 이미지의 경우, SVG(Scalable Vetor Graphics)형식을 사용하면 품질 손실 없이 이미지 크기를 줄일 수 있음

이미지 최적화는 웹 페이지의 로딩 시간을 줄이는 핵심적인 방법 중 하나입니다. 웹페이지에서 이미지는 데이터의 큰 부분을 차지하기 때문에, 이러한 이미지들을 효율적으로 관리하고 최적화하는 것은 사이트의 전체 성능 향상에 크게 기여합니다.
이미지 최적화는 먼저, 파일 형식을 적절히 선택하는 것이 중요합니다. 예를 들어, 일반적인 사진에는 JPG를, 배경이 투명한 이미지에는 PNG를 사용하는 등의 방식이 있습니다. 최근에는 WebP라는 형식도 많이 사용되고 있는데, 이는 고품질의 이미지를 더 작은 용량으로 제공할 수 있어서 매우 효율적입니다.그리고 이미지의 압축도 중요합니다. 이미지를 압축하면 용량을 크게 줄일 수 있지만, 품질 저하를 최소화하는 도구나 방법을 사용하는 것이 좋습니다.Responsive Images 방식을 통해 다양한 디바이스 크기에 적합한 이미지를 제공할 수 있습니다. 이를 통해 모바일과 데스크톱에서 모두 최적의 이미지를 불러올 수 있습니다.Lazy Loading은 페이지 로딩 시점에 바로 필요하지 않은 이미지는 로딩을 지연시키는 기법입니다. 이를 통해 초기 페이지의 로딩 속도를 빠르게 할 수 있습니다.CDN을 사용하면 이미지를 전 세계 여러 서버에서 빠르게 제공할 수 있어, 사용자의 접근 속도가 향상됩니다.마지막으로, 스프라이트 기법과 SVG 사용을 통해 이미지 요청 횟수를 줄이거나 벡터 이미지의 효율적인 관리를 할 수 있습니다.