웹디자인

이미지의 최적화

대부분의 사이트에서 페이지 용량의 대부분을 이미지가 차지한다. 2013년 한 해 동안 웹 페이지의 콘텐츠 요청 횟수는 그리 늘지 않았는데 이에 비해 이미지가 웹 페이지에서 차지하는 비중은 30% 늘었다. 이 말인 즉, 이미지의 관리가 서버 자원 활용의 중요한 관건이 됐다는 말이다. 특히, PC에서 모바일이 사용자 환경이 넘어가는 상황에서 PC 화면에 최적화된 고해상도 이미지 활용은 제고돼야 한다.

이미지의 포맷 고르기

사이트에 사용할 이미지를 만들 때 사용할 수 있는 포맷은 여러 가지가 있다. 이미지 포맷을 결정할 때 다음의 질문을 스스로에게 던져야 한다.

  • 눈에 띄는 품질 저하 없이 이미지를 압축할 수 있는가?
  • 얼마나 많은 색상이 필요한가?
  • 이미지를 더 단순하게 할 방법은 없는가?
  • 이미지가 투명해야 하는가?
  • 애니메이션이 필요한가?
  • 이미지가 화면에 표시될 때 최대 높이와 너비는 어떻게 되는가?
  • 사이트에서 어떤 용도로 이미지를 사용할 것인가?

웹에서 사용하는 가장 일반적인 이미지 파일 포맷은 JPEG, GIF, PNG다. 아래는 가장 인기있는 이미지 파일 포맷들을 각각 언제 사용해야 하고 어떻게 최적화할 수 있는지 보여준다.

  • JPEG : 해상도 줄이기, Progress JPEG로 내보내기, 이미지 노이즈 줄이기
  1. JPEG는 이미지의 부드러운 그레이디언트 부분과 명암 대비가 낮은 부분, 즉 사용자가 눈치채기 어려운 부분에서 정보를 버린다. 이처럼 JPEG는 인위적 변형1을 하기 때문에 인접 픽셀 간 명암 대비가 크다면 PNG와 같은 다른 포맷이 더 적합할 수 있다.
  2. ‘웹으로 저장하기(Save for Web)’ 기능을 활용하자
  3. 저장시 ‘프로그레시브'(Progressive)2를 활성화해보자

 

  • GIF : 디더링(dithering) 줄이기, 색상 수 줄이기, 수평 패턴 사용, 수직 노이즈 줄이기
  1.  디더링3 기능을 활용하자.
  2. 수직으로 된 노이즈를 줄이면 GIF 파일 크기에 긍정적 영향을 줄 수 있다.

 

  • PNG-8 : 디더링 줄이기, 색상 수 줄이기, 수평 및 수직 패턴 사용
  1. 이미지 색상 수가 적은 경우라면 PNG-8 포맷을 쓴다. 이 포맷은 이미지 내 최대 256색을 포함할 수 있고 또한 GIF처럼 전체 파일 크기에 영향을 미치는 디더 양을 선택할 수도 있다.

 

  • PNG-24 : 노이즈 줄이기, 색상 수 줄이기
  1.  JPEG에서 말하는 ‘인위적 변형’이란 이미지 영역의 명확성을 잃는 것을 말한다. 인위적 변형은 이미지의 경계선이 불명확해지거나 픽셀이 눈에 보이거나 이미지가 뭉개지는 현상의 원인이 될 수 있다.
  2. 프로그레시브 JPEG 파일은 여러번에 걸쳐 품질을 향상시키면서 이미지 파일을 반복적으로 스캔한다. 기본 JPEG 파일은 브라우저가 위에서 아래로 읽었기 때문에 이미지의 조각도 천천히 위에서 아애로 나타난다. 반면 프로그레시브 JPEG는 이미지 전체를 로딩하는 대신에 낮은 품질로 즉시 표현하기 때문에 기본 JPEG 파일보다 화면에 더 빠르게 나타난다.
  3. 디더링은 색상간 전환이 더 부드럽게 보이도록 도와주는 기능이다. 디더링을 적용하면 색상이 다른 인접한 픽셀들을 검사해 부드러우면서도 색상들이 조화롭게 보이도록 두 색 사이에 새로운 색을 골라 넣는다.

Warning: printf(): Too few arguments in /home/lightover/html/wp-content/themes/fortunato-pro/inc/template-tags.php on line 47
되고 싶은 것보다 하고 싶은게 많아요. 어느 순간 둘 중 하나를 선택해야 한다면 하고 싶을 걸 택할 겁니다. 삶은 짧고, 불확실하니까.