jpg? png? 그게 뭔데요, 이미지 파일 형식 이거 하나로 끝

이미지 파일 형식 차이, 사실 저도 처음엔 하나도 몰랐어요. 대학교 1학년 때 과제 낼 때마다 그냥 다 jpg로 저장했거든요. 배경 투명하게 해야 하는 로고 작업이었는데 jpg로 저장하니까 배경이 하얗게 다 깔려서 나오는 거예요. 분명 배경 지우고 저장했는데 왜 자꾸 하얗게 나오지, 하면서 몇 시간을 헤맸는지 몰라요 ㅠㅠ 나중에 알고 보니 png를 써야 배경이 투명하게 저장된다는 그 기본적인 걸 몰랐던 거예요. svg는 그보다 더 늦게, 진짜 일 시작하고 나서야 처음 알았어요.

지금 생각하면 별거 아닌데, 그땐 이미지 파일 형식 차이 하나 몰라서 시간을 진짜 많이 날렸어요.
인쇄소에 파일 잘못 넘겨서 다시 작업한 적도 있고, 로고 크기 키웠다가 화질이 다 깨져서 처음부터 다시
그린 적도 있어요. 오늘은 그때 저처럼 헤매고 계실 분들을 위해서 jpg, png, svg 차이랑 실무에서 흔한
실수까지 딱 정리해드릴게요.

jpg, 사진엔 이게 국룰인 이유

이미지 파일 형식 중에 가장 흔하게 쓰는 게 jpg예요. 사진처럼 색이 복잡하고 그라데이션 많은 이미지에 잘 맞는 형식이거든요. 용량이 상대적으로 가벼워서 웹에 올릴 때도 부담이 적고, 블로그 대표 이미지나 인스타그램 피드용 사진은 대부분 jpg로 저장하면 돼요.

근데 딱 하나, 배경을 투명하게 저장할 수 없다는 게 jpg의 제일 큰 단점이에요. 로고나 아이콘처럼 배경 없이 써야 하는 이미지를 jpg로 저장하면 무조건 흰색이나 특정 색 배경이 깔려버려요. 제가 1학년 때 겪었던 문제가 바로 이거였어요. 포토샵에서 배경 지우기까지 다 해놓고 마지막에 습관처럼 jpg로 저장 눌렀다가, 다시 열어보면 배경이 하얗게 채워져 있는 거예요. 이미지 파일 형식 차이를 몰랐던 거죠.

png, 배경 투명하게 저장하고 싶을 때

png는 배경을 투명하게 저장할 수 있는 형식이에요. 로고, 아이콘, 워터마크, SNS 프로필 이미지처럼 다른 배경 위에 얹어야 하는 이미지엔 png가 정답이에요. 소상공인분들이 인스타그램 카드뉴스 만들 때 로고나 텍스트만 따로 png로 준비해두면, 배경 이미지 바뀌어도 계속 재사용할 수 있어서 훨씬 편해요.

다만 jpg보다 용량이 좀 더 큰 편이라, 사진처럼 큰 이미지를 통째로 png로 저장하면 용량이 훅 커질 수 있어요. 예전에 다뤘던 이미지 용량 글에서도 이 부분을 짚었었는데, 형식이랑 용량은 항상 같이 따라오는 문제더라고요. 그래서 저는 실무에서 이렇게 나눠요 — 사진은 jpg, 배경 없어야 하는 그래픽 요소는 png. 이거 하나만 기억해도 헷갈릴 일이 확 줄어요.

svg, 로고나 아이콘엔 무조건 이거

svg는 조금 결이 달라요. jpg나 png는 사진처럼 아주 작은 점(픽셀)들이 모여서 만들어진 이미지인데, svg는 점과 선의 좌표값으로 그려지는 벡터 파일이에요. 그래서 아무리 확대해도 화질이 깨지지 않아요.

로고를 명함에도 쓰고, 나중에 대형 배너나 현수막에도 써야 하는 경우라면 svg(또는 ai, eps 같은 벡터 파일)로 원본을 갖고 있는 게 훨씬 안전해요. 저도 실무 시작하고 나서야 이걸 알았는데, 그전엔 로고 파일을 png로만 받아서 크게 늘렸다가 계단 현상(화질 깨짐)이 나서 다시 만들어달라고 부탁드린 적도 있어요. 알고 나니까 왜 디자이너들이 로고 넘길 때 벡터 파일도 같이 챙겨주는지 이해가 되더라고요.

webp는 또 뭔데요

요즘 워드프레스 이미지 최적화 플러그인(Smush 같은 거요) 쓰시다 보면 webp라는 형식도 한 번쯤 보셨을 거예요. webp는 구글이 만든 형식인데, jpg나 png보다 화질은 비슷하게 유지하면서 용량은 훨씬 가볍게 저장돼요. 그래서 요즘 워드프레스 블로그 속도(로딩 속도) 신경 쓰시는 분들은 이미지를 자동으로 webp로 변환해주는 플러그인을 많이 쓰세요. 다만 편집 프로그램(포토샵, 일러스트레이터)에서 직접 다루긴 아직 불편해서, 원본은 jpg나 png로 작업하고 발행 직전에 webp로 자동 변환하는 흐름이 제일 무난해요.

실무에서 자주 하는 실수 3가지

이미지 파일 형식 차이를 몰라서 생기는 실수, 사실 저도 다 겪어본 것들이라 여기서 짚고 넘어갈게요.

① 로고를 jpg로만 받아서 배경이 안 지워짐 로고 작업 의뢰하실 때 “png랑 svg(또는 ai)로 같이 주세요”라고 미리 말씀해두시면, 나중에 배경 지우거나 크기 키울 때 다시 요청할 일이 없어요.

② png로 저장했더니 용량이 너무 커짐 사진처럼 배경이 복잡한 이미지를 png로 저장하면 용량이 급격히 커져요. 배경이 필요 없는 그래픽 요소만 png로, 나머지는 jpg로 나눠서 저장하는 습관 들이시는 게 좋아요.

③ 로고 크기 키웠다가 화질이 깨짐 png나 jpg로 받은 로고를 원본보다 크게 늘리면 무조건 화질이 깨져요. 처음부터 svg나 ai 원본 파일을 챙겨두셔야 나중에 명함, 배너, 현수막 어디에 써도 안전해요.

이미지 파일 형식, 그래서 뭘 언제 써야 할까

형식	배경 투명	확대해도 깨끗함	이럴 때 사용
jpg	❌	❌	사진, 일반 웹 이미지
png	✅	❌	로고, 아이콘, 워터마크
svg	✅	✅	로고, 아이콘, 인쇄용 대형 작업물
webp	✅	❌	웹 로딩 속도 최적화용

정리하면 이래요. 사진은 jpg, 배경 투명하게 필요하면 png, 로고나 아이콘처럼 크기 상관없이 깨끗하게 써야 하면 svg! 여기에 웹 속도까지 신경 쓰고 싶으면 webp까지. 이 네 가지만 기억해두셔도 실무에서 이미지 파일 형식 차이 때문에 헷갈릴 일은 거의 없어요.

혹시 이미지 용량 때문에 고민이셨다면, 예전에 정리해둔 [이미지 용량 줄이는 법] 글도 같이 보시면 도움 될 거예요. 파일 형식이랑 용량은 항상 세트로 따라다니는 문제라, 두 글 같이 보시면 훨씬 정리가 잘 될 거예요.

파일 형식 감 잡으셨으면, 로고나 아이콘처럼 벡터 파일이 필요한 작업은 어도비 일러스트레이터로 작업하시는 걸 추천드려요. 벡터 기반이라 svg, ai, eps 파일을 자유롭게 다룰 수 있어요.