웹 이미지 형식

이미지 포맷

full-width 슬라이드쇼 이미지는 최대 가로 2560px 이미지가 괜찮음. 대다수 27, 30인치의 모니터는 가로가 2560px

png

또렷하고 선명한 이미지에 좋음
대신 색이 적을수록 좋다
주로 레이아웃을 위한 이미지에 사용 (재사용할 일이 많은 이미지에 사용하기 좋음)
애니메이선 지원 안 됨

png-8과 png-24가 있음

png-8: indexed color 속성으로 최대 256가지의 컬러로만 저장
png-24: jpg처럼 컬러를 많이 가지지만 여전히 무손실 압축임. 주로 간단한 배너이미지에 사용

jpg

손실 압축
low-bandwidth 이미지
별로 안 선명함
주로 이미지에 사용 (특정 페이지에서 보여주는 크고 복잡한 이미지에 사용하기 좋음)
퀄리티는 최대 퀄리티의 60~70%로 export해도 충분함. 만약 50~60%까지 떨어지는 경우 육안으로 노이즈가 보임.

gif

무손실 압축 지원
indexed color 속성으로 최대 256가지의 컬러로만 저장
색이 별로 없어서 이미지에 좋은 형식이 아니다
애니메이션 가능

svg

vector 파일임
픽셀 대신 라인과 곡선으로 이루어져있음
로고나 아이콘에 적합
모양을 최대한 단순화하는것이 최적화하기 좋음. 안 그러면 크기가 매우커진다.

png/svg/gif 공통점

export file size comparison

solid color를 보여주기에 좋음. 예를 들면 로고, 아이콘 같은.. 만약 컬러가 많은 이미지를 위의 포맷으로 저장하는 경우 용량이 엄청나게 커짐

이미지 최적화 툴

gif: http://www.lcdf.org/gifsicle/
jpg: http://jpegclub.org/jpegtran/
무손실 png: http://optipng.sourceforge.net/
손실 png: https://pngquant.org/

refs