기본 콘텐츠로 건너뛰기

JPG PNG GIF WEBP 이미지파일 확장자 정보 및 변환

    목차

JPG PNG WEBP 이미지파일 확장자 정보 및 변환에 관련된 여러 정보들을 정리하였습니다. 이미지파일을 웹에 업데이트하면서 여러가지 이미지 파일에 대한 개념 및 정보들을 살펴볼 수 있을 것 입니다 



1. 이미지파일

우리가 인터넷에서 보는 모든 이미지 및 영상등을 어떤 특정한 서버에서 송출된 이미지파일 형태등으로 저장되어 인터넷에서 방문자들이 보게하는 방식으로 되어 있습니다. 간략하게 말씀을 드리면 웹페이지에 접속하면 이미지파일을 로딩하여 이미지를 보는 방식으로 우리는 해당 사이트의 이미지를 볼 수 있게 되는 것입니다. 


간단하게 보시면 네이버 같은 포털 웹사이트들에도 이미지가 있고 실제로 해당 이미지 근처에서 마우스 오른쪽 클릭하시면 다음과 같이 이미지를 새탭에서 열거나 다른이름로 저장하거나 복사하고 주소를 복사하는등의 아래와 같은 것들을 살펴볼 수 있기도 합니다. 



이미지파일


이렇게 보시는것과 같이 해당 링크로 이동을 하는데 이미지파일을 로딩하도록 하고 해당 이미지를 화면에서 보고 클릭하거나 혹은 저장을 하기도 할 수 있다는 것을 볼 수 있습니다. 이처럼 웹사이트의 이미지들은 다양하게 활용되어 우리가 보는 화면에서 이미지로 나타나는 것을 살펴볼 수 있을 것입니다. 


이러한 이미지파일은 다양한 형태로 만들어지며 JPG, JPEG, PNG, GIF, WEBP 등등 다양한 형태로 살펴볼 수 있는데요. 아래는 다음과 같이 이미지파일 확장자에 따른 이미지 파일의 특징 및 관련 정보들을 간략하게 살펴볼 수 있도록 정리를 해보려고 합니다. 





2. JPG PNG WEBP 이미지파일 확장자 정보

이미지파일 확장자는 다양한 이미지파일 형태에 따라서 사용이 됩니다. JPG, JPEG, PNG, GIF, WEBP 등등 다양한 형태가 있는 만큼 각각의 특징 및 기타 관련 정보들을 다음과 살펴볼 수 있을 것입니다. 


1) JPG (JPEG)

JPG는 웹에서 표준으로 사용되는 그래픽파일의 확장자를 말합니다. 이미지를 저장하는 그래픽 파일 포맷 중의 하나로 압축률이 가장 뛰어난 방식으로 주로 디지털카메라 같은 것들에서 사진을 찎을 때 그리고 인터넷등의 전송용으로 가장 많이 활용되는 방식입니다. 


이 방식은 JPEG 압출방식으로 이용하여 압축한 이미지 파일에 JPG라는 이름으로 파일확장명이 정해지는데요. (JPG 또는 JEPG 확장자) 이러한 부분으로 인해서 주로 많은 커뮤니티등 다양한 곳에서 이미지업로드를 하는때에 JPG라고 하는 명사가 활용될 정도로 유명한 확장자이기도 합니다. 


JPEG 는 Joint Photographic Experts Group 의 약자로 사진등의 정지화상을 통신에 사용하기 위해서 압축하는 기술의 표준으로 JPEG 위원회에 의해 개발되었고 사진이나 예술분야의 작업에서 장점을 나타내는 방식이기도 합니다. 


데이터 압축효율이 좋은 편이며 JPEG는 1600만 색상을 표시할 수 있어 고해상도 표시장치에도 적합합니다. 또한 이미지를 만드는 사람이 이미지의 질과 파일의 크기를 조절할 수 있다는 장점들도 가지고 있습니다. 이러한 이유로 ISO (국제표준화기구) 및 ITU-TSS 에서 국제표준으로 정하고 있기도 합니다. 


다만 이미지 압축률에 따라서는 이미지의 질이 낮아질 수 있으며 용량대비 가장 많이 사용되는 인터넷 비트맵 포맷이지만 PNG와 같은 비손실 압축포맷에 비하면 정보손실 (일명 이미지가 깨진다) 라고 말하는 현상이 발생하는 단점들이 있기도 합니다. 특히 복잡한 패턴 및 색상이 포함되는 경우, 문자와 선 그리고 세밀한 격자등 고주파성분이 많은 이미지 변환에서는 PNG등에 비해서 불리하고 나쁜 품질이 보인다고 알려져 있기도 합니다. 



2) PNG 

PNG (Portable Network Graphics) 는 웹에서 최상위 비트맵 이미지를 구현하기 위해서 W3C에서 제정한 파일 포맷을 말합니다. 웹상 표준이미지파일 포맷 GIF 대안으로 개발되었으며 무손실압출포맷을 채택하여 32비트 트루컬러를 표현할 수 있게 된 이미지파일확장자로 알려져 있습니다. 


최근에 사용되는 보편적인 그림파일의 형식이기도 하며 과거 몇몇 큰 파일로 인한 단점들을 개선하여 압축효율부분에서도 많은 개선들이 있어왔습니다. 무손실 압축포맷중에서는 압축효율이 좋으며 이미지가 뭉개지는 JEPG 그리고 256색이라는 한계를 가진 GIF에 비해서 디자인작업을 하는 경우에는 PNG가 가장 선호되기도 합니다. 


PNG는 무손실 이미지 포맷으로 여타 이미지에 비해서 용량이 큰 편이고 이것을 개선하기 위해서 용량을 최적화하는 몇몇 알고리즘이 사용됩니다. 또한 24비트의 이미지를 처리하면서 트루컬러를 지원하고 인터넷상에서 GIF 및 JPEG에 비해서 빠른 화면출력도 가능하다고 알려져 있습니다. 게다가 좀더 선명한 그래픽을 표현하고 웹에서 반투명 (누끼 같은것들) 을 사용할 경우 유일한 방법처럼 사용되기 때문에 많이 활용도가 높은 편입니다. 


다만 GIF의 애니매이션 기능은 없으며 용량이 크다는 단점들을 가지고 있기도 합니다. 



3) GIF 

GIF 는 Graphics Interchange Format 의 줄임말로 이미지 전송을 빠르게 하기 위한 압축방식중의 하나이자 파일 확장자입니다. 미국의 컴퓨서브 (Compuserve) 에서 개발하여 PC 통신등에서 주로 많이 사용되기도 하였습니다. 


JPG포맷이 개발되기 전까지 그림파일의 대부분 이 형식으로 널리 사용되었다고 하는데요. 이후에 GIF 알고리즘 특허소송등으로 인하여 PNG 개발과 PNG가 널리 보급되면서도 덜 사용되가다 최근에는 저용량이미지 및 움짤등으로 주로 사용되고 있는 이미지 파일 형식입니다. 


비손실 압축 알고리즘을 사용하는 무손실 압축 포맷이며 포맷자체가 256색상 (8비트) 밖에 지원하지 않는다는 특징을 가지고 있습니다. 이러한 오래된 기술이라는 특징 때문에 색상표현력의 단점 그리고 화질의 열화등 여러 단점들을 가지고 있습니다. 


다만 여전히 지원하는 프로그램들이 많아서 호환성이 좋으며 애니매이션 구현이 매우 쉽다는 점으로 인해서 주로 움직이는 이미지에 많이 활용이 되고 있는데요. 여러 그림을 하나에 담아서 지정된 시간 간격으로 보여줄 수 있는 차별화된 애니메이션 기능과 투명도 설정기능등으로 여전히 웹에서는 많이 사용이 되고 있기도 합니다. 


애니메이션 부분에서 APNG,, WebP, BGF등의 파일형식이 있지만 브라우저성향에 따라 지원이 달라져서 공통지원되는 GIF가 많이 활용되고 있기도 합니다. 또한 동영상인 MP4로 전환되는 경우들도 있습니다. 



4) WEBP

WEBP (웹피) 이미지 포맷은 2010년 구글이 개발한 웹 사용이미지 포맷입니다. 이름그대로 Web을 위해서 만들어진 효율적인 이미지포맷이며 최적화된 이미지 포맷으로 인터넷속도향상등에 도움이 된다고 알려져 있는 이미지포맷이기도 합니다. 


WEBP 는 기존 이미지포맷들인 GIF / JPG / PNG 를 전부 대체할 수 있는 특징을 가지고 있으손실압축 및 비손실압축을 모두 지원한다고 알려져 있습니다. 이러한 특징에 따라서 웹피이미지는 JPEG방식에 비해서 25~35% 정도 용량을 작게 할 수 있으며 무손실인 PNG에 비해서는 용량을 26% 줄일 수 있다고 알려져 있기도 합니다. 또한 GIF에 비해서는 1600만가지 색상을 지원하여 품질상승을 기대할 수 있는 장점이 있기도 합니다. 


다만 윈도우의 기본 사진 뷰어 사진앱을 완벽하게 지원하지 않는등 호환성이 매우 낮은것이 단점으로 알려져 있는데요. WEBP 확장을 설치하여 Microsoft Edge 브라우저에서 열 수 있다 라던가 Apple 플랫폼에서의 호환성문제등이 심각한 단점들로 지적되고 있기도 합니다. 하지만 최근에는 이런 부분들에서 조금 호환성이 좋아지는 모습을 보여지기도 합니다. 


앞으로 WEBP는 GIF의 단점을 개선하여 파일크기가 작고 색상 수 제한도 없어서 색상이 깨지지 않는등 앞으로 차세대 이미지포맷으로 주목을 받고 있는데요. 다만 여러 호환성부분에서의 약점이 개선되지 않는이상 기존의 이미지포맷들을 완벽하게 대체하는 모습을 보여주지는 못하는 점이 단점이 될 수 있습니다. 



5) HEIC 등등 다양한 이미지확장자

최근에는 위와 같은 여러 이미지포맷 이외에도 다양한 이미지파일확장자들이 사용되는 경우들을 살펴볼 수 있습니다. 웹서비스 발전에 따라서 위에 주로 사용되는 이미지확장자들의 단점을 개선하고 있는것인데요. 


다만 위와 같은 것들이 여러 이미지포맷에서 호환성이 부족하고 기능적인 부분에서 완벽하게 위에 있는 여러 파일들을 대체하는 것이 어렵다는 점은 단점으로 꼽히고 있으며 사용에 있어서 어려움으로 작용하기도 합니다.


그럼에도 불구하고 HEIC와 같은 애플에서 주로 사용하는 이미지 포맷방식은 매우 주목해볼만한 것이라고 할 수 있는데요. 


HEIF 방식은 비디오표준을 만드는 MPEG그룹이 개발한 것으로 비디오코텍 HEVC를 기반으로 만들어진 방식입니다.  뛰어난 압출효율을 바탕으로 APPLE 에서 HEIF 방식을 채택하고 있으며 스마트폰 점유율 및 출하량 1위에 빛나는 애플이 사용하는 만큼 모바일환경에서 변화를 예고하고 있는 이미지파일 확장자이며 웹피 (WEBP) 에서 비해서도 장점을 가지고 있는 만큼 앞으로의 변화를 이끌 것으로 기대해볼 수 있을 것입니다. 몰론 여전히 윈도우등에서 사용이 불가한 호환성의 문제는 있지만 말이죠. 




3. 이미지파일 확장자 변환

디자인을 하면서 만들어내는 내용물은 웹등 온라인에서 사용하기 위해서는 파일확장자를 활용하여 만들어내고 그것을 서버에 저장하고 보여주는 방식으로 작동하고 있습니다. 따라서 파일확장자를 정확하게 이해하고 해당 내용에 따라서 장점 및 단점이 있음을 알고 사용하는 것이 필요할 것입니다. 


그리고 이미지파일의 경우에 각각 활용에 따라서 변환을 하여 사용해야 하는 경우들이 있는데요. 그런 경우에는 무료로 이미지 파일들을 변환해주는 곳에서 간단하게 변환하여 사용을 하실 수 있습니다. 


관련 정보들을 추가 업데이트를 진행할게요. 



댓글

이 글도 관심 있으실 것 같아요!

시각디자인과 분야 및 공부 커리큘럼 정보

시각디자인과 커리큘럼 정보로 정리해봤습니다. 시각디자인에 그리고 디자이너로 활약하기 위한 여러 공부들에 대한 정보들을 살펴볼 수 있을 것입니다. 이를 통해서 시각디자인을 이해할 수 있습니다 1. 시각디자인과  시각디자인과는 2D와 3D등 다양한 매체를 통해 전달되는 디자인들에 관련된 학과입니다. 시각정보매체의 발달에 따라서 관련 분야가 넓어지고 있으며 창조적이고 능동적인 전문디자이너로 활약할 수 있는 공부를 할 수 있습니다.  이러한 시각디자인영역은 대중과의 커뮤니케이션 효과를 극대화 하며 시각언어로 메시지를 작성 및 전달하여 수용자의 태도나 행동에 영향을 미치는 디자인 영역을 말하고 있는데요.  시각적인 실험과 조형적인 탐구를 통하여 다양한 디자인적인 부분을 활용하며 과학기술 발전에 따라서 전통적인 인쇄매체를 비롯하여 영상과 애니메이션, 컴퓨터그래픽스, 멀티미디어, 모바일에 이르는 다양한 시각디자인 영역에서의 공부를 살펴볼 수 있습니다.  시각디자인과에 대해서는 아래와 같은 분야들에 진출하는 경우가 많으며 이러한 분야들을 통해서 다양하게 시각디자인과가 무엇인지를 이해해볼 수 있을 것입니다.  그래픽디자인 (Graphic Design) 편집 및 일러스트레이션 (Illustration) 브랜드 디자인 패키지 디자인 영상 디자인 광고 디자인 위와 같은 분야에 진출하기 위한 공부로 시각적인 디자인분야에 대해서 배우는것이 바로 시각디자인과라고 할 수 있는데요. 다양한 공부들을 하는것에 대해서 살펴볼 수 있을 것입니다.  2. 시각디자인과 공부 및 커리큘럼 시각디자인과 공부 및 커리큘럼에 대하여 홍익대학교 미술대학 시각디자인과를 기준으로 다음과 같이 살펴볼 수 있습니다.  우선 시각디자인과는 1학년 과정에서는 미술과 디자인의 기초과정과 실기 및 이론을 습득하며, 2학년 과정에서는 영상, 사운드, 사진, 일러스트등의 다양한 과정을 다루고 있으며 시각디자인의 광범위한 기술과 기법을 습득합니다.  3학년과정부터는 각 분야의 심화과정으로 보다 전문화된 과정으로 학습하며, 4학

그래픽 디자인 기본용어와 웹디자인 공부

그래픽 디자인 기본용어와 웹디자인 공부를 위한 기초정보들을 정리하였습니다. 개인적으로 공부를 하면서 웹디자인을 비롯하여 온라인 디자인에 필요한 여러 자료들을 정리하여 살펴볼 수 있습니다.  1. 그래픽 디자인 블로그 그래픽 (Graphic) 이란 그림이나 도형, 사진등 다양한 시각적 형상이나 작품을 통틀어서 이르는 말이라고 정의하고 있습니다. 사람은 눈으로 어떤 정보들을 확인하기 때문에 이러한 그래픽이라는 단어는 매우 중요하게 활용되는데요. 특히 온라인에서는 대부분의 정보들을 눈으로 확인하고 전달하고 획득하게 되므로 이러한 그래픽에 관련된 디자인들이 매우 중요하게 활용되고 있기도 합니다.  이러한 관점에서 그래픽 디자인은 여러가지 인쇄기술의 특성을 이용하여 시각적 표현효과를 꾀하는 디자인이라고 정의할 수 있는데요. 과거에는 주로 인쇄기술에 국한되었지만 최근에는 컴퓨터와 스마트폰등의 IT 기기들 보급에 따라서 일러스트와 컴퓨터 및 스마트폰 화면에까지 이러한 그래픽 디자인들이 중요하게 활용되고 사용되고 있습니다.  이 블로그에서는 온라인에서 주로 활용되는 웹 디자인을 비롯하여 그래픽 디자인에 관련된 여러 내용들을 정리하기 위해서 개설하였고 그 내용들을 정리하려고 하는데요. 여기에 더해서 최근에 많이 활용되고 있는 영상 콘텐츠에 관련된 영상디자인들까지 여러가지 내용들을 정리하기 위해서 해당 블로그를 살펴볼 수 있을 것입니다.  사실 저도 공부를 해가면서 알아가는 내용이기 때문에 약간 틀린 부분도 있을 수 있습니다 다만 하나하나 배워가면서 서로 공유하고 정리하고 하는데 도움이 되시길 바랍니다. 처음부터 잘하는것은 없으니까요. 디자인도 마찬가지로 천천히 하나씩 해나가보겠습니다.  2. 그래픽 디자인 기본용어 그래픽 디자인에 관련된 여러 용어들을 살펴볼 수 있습니다.  그래픽 디자인 : 과거에는 인쇄된 디자인이라는 의미부터 오늘날에는 평면적인 디자인의 시각효과를 뜻함, 시각을 통하여 전달하는 정보를 포괄하여 살펴볼 수 있으며 인쇄매체를 비롯하여 컴퓨터 그래픽을 이용한