이미지 변환

세 가지 형식 고르기

PNG는 무손실입니다. 모든 픽셀이 들어간 그대로 돌아오고, 완전한 알파 투명도를 지원하며, 단색의 평평한 영역을 매우 잘 압축합니다. 그래서 스크린숏, 도표, 로고, 선화, 글자가 들어간 이미지, 투명도가 필요한 이미지에 알맞습니다. 반면 사진에는 좋지 않습니다. 무손실 압축으로는 사진에서 덜어 낼 것이 거의 없어 필요한 크기의 몇 배나 되는 파일이 나옵니다.

JPG는 손실 압축이며 사진을 위해 만들어졌습니다. 눈이 잘 알아채지 못하는 세부, 특히 미세한 색 변화를 버려 연속 톤 이미지를 크게 줄입니다. 투명도는 전혀 지원하지 않고, 날카로운 경계를 다루는 데도 서툽니다. JPG로 저장한 글자와 선화에는 어떤 화질 설정으로도 완전히 없앨 수 없는 번짐이 눈에 띄게 생깁니다.

WebP는 둘 다 해냅니다. 손실 WebP는 비슷한 화질에서 보통 JPG보다 25~35% 작고, 무손실 WebP는 PNG보다 약 4분의 1 작으며, JPG와 달리 투명도를 지원합니다. 이제 모든 브라우저가 지원하며, JPG를 고를 주된 이유로 남은 것은 일부 오래된 데스크톱 소프트웨어와 인쇄 작업 흐름이 아직 WebP를 받지 않는다는 점 정도입니다.

화질 슬라이더가 실제로 하는 일

JPG와 손실 WebP는 이미지를 블록 단위로 변환한 뒤 결과를 양자화하는 방식으로 동작합니다. 굵직한 구조는 정확하게, 세밀한 부분은 대략적으로 남기는 것이죠. 화질 숫자는 그 반올림을 얼마나 과감하게 할지를 정합니다. 무엇에 대한 백분율도 아니며, 같은 숫자라도 인코더마다 의미가 다릅니다.

실제로 쓸모 있는 범위는 좁습니다. 약 90을 넘으면 거의 아무도 알아볼 수 없는 차이 때문에 파일이 빠르게 커집니다. 약 60 아래로 내려가면 하늘 같은 매끄러운 그라데이션에 블록 현상이, 날카로운 경계 주변에 링잉이 생겨 손상이 뚜렷해집니다. 웹용 사진이라면 보통 75~85 사이가 적당하며, 숫자를 믿기보다 결과물을 원본과 실제 크기로 비교해 고르는 것이 올바른 방법입니다.

또 알아 둘 것은 세대 손실입니다. 손실 방식으로 다시 저장할 때마다 조금씩 더 버려지고 그 손실은 누적됩니다. JPG를 열고 조금 고쳐 저장하기를 열 번 반복하면 눈에 띄게 나빠집니다. 항상 이전에 내보낸 파일이 아니라 원본에서 다시 인코딩하고, 이미지를 수정할 일이 있다면 무손실 원본을 보관하세요.

다시 인코딩할 때 사라지는 것

변환은 이미지를 픽셀로 디코딩한 뒤 그 픽셀로 새 파일을 쓰므로, 이미지 데이터가 아닌 메타데이터는 모두 사라집니다. 카메라 모델, 렌즈, 촬영 시각, GPS 좌표를 포함한 EXIF, IPTC 설명과 저작권 필드, 썸네일, 원래 소프트웨어가 붙인 편집 기록 등입니다.

대개는 반가운 일입니다. 휴대폰으로 막 찍은 사진에는 촬영 장소의 정확한 좌표가 들어 있는 경우가 많아, 공개 게시 전에 지우는 것은 현명한 습관입니다. 하지만 저작권 필드나 촬영 날짜가 필요했다면 달갑지 않으니, 둘 중 하나라도 중요하다면 원본을 보관하세요.

주의가 필요한 경우가 하나 있습니다. 회전 정보는 다시 인코딩하기 전에 읽어서 적용하므로, 일부 뷰어에서 옆으로 누워 보이던 세로 사진도 제대로 세워진 채로 나옵니다. 하지만 내장된 ICC 색상 프로파일은 남지 않아서, Display P3 같은 넓은 색역의 사진은 sRGB로 처리되면서 색이 약간 달라집니다. 일반 웹 이미지라면 구분이 안 되지만, 색이 중요한 작업이라면 프로파일을 관리하는 도구로 변환하세요.

변환으로 할 수 없는 것

무손실 형식으로 변환한다고 무언가가 복원되지는 않습니다. PNG로 저장한 JPG는 JPG가 이미 가진 모든 손상을 그대로 안은 채, 더 손실 없이 훨씬 큰 파일에 저장할 뿐입니다. 강하게 압축된 이미지라면 그 손상은 이제 픽셀 속에 있습니다.

형식을 바꾼다고 크기가 줄어들지도 않습니다. 4000픽셀 사진을 WebP로 바꿔도 여전히 폭이 4000픽셀입니다. 웹 페이지용으로 파일을 작게 만드는 것이 목표라면, 실제로 표시될 크기로 리사이즈하는 편이 어떤 형식을 고르는 것보다 훨씬 많이 줄여 줍니다. 두 작업은 잘 어울립니다. 먼저 리사이즈하고 그다음 인코딩하며, 그 앞부분을 맡는 것이 이미지 크기 조절 도구입니다.

JPEG가 실제로 버리는 것

JPEG는 가로세로 8픽셀 블록 단위로 동작합니다. 각 블록은 이산 코사인 변환을 거쳐 주파수 계수 집합으로 바뀌는데, 하나는 평균 밝기를 나타내고 나머지는 점점 더 세밀한 디테일을 나타냅니다. 그다음 이 계수들을 양자화 테이블로 나누고 반올림합니다. 고주파 계수는 대개 0으로 반올림되고, 0이 이어지면 압축이 아주 잘됩니다. 바로 이 반올림이 손실입니다.

그 전에 이미지는 RGB에서 휘도 채널 하나와 색상 채널 두 개로 변환되고, 색상 채널은 보통 가로세로 각각 절반 해상도로 저장됩니다. 이것이 4:2:0으로 표기하는 크로마 서브샘플링이며, 사람의 시각이 색상 디테일보다 밝기 디테일을 훨씬 잘 구분한다는 성질을 이용합니다.

아티팩트는 이 두 단계로 설명됩니다. 매끄러운 하늘에 생기는 블록 현상은 너무 많은 계수가 0으로 반올림되면서 8×8 격자가 눈에 보이게 된 것입니다. 흰 배경의 빨간 글자 주변에 번지는 색 테두리는 크로마 서브샘플링 때문인데, 휘도에서는 경계가 선명하지만 색상에서는 흐릿하기 때문입니다. 어떤 품질 설정으로도 이 번짐을 완전히 없앨 수는 없으며, 그래서 글자가 들어간 이미지는 PNG나 WebP가 제자리입니다.

이 세 가지 너머의 포맷

AV1 비디오 코덱에서 파생된 AVIF는 낮은 품질과 중간 품질 구간에서 WebP보다 압축률이 확실히 좋고, 넓은 색영역과 투명도를 지원하며, 현재 모든 최신 브라우저가 지원합니다. 다만 인코딩이 느리고, 품질을 아주 낮추면 AVIF는 블록이 보이는 대신 디테일을 밀랍처럼 뭉개 버리는데 이것이 같은 조건의 JPEG보다 더 보기 싫다는 사람도 있습니다.

HEIC는 요즘 아이폰이 기본으로 만들어 내는 포맷입니다. 효율은 좋지만 특허에 묶여 있고 브라우저에서 지원되지 않아서, 휴대폰으로 찍은 이미지는 웹사이트에 올리기 전에 변환이 필요한 경우가 많습니다. SVG는 애초에 래스터 포맷이 아니라 도형을 기술하는 마크업입니다. 그래서 어떤 크기에서도 선명한 로고와 아이콘에는 이상적이지만 사진에는 전혀 쓸모가 없습니다.

GIF가 아직 남아 있는 이유는 하나, 관성입니다. 색은 256가지뿐이고 알파 채널이라 할 만한 것도 없으며, 애니메이션에서는 같은 내용의 동영상보다 파일이 몇 배나 큽니다. MP4나 WebM이면 훨씬 작은 용량으로 같은 일을 해냅니다.

페이지에 이미지 내보내기

포맷 선택보다 중요한 것은 알맞은 크기로 내보내는 일입니다. 4000픽셀짜리 사진을 600픽셀 너비의 단에 표시하면 코덱이 무엇이든 바이트의 대부분이 낭비됩니다. srcset 속성을 쓰면 브라우저가 여러 너비 중에서 고를 수 있고, sizes는 이미지가 실제로 얼마나 넓게 그려질지를 알려 줍니다. 이 둘을 함께 쓰는 편이 대개 어떤 재인코딩보다 더 많은 용량을 아껴 줍니다.

picture 요소는 한 걸음 더 나아가 서로 다른 포맷을 함께 제시하므로, 브라우저는 가능하면 AVIF를, 안 되면 WebP를, 마지막 보루로 JPEG를 가져갑니다. 이 조합을 손으로 만들기는 번거로우니 이미지 CDN이나 프레임워크의 이미지 컴포넌트가 생성하게 하면 됩니다.

모든 이미지에 설정해 둘 만한 속성이 둘 있습니다. 하나는 명시적인 width와 height로, 브라우저가 자리를 미리 잡아 두어 이미지가 로드될 때 페이지가 밀리지 않습니다. 다른 하나는 첫 화면 아래에 있는 이미지에 붙이는 loading=lazy입니다. 가장 먼저 보이는 이미지는 lazy로 두면 안 됩니다. 표시를 늦추는 것이 곧바로 Largest Contentful Paint를 악화시키기 때문입니다.

컬러 프로파일, 투명도 그리고 인쇄

ICC 프로파일은 파일 안의 숫자를 어떻게 해석해야 하는지 뷰어에게 알려 줍니다. 요즘 휴대폰으로 찍은 사진에는 Display P3 태그가 붙어 있는 경우가 많은데, 이 태그가 사라지면 같은 숫자가 sRGB로 읽히면서 채도가 높은 색이 전부 어긋납니다. 이 변환은 픽셀로 디코딩한 뒤 새 파일을 쓰기 때문에 프로파일은 살아남지 못합니다. 일반적인 웹 이미지에는 문제가 없지만 색이 중요한 작업에는 곤란합니다.

투명도에도 비슷한 빈틈이 있습니다. 알파 채널이 있는 PNG를 JPEG로 변환하면 배경 위에 합성되며, 흔한 결과는 안티에일리어싱된 가장자리를 따라 생기는 검거나 흰 테두리입니다. WebP와 AVIF는 알파 채널을 유지하므로 투명도가 중요할 때는 이쪽이 올바른 대상입니다.

인쇄는 완전히 다른 공정입니다. 화면은 가산혼합의 RGB이고 인쇄기는 감산혼합의 CMYK이며, 변환 결과는 잉크와 종이, 인쇄기 프로파일에 따라 달라집니다. 게다가 화면에서 선명한 색에는 인쇄로 낼 수 있는 대응색이 아예 없는 경우도 잦습니다. 브라우저 도구가 보여 주는 CMYK 값은 근사치라서 대략의 감을 잡는 데는 쓸모가 있어도 교정쇄용으로는 쓸 수 없습니다.

메타데이터, 프라이버시, 그리고 출처

사진에는 픽셀 말고도 훨씬 많은 것이 담깁니다. EXIF에는 카메라와 렌즈, 노출 설정, 날짜와 시각이 기록되고 촬영 지점의 GPS 좌표까지 들어 있는 경우가 많습니다. 소셜 플랫폼은 대체로 업로드 시점에 이를 제거하지만, 이메일로 보낸 파일이나 티켓에 첨부한 파일, 직접 운영하는 사이트에 올린 파일에는 대개 그대로 남습니다.

메타데이터 제거는 이 변환을 포함한 모든 재인코딩의 기본 동작입니다. 대부분의 경우 프라이버시에 이로운 결과지만, 저작권 표시나 캡션, 촬영 날짜가 중요했다면 성가신 일이 됩니다. 그중 하나라도 기록으로 남겨야 한다면 원본을 보관하고 변환된 사본은 파생물로 취급하십시오.

의도적으로 지켜 낼 만한 항목이 하나 있습니다. 방향 정보입니다. 카메라는 픽셀을 실제로 돌리는 대신 회전을 플래그로 저장하기 때문에, 세로로 찍은 사진이 그 플래그를 무시하는 소프트웨어에서는 옆으로 누워 보일 수 있습니다. 여기서처럼 재인코딩 전에 회전을 실제로 적용해 두는 것이, 변환된 파일이 어디서나 제대로 보이게 만드는 요령입니다.