웹에 맞는 이미지 형식 고르기

먼저 따져 볼 세 가지 질문

실제 웹사이트에서 이미지마다 형식을 고를 때는 결국 다음 세 가지 질문으로 정리됩니다.

1. 무엇을 보여 주는 이미지인가요? 사진에는 JPG, 손실 WebP, AVIF 같은 손실 형식이 어울립니다. 자연스러운 디테일 속에 작은 오차가 묻히기 때문입니다. 스크린샷, 글자, 차트, 단색 면으로 된 그래픽은 가장자리가 뚜렷해서 손실 압축을 하면 눈에 띄는 번짐이 생길 수 있습니다. 그래서 무손실 형식(PNG, 무손실 WebP)이 알맞고, 도형으로 그린 그래픽이라면 SVG가 알맞습니다.
2. 투명도나 애니메이션이 필요한가요? JPG는 둘 다 지원하지 않습니다. PNG, WebP, AVIF는 완전한 알파 채널을 저장할 수 있어 가장자리를 부드럽게 표현할 수 있습니다. GIF의 픽셀은 완전히 투명하거나 완전히 불투명한 두 가지뿐이라서, 색이 있는 배경 위에서는 곡선 가장자리가 계단처럼 깨지거나 테두리가 끼어 보일 수 있습니다. GIF, WebP, AVIF, APNG(애니메이션 PNG)는 애니메이션을 담을 수 있지만, 짧은 동영상이 GIF보다 훨씬 작은 경우가 많습니다.
3. 어디에 게시하나요? 직접 만드는 HTML 페이지에서는 여러 형식을 함께 제공할 수 있습니다. 콘텐츠 관리 시스템(CMS), 쇼핑몰, 업로드 양식은 어떤 파일을 받을지 스스로 정하고 파일을 자체적으로 변환하기도 하므로, 해당 서비스의 최신 문서를 확인하세요. 이메일 프로그램은 브라우저보다 지원 범위의 차이가 크기 때문에 뉴스레터에는 JPG와 PNG가 더 안전합니다.

각 형식의 작동 방식은 JPG vs PNG vs WebP vs AVIF를 참고하세요.

콘텐츠에 따른 형식 선택표

직접 만든 페이지에서 AVIF나 WebP를 제공할 때는 이를 표시하지 못하는 브라우저와 앱을 위해 JPG나 PNG 버전도 함께 두세요. 플랫폼에 파일을 하나만 올릴 수 있다면 대개 대체 형식 열에 있는 형식이 안전한 선택입니다. 파비콘에는 따로 지켜야 할 규칙이 있으니 파비콘 크기, 형식, HTML 태그를 참고하세요.

웹 페이지에서 GIF처럼 반복 재생되는 움직임이 필요하다면 autoplay, loop, muted, playsinline 속성을 붙인 음소거 <video>로 대신하는 방법이 흔히 쓰입니다. 브라우저는 대체로 음소거된 동영상의 자동 재생을 허용하기 때문입니다. 이메일의 경우 일부 데스크톱용 Outlook은 애니메이션 GIF의 첫 프레임만 보여 주므로, 핵심 메시지는 첫 프레임에 넣으세요.

대체 형식과 함께 WebP나 AVIF 제공하기

HTML을 직접 작성하는 페이지에서는 <picture> 요소를 사용하면 각 브라우저가 지원하는 형식 가운데 가장 먼저 나오는 것을 가져가게 할 수 있습니다.

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="토마토 파스타 한 그릇" width="1600" height="1200">
</picture>

브라우저는 <source> 요소를 순서대로 읽으면서 type을 지원하지 않는 요소는 건너뜁니다. 꼭 있어야 하는 <img> 요소에는 대체 텍스트(alt)와, 브라우저가 미리 자리를 잡아 둘 수 있게 해 주는 너비와 높이가 들어가며, 조건에 맞는 source가 없을 때는 이 요소의 파일이 표시됩니다. img { max-width: 100%; height: auto; } 같은 CSS를 함께 쓰면 좁은 화면에서도 이미지가 화면에 맞게 줄어들면서 그 비율을 유지합니다. 여러 크기도 함께 제공하려면 srcset에 파일마다 너비를 적고 sizes 속성을 추가하세요. 자세한 내용은 이미지 크기 조절: 픽셀, 가로세로 비율, DPI에서 설명합니다.

많은 CMS와 이미지 CDN은 WebP나 AVIF 사본을 만들어 방문자마다 알맞은 것을 골라 보낼 수 있습니다. 사용하는 서비스에 이런 기능이 있다면 이미 강하게 압축한 파일 대신 고품질 JPG나 PNG를 올리고 변환은 서비스에 맡기세요. 그래야 이미지가 두 번 압축되지 않습니다.

예시: 기사 한 편에 들어가는 이미지

레시피 기사에 이미지가 세 장 있고, 본문 열의 너비가 최대 760 CSS 픽셀이라고 해 봅시다.

• 대표 사진. 휴대폰으로 찍은 원본은 4032 × 3024픽셀, 약 1,220만 화소입니다. CSS 픽셀 하나에 기기 픽셀이 두 개인 화면에서 760픽셀 너비의 열을 채우려면 가로 약 1,520픽셀이 필요하므로, 1600 × 1200으로 줄이면 4:3 비율을 유지하면서 192만 화소, 즉 원본의 약 16%가 됩니다. 먼저 크기를 줄인 다음 AVIF나 WebP로 저장하고 대체용 JPG도 함께 만드세요. 원본 크기 그대로인 파일은 1600 × 1200 버전보다 픽셀 수가 6배 넘게 많은데, 브라우저는 그 대부분을 축소하면서 버리게 됩니다.
• 배경이 투명한 로고. 디자이너에게 받은 PNG는 1000 × 500픽셀이고 너비 200 CSS 픽셀로 표시되므로, 400 × 200이면 CSS 픽셀 하나에 기기 픽셀이 두 개인 화면까지 감당할 수 있습니다. PNG나 WebP로 유지하세요. JPG로 저장하면 투명한 영역이 단색으로 채워져서 색이 있는 헤더 위에 상자처럼 보입니다. 디자이너가 SVG로 내보낼 수 있다면 그편이 더 좋습니다.
• 타이머 앱 스크린샷. 글자와 단색으로 이루어져 있으므로 PNG로 저장하세요. JPG로 저장하면 글자 주위에 잡티가 생길 수 있는데, 독자는 사진 속 작은 오차보다 이런 잡티를 더 쉽게 알아챕니다.

LeedyBox 이미지 변환으로 형식 바꾸기

이미지 변환은 이미지 데이터를 LeedyBox에 업로드하지 않고 브라우저 안에서 이미지 한 장 또는 여러 장의 형식을 바꿉니다.

1. "파일을 선택하거나 이곳으로 드래그 앤 드롭하세요"를 클릭하거나, 그 영역에 PNG, JPG, WebP, BMP, GIF, AVIF 파일을 끌어다 놓으세요. HEIC나 SVG 같은 다른 형식의 파일과 브라우저가 디코딩할 수 없는 파일은 메시지와 함께 거부됩니다.
2. 파일마다 형식 메뉴가 따로 생기며(넓은 화면에서는 앞에 "To:"라고 표시됩니다), 처음에는 JPG로 설정되어 있습니다. 파일별로 JPG, PNG, WEBP, BMP, AVIF, ICO 중에서 고르거나, "일괄 변환 옵션:" 옆의 "모든 형식을 다음으로 설정..." 메뉴로 모든 파일에 한꺼번에 적용하세요.
3. "변환 및 다운로드"를 클릭하세요. 파일이 하나면 logo_converted.webp 같은 이름으로 저장되고, 여러 개면 leedybox_converted_images.zip 파일 하나로 받습니다.

• ICO를 제외하면 픽셀 크기는 그대로 유지됩니다. 먼저 이미지 크기 조절로 크기를 줄이거나, 이미지 압축의 "너비와 높이도 제한"을 사용하세요.
• JPG, WebP, AVIF로 저장할 때 변환기는 0~1 범위의 품질 값 가운데 0.92를 브라우저에 요청하며, 품질 슬라이더는 없습니다. 이 설정은 파일 크기보다 디테일을 우선합니다. WebP도 손실 방식으로 저장된다는 뜻입니다. 무손실 WebP 옵션이 없으므로 스크린샷과 글자 그래픽은 PNG로 변환하세요. 파일을 더 작게 만들려면 품질 슬라이더(기본값 75)와 목표 파일 크기 설정이 있는 압축 도구를 사용하세요. 자세한 내용은 이미지 압축 설정 알아보기를 참고하세요.
• JPG 파일과 이 변환기가 만드는 BMP 파일에는 투명도가 없으므로 투명한 영역은 흰색이 됩니다. 또한 BMP 파일은 압축되지 않아 픽셀당 3바이트(각 행은 4바이트의 배수가 되도록 채워짐)에 54바이트짜리 헤더가 더해집니다. 1200 × 800 이미지는 내용과 상관없이 2,880,054바이트(약 2.9MB)가 되므로, BMP는 웹 페이지에 맞지 않습니다.
• ICO 파일에는 PNG 이미지 한 장이 들어가며 투명도가 유지됩니다. 한 변이 256픽셀보다 긴 이미지는 256 × 256 안에 들어가도록 축소되므로 1000 × 500 로고는 256 × 128이 되며, 그보다 작은 이미지는 크기가 그대로 유지됩니다. 16, 32, 48픽셀 크기를 담은 favicon.ico와 PNG 아이콘, Apple 터치 아이콘이 필요하다면 파비콘 생성기를 사용하세요.
• AVIF는 사용 중인 브라우저가 AVIF 파일을 만들 수 있을 때만 선택할 수 있는데, 현재 AVIF 파일을 만들지 못하는 브라우저가 많습니다. 이 경우 메뉴에 "AVIF (지원하지 않는 브라우저입니다)"로 표시됩니다. 브라우저가 선택한 형식을 만들 수 없으면(WebP 출력도 브라우저에 따라 달라집니다) 메시지가 나타나고 아무것도 저장되지 않습니다. PNG 데이터가 엉뚱한 확장자로 저장되는 일은 없습니다. 파일이 여러 개일 때 이런 실패가 하나라도 생기면 일괄 변환 전체가 중단되어 ZIP 파일이 만들어지지 않습니다.
• 이미지마다 새로 그린 뒤 다시 인코딩하므로 원본의 EXIF 데이터, GPS 위치, 색상 프로필은 옮겨지지 않으며, 애니메이션 GIF, WebP, AVIF는 한 프레임짜리 정지 이미지가 됩니다. 변환기는 SVG, GIF, 애니메이션 파일을 만들지 않습니다.

자주 생기는 문제와 해결 방법

• 투명한 로고 주위에 흰색이나 검은색 상자가 생깁니다. JPG나 투명도가 없는 BMP로 저장했을 가능성이 큽니다. 대신 PNG나 WebP를 사용하세요. JPG에서 투명도가 사라지는 이유도 참고하세요.
• PNG가 원래 JPG보다 훨씬 큽니다. PNG는 JPG의 노이즈와 압축 흔적까지 포함해 모든 픽셀을 정확하게 저장하며, 변환한다고 해서 JPG에서 이미 사라진 디테일이 되살아나지는 않습니다. 사진에는 WebP나 JPG를 사용하세요.
• 업로드 양식에서 WebP나 AVIF를 받지 않습니다. JPG와 PNG만 받는 양식도 있습니다. 사진은 JPG로, 투명한 그래픽은 PNG로 변환하세요. 확장자만 바꾼다고 형식이 바뀌지는 않습니다.
• WebP 파일이 JPG보다 거의 작아지지 않거나 오히려 커집니다. 원래 JPG가 이미 강하게 압축되어 있었을 수 있습니다. 변환기의 품질 0.92는 JPG 자체의 압축 흔적까지 포함해 디테일을 많이 남기는데, 이런 흔적을 저장하는 데에도 바이트가 듭니다. 어느 형식이든 파일이 너무 크다면 아직 카메라 원본 크기 그대로일 수 있습니다. 표시 크기에 맞게 줄인 다음 압축 도구를 사용해 결과를 비교해 보세요.
• 원본보다 색이 칙칙해 보입니다. 변환기는 각 이미지를 브라우저 캔버스에 그리는데, 캔버스는 기본적으로 sRGB로 작동하며 원본의 색상 프로필은 유지되지 않습니다. Display P3나 Adobe RGB처럼 더 넓은 색 공간을 쓰는 사진은 채도가 가장 높은 색 일부를 잃을 수 있으며, 이 차이는 광색역 화면에서 가장 두드러집니다. 사진 편집기에서 sRGB 사본을 내보내 편집기에서 먼저 확인한 다음, 그 사본을 변환하세요.
• 휴대폰으로 찍은 HEIC 사진을 받지 않습니다. HEIC는 변환기가 지원하는 형식이 아닙니다. 많은 휴대폰에서 사진을 JPG로 내보내거나 공유할 수 있으니, 그렇게 만든 사본을 변환하세요.

게시하기 전에 확인할 것

• 페이지를 두 가지 브라우저와 휴대폰에서 열어 보세요. <picture>를 쓴다면 AVIF와 WebP source를 잠시 빼고 대체 형식도 제대로 표시되는지 테스트하세요.
• 새 파일을 원본과 실제 크기로 비교하면서 얼굴, 글자, 그러데이션을 살펴보세요.
• 브라우저 개발자 도구의 네트워크(Network) 패널에서 어떤 파일이 다운로드되었는지, 크기는 얼마인지 확인하세요.
• 사이트에 다크 모드가 있다면 투명한 이미지를 밝은 배경과 어두운 배경 모두에서 확인하세요.
• 원본을 보관해 두고 원본에서 변환하세요. 손실 형식 파일을 다시 저장하면 기존 오차 위에 새 오차가 더해집니다.

자주 묻는 질문