JPG, PNG, SVG, WebP, 웹 이미지는 어떤 형식으로 저장할까

웹 이미지는 사진이면 JPG나 WebP, 투명한 배경이 필요하면 PNG나 WebP, 로고나 아이콘처럼 선과 면으로 된 그림이면 SVG로 저장하는 것이 일반적인 기준입니다. 형식마다 압축 방식이 달라, 잘못 고르면 화질이 떨어지거나 파일이 쓸데없이 커져 사이트가 느려집니다. 이미지 형식은 그림을 저장하고 압축하는 규칙입니다.

각 형식은 무엇이 다른가요?

형식	특징	잘 맞는 이미지
JPG	손실 압축, 파일이 작음	사진
PNG	무손실, 투명 배경 지원	투명 배경, 선명한 그래픽
SVG	벡터, 확대해도 깨지지 않음	로고, 아이콘
WebP	높은 압축률, 투명 지원	사진과 그래픽 모두

JPG는 사람이 잘 알아채지 못하는 정보를 버려 파일을 작게 만듭니다. 사진에는 잘 맞지만, 글자나 선명한 경계가 있는 그림에는 경계가 뭉개지는 얼룩이 생길 수 있습니다. PNG는 정보를 버리지 않아 선명하지만 사진을 저장하면 파일이 매우 커집니다.

SVG는 왜 로고에 좋을까요?

SVG는 그림을 점의 집합이 아니라 선과 도형의 수식으로 저장합니다. 그래서 아무리 크게 키워도 깨지지 않고, 작은 아이콘부터 큰 화면까지 같은 파일 하나로 선명하게 보여 줍니다. 단순한 로고나 아이콘이라면 파일 크기도 아주 작습니다. 다만 사진처럼 색과 질감이 복잡한 이미지는 SVG로 표현하기 어렵습니다.

WebP는 무엇이 좋은가요?

WebP는 같은 화질에서 JPG나 PNG보다 파일을 더 작게 만들 수 있는 형식입니다. 사진도, 투명 배경이 필요한 그래픽도 담을 수 있습니다. 파일이 작아지면 페이지가 빨리 열리고 모바일 데이터도 아낄 수 있습니다. 현재 대부분의 주요 브라우저가 WebP를 지원해 웹 이미지 형식으로 널리 쓰이고 있습니다.

이미지 크기는 어떻게 맞추나요?

형식만큼 중요한 것이 크기입니다. 화면에 300픽셀 너비로 보여 줄 이미지를 3000픽셀짜리 원본 그대로 올리면, 사용자는 쓰지 않을 큰 파일을 내려받아야 합니다. 보여 줄 크기에 맞게 줄여서 올리고, 고해상도 화면을 위해 두 배 정도 크기까지만 준비하는 것이 좋습니다. 기기 화면 크기에 따라 다른 크기의 이미지를 보여 주는 방식도 많이 씁니다.

저장할 때 화질은 얼마나 낮춰도 될까요?

JPG나 WebP는 저장할 때 압축 정도를 고를 수 있습니다. 압축을 많이 하면 파일은 작아지지만 화질이 떨어집니다. 대부분의 사진은 압축을 어느 정도 해도 눈으로 차이를 알기 어렵습니다. 몇 가지 압축 정도로 저장해 실제 화면에서 비교해 보고, 차이가 눈에 띄지 않는 가장 작은 파일을 고르면 됩니다. 웹 이미지 최적화 방법은 비건 화장품에서 확인할 수 있습니다.

자주 묻는 질문

투명 배경 사진은 어떤 형식이 좋나요?

PNG나 WebP가 투명 배경을 지원합니다. 파일 크기를 줄이려면 WebP를 검토해 보십시오.

GIF는 아직 쓰나요?

짧은 움직이는 이미지에 쓰이지만 파일이 큰 편이라 동영상 형식이나 움직이는 WebP로 대신하는 경우가 늘고 있습니다.

로고를 PNG로 써도 되나요?

쓸 수 있지만 크기를 키우면 흐려질 수 있습니다. 가능하면 SVG를 함께 준비하는 것이 좋습니다.