이미지 포맷 설명: PNG·JPG·GIF·WebP·SVG

올바른 이미지 포맷을 고르는 것은 페이지를 더 빠르고 선명하게 만드는 가장 쉬운 방법의 하나입니다. 잘못 고르면 흐릿한 로고나 마땅한 크기의 다섯 배로 무거운 사진을 얻습니다. 여기서는 각 흔한 포맷이 무엇에 강한지 소개해, 이미지에 포맷을 맞출 수 있게 합니다.

두 계열

먼저, 나머지 모든 것을 설명해 주는 구분입니다. 래스터(Raster) 포맷(PNG, JPG, GIF, WebP)은 픽셀 격자를 저장하므로 확대하면 흐려지거나 픽셀이 깨집니다. 벡터(Vector) 포맷(SVG)은 도형을 수식으로 저장하므로 어떤 크기에서도 칼같이 선명하게 유지됩니다. 사진은 항상 래스터이고, 로고와 아이콘은 벡터가 가장 좋습니다.

포맷들

JPG / JPEG

사진을 위해 만들어진 손실 압축. 사진 콘텐츠에 뛰어난 크기, 어디서나 지원되지만 투명도가 없고 과도하게 압축하면 눈에 띄는 아티팩트가 생깁니다. WebP가 선택지가 아닐 때 사진의 기본값입니다.

PNG

투명도를 갖춘 무손실. 로고, 아이콘, 스크린샷, 그리고 날카로운 가장자리·텍스트·평면 색이 있는 모든 것에 완벽합니다. 무손실이라 PNG로 저장한 사진은 크게 나옵니다.

GIF

256색으로 제한된 오래된 포맷으로, 이제는 거의 단순한 애니메이션에만 쓰입니다. 정적 이미지에는 PNG에 밀리고, 애니메이션에는 현대 포맷(애니메이션 WebP나 동영상)이 더 작고 품질이 높습니다.

WebP

모든 것을 하는 현대 포맷: 손실이든 무손실이든, 투명도와 애니메이션까지. 같은 시각적 품질에서 보통 JPG나 PNG보다 25~35% 작은 파일을 만들고, 현행 모든 브라우저가 지원합니다. 오늘날 대부분의 웹 이미지에는 WebP가 최선의 기본값입니다.

SVG

XML로 정의된 벡터 그래픽. 로고, 아이콘, 일러스트에 이상적입니다 — 무한히 확대 가능하고, 단순한 도형은 아주 작으며, CSS로 스타일을 줄 수 있습니다. 사진에는 적합하지 않습니다.

빠른 결정 가이드

• 사진 → WebP(또는 최대 호환성을 위해 JPG)
• 로고나 아이콘 → SVG(래스터 사본이 필요하면 PNG)
• 텍스트가 있는 스크린샷이나 그래픽 → PNG(또는 WebP)
• 투명도가 필요 → PNG, WebP, 또는 SVG
• 단순한 애니메이션 → 애니메이션 WebP

포맷을 골랐다면, 우리 이미지 압축 가이드가 크기를 줄이는 법을 다룹니다. SVG 변환기와 이미지 리사이저로 포맷을 변환하고, 이미지 압축기로 파일을 줄이세요 — 전부 브라우저에서.