[CSS] 이미지 파일 형식

웹페이지에서 간단한 앨범을 만들던 도중 겪은 문제 입니다.

배경 이미지 위로 다른 이미지를 올려 놓았을 때 올린 이미지의 하얀 배경이 있었습니다.

분명 포토샵으로 알파 이미지로 만든 것 이었습니다.

파일 형식을 보니 .jpg 였습니다.

<img src={process.env.PUBLIC_URL + '/img/logo.jpg'} className='logo' title='내 정보'/>

=> 저장할 때 png, gif, svg 형식으로 저장해야 하는데 습관처럼 .jpg로 저장을 했습니다.

 

◯ 이미지 파일 형식 정리

 

▶ JPG : 가장 많이 사용되는 이미지 형식이며 알파 이미지라도 자동적으로 뒷 배경이 생깁니다. 주로 풍경사진, 인물사진에서 사용됩니다.

 

▶ SVG : 웹에서 벡터이미지 사용할 때 사용하는 이미지 형식 입니다. 벡터 이미지이다 보니 일러스트에서 사용하기 좋으며 이미지를 늘렸다 줄였다 해도 깨지거나 손상이 가지 않습니다. 즉 애니메이션 구현할 때 적합하게 사용됩니다. 그리고 JPG 다르게 알파 이미지면 하얀 배경이 없습니다.

 

▶ GIF : 주로 움짤로 사용합니다. 즉 용량이 작은 파일이라 여러 이미지가 겹친 움짤로 사용하기 좋습니다. SVG 마찬가지로 알파 이미지는 배경이 없습니다.

 

▶ PNG : 아이콘, logo, 일러스트 이미지에 적합하며 알파 이미지 배경이 없습니다. 장점으로는 무손실 압축 입니다. 즉 적은 공간에 저장할 수 있지만 원본의 손상은 거의 없다고 보면 됩니다.