memostack
article thumbnail
블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.tistory.com/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형

jpg(jpeg, Joint Photograph Experts Group)

  • 높은 압축률을 통해 이미지의 사이즈를 줄여줌
  • 단점으로는 압축을 통해 이미지의 품질이 낮음
  • 24비트 컬러를 지원
  • .jpg, .jpeg. jpe 등의 확장자명을 사용

 

참고

https://ko.wikipedia.org/wiki/JPEG

 

png(Portable Network Graphics)

  • png는 손실없이 이미지를 압축하여 품질이 좋음
  • 손실 없이 이미지를 압축하다 보니 다른 이미지 포맷에 비해 용량이 큰 편
  • 8비트/24비트 컬러를 지원
  • W3C 권장 포맷
  • Alpha Channel을 지원하여 투명도 표현 할 수 있음

jpg vs png (https://www.imymac.com/ko/mac-cleaner/png-vs-jpg.html)

 

참고

https://namu.wiki/w/PNG

 

gif(Graphics Interchange Format)

  • png와 비슷하게 비손실 압축 알고리즘을 사용하여, 압축과정에서 손실이 발생하지 않음
  • 단, 8비트 컬러만 지원하기 때문에 24비트 컬러의 다른 이미지 포맷을 gif로 변환하면 손실이 발생함
  • 여러 장의 이미지를 하나의 파일을 담을 수 있으며, 이를 Animated GIF라 함
  • 투명 컬러를 지정하는 것이 가능.
    • PNG처럼 알파값이 존재하는 것이 아니라 특정 컬러를 투명컬러로 지정하는 방식

움직이는 이미지, gif

참고

https://namu.wiki/w/GIF

 

svg(Scalable Vector Graphics)

  • 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식
    • 코드로 이루어진 이미지라 생각하면 됨
  • 이미지의 형태가 복잡해질수록 CPU 연산량이 늘어나 이미지 로딩이 느려질 수 있음
  • 해상도에 상관없이 이미지의 품질이 좋음 (확대, 축소를 하더라도 이미지의 품질이 변하지 않음)

비트맵 vs svg

 

참고

https://namu.wiki/w/SVG

 

어떤 이미지를 사용할까

  • jpg: 적은 용량으로 이미지를 사용하고 싶을때
  • png: 투명 컬러를 지원하므로, 투명이 필요한 이미지를 사용하고 싶을때
  • gif: 움직이는 이미지를 사용하고 싶을때
  • svg: 확대, 축소에도 이미지가 손상되지 않도록 하고 싶을때

 

반응형
블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.tistory.com/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
profile

memostack

@bluemiv_mm

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!