Web Frontend/Basic

5. 비트맵 이미지 포맷 (JPG, PNG, GIF)

개발자킹콩 2021. 6. 4. 17:39

웹에서 많이 사용되는 비트맵 이미지 포맷 (JPG, PNG, GIF)

이미지가 용량이 커서 용량을 조절해서 사용하고 싶다. —> JPG

이미지가 투명도를 활용해야 한다. —> PNG

이미지가 움짤과 같은 애니메이션 효과가 필요하다 —> GIF

 

 

 

 

손실압축: 이미지를 손상 시켜 저장을 한다. 이미지의 용량을 획기적으로 줄여서 저장할 수 있다.

—> 저장할 때마다 손상 시키기에 원본을 수정하는 것을 추천한다.

표현 색상도: 24비트, 1600만 가지 색상을 지원한다.

압축이 많이 필요할 때 획기적으로 용량을 줄일 수 있는 JPG를 사용한다.

 

 

 

 


 

 

 

 

비 손실 압축: 이미지를 손실 시키지 않으며 저장할 수 있다. —> 용량을 획기적으로 줄일 수는 없다.

표현 색상도: 8비트와 24비트 컬러를 선택해서 저장할 수 있다.

 

가장 큰 장점은 투명도를 지원한다.

W3C 권장 포맷이다!!! —> 어떤 것을 쓸지 모르면 PNG 써라.

 

 

 


 

 

 

여러장의 이미지를 넣을 수 있다. —> 움짤을 저장할 수 있다. 

비 손실 압축이다.

8비트 컬러만 지원하기에 색 표현 질이 떨어진다.

 

 

 

 


 

 

 

 

 

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

하지만 지원하는 브라우저의 한계가 있다. —> 크로스 브라우징에 적합하지 않다.

 

지원하는 브라우저 확인 —> https://caniuse.com/webp

 

 

 

 

 

 

 

 

 

'Web Frontend > Basic' 카테고리의 다른 글

7. 특수 문자 용어 정리  (0) 2021.06.07
6. 벡터 이미지 포맷 (SVG)  (0) 2021.06.06
4. 이미지에 대한 이해  (0) 2021.06.03
3. 알아두면 좋은 VS Code 단축키  (0) 2021.06.02
2. VS Code Extension  (0) 2021.06.01