이미지 용량 최적화

이미지의 특성을 고려하지 않고 올바르지 않은 확장자로 이미지를 저장할 경우에도 용량이 커질 수 있습니다. 또한 올바른 확장자로 이미지를 저장했더라도 원본 이미지 용량이 너무 크면 홈페이지 로딩이 느려질 수 있습니다.

그렇기 때문에 홈페이지 제작 시 이미지의 원본 화질을 최대한 유지하면서 용량을 줄이는 과정이 필요합니다.

 

이미지 파일 형식

GIF

보통 로딩바 이미지 같은 애니메이션 이미지의 경우 GIF로 저장합니다.

• 256색 이하의 색상으로 표현되는 아이콘, 이미지  (PNG가 10~30% 정도 더 뛰어난 압축률을 제공하기 때문에 256색 이하 이미지는 PNG로 저장합니다.)
• 애니메이션 이미지 또는 투명한 부분까지 저장이 가능하나 반투명한 알파값은 표현 불가
• 투명한 부분과 이미지의 경계가 뚜렷한 경우 사용 가능

 

JPG

• 사진, 그라데이션 등 많은 색상 정보를 포함하는 이미지에 적합 (단, 투명도가 들어간 이미지는 지원하지 않는다.)
• 육안으로 화질의 손실이 느껴지지 않는 선에서 최대한 압축률을 높여 저장 (품질 60~80)

 

PNG

투명도가 들어간 이미지는 반드시 PNG-24로 저장합니다.

• 알파값 표현이 가능하므로 투명 또는 반투명 이미지 저장
• 화질의 손실이 거의 없는 반면 압축률이 낮아 용량이 큼 
• PNG-8 : 256색 이하 / PNG-24 : 트루칼라

 

포토샵을 활용한 이미지 저장 방법

1. 파일 → 내보내기 → 웹용으로 저장을 클릭합니다. (단축키 Alt + Shift + Ctrl + S)

2. 이미지 파일 형식 지정 후 저장합니다.

 

이미지 용량 압축

해상도 손실없이 이미지 용량을 줄일 수 있는 사이트입니다.

 

• TintPNG : https://tinypng.com/

TinyPNG – Compress PNG images while preserving transparency