4-2. 이미지 최적화

24. 이미지 최적화의 개념과 방법을 설명해주세요.

---

🪐 이미지 최적화란?

웹사이트나 애플리케이션에서 사용되는 이미지의 품질을 유지하면서 파일 크기를 줄이는 과정. 웹페이지를 더 빠르게 로딩하고, 사용자 경험을 개선할 수 있으며 서버 리소스의 절약과 SEO 최적화에 긍정적 영향을 미친다.

• 로딩 속도 개선 : 작은 파일 크기의 이미지는 더 빨리 로드된다.
• 트래픽 절감 : 작은 이미지는 데이터 사용량을 줄여, 서버와 사용자의 네트워크 부하를 줄여준다.
• SEO 향상 : 검색엔진은 로딩 속도가 빠른 페이지를 선호.
• 사용자 경험 개선 : 빠른 웹페이지는 사용자 이탈률을 낮추고 만족도를 높인다.

---

🪐 이미지 최적화 방법

1. 포맷 선택
이미지의 종류에 따라 적합한 파일 형식을 선택하는 것이 중요하다. 각 형식은 특성과 용도가 다르다.

• JPEG (JPG)
  • 특징 : 손실 압축을 사용해 파일 크기를 대폭 줄일 수 있다.
  • 용도 : 사진이나 복잡한 이미지 표시에 적합
  • 단점 : 여러 번 압축 시 품질 저하
• PNG
  • 특징 : 무손실 압축 지원, 투명 배경 포함 가능
  • 용도 : 로고, 아이콘, 투명 배경이 필요한 이미지
  • 단점 : 파일 크기가 JPEG보다 크다.
• WebP
  • 특징 : 구글에서 개발한 포맷. JPEG보다 작은 파일 크기와 높은 품질 제공
  • 용도 : 대부분 웹 이미지에 적합
  • 단점 : 모든 부라우저가 완벽하게 지원하지 않을 가능성 (보편화 중)
• SVG (Scalabel Vector Graphics)
  • 특징 : 벡터 형식으로 크기를 자유롭게 조절해도 품질이 유지된다.
  • 용도 : 로고, 아이콘, 그래프 등
  • 단점 : 복잡한 이미지에는 적합하지 않다.

2. 압축 사용
이미지를 압축하면 용량을 줄일 수 있지만, 손실 압축과 무손실 압축 사이에 균형이 필요하다.

• 무손실 압축
  • 품질 저하 없이 이미지 크기를 줄이는 방법
  • 예시 도구 : PNG 파일을 위한 PNGcrust, PptiPNG
• 손실 압축
  • 일부 품질 저하를 희생하는 대신 큰 폭으로 용량을 줄이는 방법
  • JPEG 파일에 많이 사용된다.
  • 예시 도구 : TinyJPG, JPEGmini
• 최적의 압축 전략 : 사진 같은 복잡한 이미지는 손실 압축이 더 효율적이고, 로고처럼 선명함이 중요한 이미지는 무손실 압축이 적합하다.

3. 이미지 크기 조절
불필요하게 큰 해상도의 이미지는 페이지 로딩 속도를 저하시킨다.

• 반응형 이미지 사용 : 다양한 해상도에 맞게 이미지 크기를 조정해 불필요한 용량 낭비를 줄인다.

• CSS와 HTML 속성 활용

  • <img scr="image.jpg" width="300">처럼 특정 크기를 지정하면 이미지가 고정된 해상도로 로딩된다.
  • <picture> 태그를 활용해 다른 디바이스에 따라 적합한 이미지를 표시할 수 있다.

4. Lazy Loading (지연 로딩)
웹 페이지가 열릴 때 모든 이미지를 한 번에 로딩하면 초기 로딩 속도가 느려질 수 있다. 지연 로딩으로 사용자가 스크롤할 때 해당 부분의 이미지를 로딩한다.

• HTML 예시

🖥️ html

<img src="image.jpg" loading="lazy" alt="Lazy load example">

• JavaScript로 구현
  라이브러리 없이 IntersectionObserver API를 사용해 지연 로딩 구현 가능

🖥️ javascript

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(img => observer.observe(img));

❓IntersectionObserver API

5. 이미지 캐싱 사용
힌 번 로딩된 이미지를 캐시에 저장하면, 다음 방문 시 서버가 아닌 브라우저가 이미지를 제공해 로딩 속도가 빨라진다.

• 브라우저 캐시 설정 예시 (Apache 서버)

🖥️ apache

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
</IfModule>

// 이미지를 1년 동안 캐시에 저장

6. CDN (Content Delivery Network) 활용
CDN은 사용자 위치 기반, 가까운 서버에서 이미지를 전달하는 네트워크이다.

• CDN의 장점
  • 전 세계적으로 분산된 서버로 빠른 응답 제공
  • 서버 부하를 줄여 사이트 성능 향상
• 사용 예시
  AWS의 CloudFront나 Cloudflare 같은 CDN을 활용해 이미지를 배포

🖥️ html

<img src="https://cdn.example.com/image.jpg" alt="Image from CDN">

---

➡️ 다양한 방법과 도구를 활용해 로딩 속도를 높이고
사용자 경험을 향상시키는 과정 중 하나가 바로 이미지 최적화.
웹사이트 성능과 SEO가 동시에 개선된다.

• 적절한 포맷 선택, 손실 및 무손실 압축을 알맞게 활용
• 이미지 크기 조정하고 지연 로딩과 캐시를 활용하면 성능 대폭 향상
• CDN으로 글로벌 사용자에게도 빠른 서비스 제공