요약
성능 최적화를 위한 4가지 섹션 증 첫번째인 필요한 것만 요청하기(로딩 성능 개선)에 대한 내용을 다룹니다.
이미지 크기를 줄임으로써 로딩 성능을 개선해봅니다.

목차

• ⛳️ 로딩 성능 개선 - Part 1. 요청 크기 줄이기
  • 1-2. 이미지 크기 줄이기
    • ✅ 이미지 해상도가 화면에 보여야 하는 사이즈보다 큰 경우
    • ✅ 해상도를 맞췄음에도 여전히 용량이 큰 경우
      • ✔️ 손실 압축
      • ✔️ 무손실 압축

⛳️ 로딩 성능 개선 - Part 1. 요청 크기 줄이기

1-2. 이미지 크기 줄이기

초반에 네트워크 탭에서 살펴봤던 hero.png 역시 용량이 큰 편에 속한다. 이미지 용량이 큰 문제는 주로 아래와 같은 경우에 발생한다.

✅ 이미지 해상도가 화면에 보여야 하는 사이즈보다 큰 경우

실제로 화면에 보이는 사이즈보다 너무 큰 이미지를 사용하고 있을 수 있다.
필요한 사이즈로 사용할 수 있게끔 이미지 사이즈를 조정하는 방법을 고려할 수 있다.

이때 고해상도 이미지를 다룰 땐 해상도를 2배수로 고려해서 사이즈를 조절하면 좋다.즉, 표시 크기가 100px이라면 실제 이미지 크기는 200px 짜리로 준비하는 것이다.
Retina 화면에서는 픽셀이 퍼져 보이거나 흐릿하게 보이는 현상이 발생할 수도 있기 때문이다.

🔝 목차로 돌아가기

✅ 해상도를 맞췄음에도 여전히 용량이 큰 경우

이미지 해상도를 맞췄음에도 이미지 크기가 크다면 포맷이나 추가 압축 등을 더 고려할 수 있다.
흔히 알려진 이미지 포맷에는 png, jpeg, webp, gif 등이 있다. 포맷을 조금 더 잘 알기 위해서는 ‘손실/무손실 압축’이라는 개념을 알고 있으면 좋다.

✔️ 손실 압축

• 개념

이미지의 시각적으로 중요하지 않은 데이터를 제거하여 용량을 감소시킨다.
사람의 눈은 밝기 구분만 잘하고 섬세한 색 구분은 상대적으로 떨어진다. 따라서 그 점을 이용해 아래와 같이 색을 합쳐버리는 것이다.

(이미지 출처: 코딩애플)

압축 후 복원 시 원본과 100% 동일하지 않다.
사람의 눈으로는 거의 구분이 어렵지만, 반복 저장 시 품질이 점점 떨어진다. 대표적으로 디지털 풍화의 예시를 들 수 있다.

• 특징

  • 파일 용량이 작아 전송 속도와 저장 효율이 높다.
  • 화질 저하 가능성이 있다.
  • 원본 품질 복원이 불가능하다.

• 대표 포맷

  • jpeg, webp(손실 모드)

✔️ 무손실 압축

• 개념

모든 데이터를 그대로 보존한 채, 중복 정보를 효율적으로 압축한다.
압축 해제 시 원본과 동일한 이미지 복원이 가능하다.

(이미지 출처: 안될공학)

• 특징

  • 화질 저하 없고 투명도 표현이 정확하다.
  • 손실 압축보다 용량이 크고 네트워크 전송 시 속도가 느리다.

• 대표 포맷

  • png, webp(무손실 모드), gif

요약해보자면, 손실 압축은 일부 화질을 희생해 용량을 줄이는 방식으로, 사진이나 웹 콘텐츠에 주로 쓰인다. 무손실 압축은 원본 품질을 그대로 유지하며, 로고·UI·아이콘처럼 선명도가 중요한 이미지에 적합하다.

다시 돌아와서, 이미지 포맷별 특징을 정리하면 아래와 같다.

• PNG

  • 무손실 포맷
  • JPEG에 비해 5-10배까지 커질 수 있음

• JPEG

  • 손실 압축 방식
  • 상대적으로 크기가 작다.
  • Progressive JPEG도 있다. progressive JPEG란 이미지 렌더링의 차이를 의미한다.
    일반적인 JPEG가 위에서부터 순차적으로 렌더링 되는 것과 다르게, Progressive JPEG는 흐리지만 처음부터 이미지가 잘려 보이지 않는다는 장점이 있다.

(이미지 출처: Liquid Web)

• WebP

  • 손실 / 무손실 압축 모두 지원
  • 손실 압축일 경우 JPEG보다 25~34%, 무손실 압축일 경우 PNG보다 26% 작은 크기이다.
  • 브라우저별 지원 여부를 확인하는 것이 좋다.

• GIF
  • 무손실 포맷으로, 대부분 매우 큰 용량
  • 애니메이션 및 투명도 지원

🔝 목차로 돌아가기