이미지 제대로 쓰고 전달하기

외국회사에서 UX UI 디자인을 합니다.

1. 벡터 vs 비트맵

(1)비트맵   

픽셀 베이스로 확대/축소 시 깨질 수 있어요.

복잡하고 디테일한 이미지 사용에 적절해요.

용량이 무거워 '로딩'에 영향을 줄 수 있으므로, 비트맵이미지 전달 시 압축사이트 이용을 추천해요.

-JPEG : 손실압축, 압축도 높음, 투명 배경 불가능

-PNG : 무손실압축, 압축도 비교적 낮음, 투명 배경 가능

-GIF : 애니메이션 구현 가능

(2)벡터   

점, 선 베이스로 확대/축소에 유연하게 반응해요.

복잡하지 않은 이미지 표현에 적절해요. eg. 아이콘, 로고, 로딩 애니메이션,...

용량이 가벼워요.

-SVG : 코드로 작성 가능, 색상 수정 가능, 애니메이션 가능

2. 핸드오버

이미지/영상은 로딩/트래픽에 부담을 주는 요소이므로 어떻게 추출해 전달하는지가 중요해요.

(1)이미지

-복잡하지 않은 그래픽(eg. 아이콘, 로고, 로딩 애니메이션 등)은 svg로 추출해요.

-복잡하고 디테일한 그래픽 또는 사진이미지는 jpg로 추출해요.

-배경제거(투명 배경)가 필요한 경우 png로 추출해요. *배경제거 사이트

https://www.remove.bg/

이미지 배경 제거, 투명 배경 만들기 – remove.bg

-핸드오버 전 센스 있게 용량을 압축해 주세요. *이미지압축 사이트

https://imagecompressor.com/

Online Image Сompressor

(2)영상

-유튜브 등에 업로드 후 <iframe> 태그로 가져와요.

-자동재생이 되지 않도록 하여 트래픽 부담을 줄여요.