이미지 파일의 종류와 사용

이미지 파일의 종류에는 크게 2가지로 Raster Image File Format과 Vector Image File Format이 존재합니다.

 

Raster Image FIle의 종류와 특징

JPEG(JPG)

• JPEG 알고리즘에는 DCT(discrete cosine transform, 이산 코사인 변환)를 적용한 후 데이터를 줄이기 위해 Quantization(양자화)를 합니다. 양자화를 쉽게 설명하면 자연스러운 색상을 단순화시키는 역할을 합니다. 양자화를 하면 색수가 줄어들게 됩니다. 이 때 데이터의 손실이 발생됩니다.하지만 이미지의 용량을 줄이기 때문에 저장을 할때 효과적이라고 볼 수 있습니다. 또한 JPEG는 배경이 흰색이 디폴트 값입니다.
• JPG 파일 처리과정

• JPEG(Joint Photographic Experts Group)와 JPG는 동일한 이미지 파일 형식입니다. JPEG는 ‘손실’압축이 적용되었기 때문에, 원본이미지가 훼손됩니다.

PNG

• PNG(Portable Network Graphics)JPG와 PNG 중에 무엇이 더 좋은 형식이다 라고 말하기는 힘듭니다. 각 파일형식마다 장단점이 존재하기 때문에 자신이 어떤 목적으로 이미지를 사용하는지에 따라서 적절한 파일형식을 사용하는 것이 바람직합니다.많은 이미지를 저장해야해서 이미지의 용량을 줄이는 것이 중요한 경우에는 JPG를 사용하는 것이 유리하고, 실사이미지를 사용하는 경우에도 JPG를 사용하는 것이 효율적입니다.
• 용량에 대한 걱정이 없다면 PNG를 사용하는 것이 바람직할 수 있습니다. 또한, 텍스트의 가독성을 높이거나 가공이미지를 사용하는 경우에는 PNG를 사용하는 것이 좋습니다.
• PNG는 무손실압축을 적용하기 때문에 원분이미지의 훼손이 없습니다. 그렇기 때문에 텍스트가독성은 PNG가 JPG보다 우수합니다. 또한 JPG와 다르게 기본 배경에 투명합니다. 하지만 JPG보다는 더 많은 용량을 차지합니다.

GIF

• GIF(Graphics Interchange Format)GIF의 가장 큰 특징은, 특정색을 투명으로 만들어서 배경위에 겹쳐서 표현할 수 있습니다. 이를 통해서 복수의 이미지를 구현할 수 있어서 애니메이션을 표현할 때 효과적입니다.
• 하지만 256개의 색깔만을 사용할 수 밖에 없다는 한계를 가지고 있습니다. 이 이상의 색으로 GIF 변환을 할 경우에는 이미지의 손상이 발생할 수 있습니다.
• GIF 규격으로 압축된 이미지 파일은 원본 이미지의 품질을 손상시키지 않고도 파일 용량을 원본의 40% 수준으로 줄일 수 있어 저장 장치의 공간을 절약할 수 있고 네트워크 환경에서 보다 빠르게 이미지 데이터를 전송할 수 있습니다.

Vector Image File

Vector 이미지는 수학적인 곡선과 도형의 정보로 이미지를 표현하는 형식입니다. SVG (Scalable Vector Graphics)가 가장 일반적인 Vector 이미지 형식입니다. Vector 이미지는 해상도에 영향을 받지 않으며, 얼마나 크게 확대하든 이미지의 선명도와 품질이 유지됩니다. 따라서 로고, 아이콘, 일러스트레이션 등에 적합하며 편집이 용이합니다.

 

SVG(Scalable Vector Graphics)

1. 벡터 기반: SVG 이미지는 수학적인 곡선과 도형 정보를 사용하여 이미지를 표현합니다. 이는 이미지의 확대 또는 축소에 따른 품질 손실 없이 언제든 크기를 조절할 수 있음을 의미합니다.
2. 크기 조절 가능: SVG 이미지는 해상도에 영향을 받지 않으며, 얼마나 크게 확대하든지 이미지의 선명도와 품질이 유지됩니다.
3. 텍스트와 그래픽 통합: SVG는 텍스트와 그래픽을 함께 사용하는 것을 용이하게 합니다. 이로써 웹에서 상호작용적인 그래픽과 텍스트를 결합하여 표현할 수 있습니다.
4. 투명도 지원: SVG는 투명도를 지원하므로 배경을 투명하게 처리하여 다른 요소나 배경 이미지와 조합할 수 있습니다.
5. 편집 용이성: SVG 이미지는 텍스트 파일로 저장되며, 이를 텍스트 편집기로 열어 직접 편집할 수 있습니다. 따라서 이미지를 수정하거나 원하는 대로 조작하기 용이합니다.
6. 애니메이션 가능: SVG는 CSS나 JavaScript를 활용하여 애니메이션 효과를 부여할 수 있습니다. 이로써 웹 상에서 동적인 그래픽을 생성할 수 있습니다.
7. 웹에서 널리 지원: 대부분의 웹 브라우저는 SVG 형식을 지원하므로 웹 사이트에서 벡터 기반의 그래픽을 사용하기에 적합합니다.
8. 저용량: SVG 이미지 파일은 일반적으로 다른 래스터 이미지 형식보다 파일 크기가 작습니다. 이는 텍스트 기반의 형식이기 때문에 파일 크기가 상대적으로 작다는 장점을 가집니다.

SVG 파일은 주로 아이콘, 로고, 그래픽, 차트 등을 나타내는 데 사용되며, 웹 및 그래픽 디자인 분야에서 널리 활용됩니다.

웹 개발 시 SVG 의 가장 큰 장점은 HTML, CSS, JAVASCRIPT 와 함께 동작할 수 있다는 것입니다.

<svg class="a" viewBox="0 0 24 24">
  <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>

svg 코드

https://codepen.io/mygumi/pen/EopjRg → 해당 링크를 접속하면 svg 이미지를 확인할 수 있습니다

위의 예시와 같이 svg파일은 jpeg나 png 처럼 별도의 파일이 존재하지 않아도, 단순히 코드로만 구현하기 때문에 웹 개발시에 효과적입니다. svg 태그를 HTML 과 함께 활용하면 더 효과적으로 웹을 통해서 이미지를 나타낼 수 있습니다.

SVG를 활용하기 위해서는 수학적인 능력이 상당히 요구가 된다는 단점이 있습니다.

단순한 이미지는 크게 어려움이 없지만 vector나 gradient, transform을 사용하는 경우에 직접 svg코드를 조작하여 원하는 이미지를 생성하는 것은 어려운 일입니다. 그렇기에 일반적으로 SVG는 로고 혹은 단순한 이미지에 많이 활용이 됩니다.

대부분의 상황에서 JPG, PNG보다 SVG를 사용하는 것은 좋지만 항상 그런것은 아닙니다. 너무 복잡한 SVG는 비효율적일 수 있습니다. 많은 모양, 색상, 그라디언트를 포함하여서 파일 크기가 JPG나 PNG 보다 커지는 경우가 종종 있기 때문에 단점이 될 수 있습니다.