게시하기 전에 이미지 준비하기

이미지가 실제로 표시될 크기로, 고밀도 화면을 감안하더라도 그 두 배까지만 크기를 줄이십시오. 브라우저가 눌러 찌그러뜨리게 두지 말고 레이아웃이 요구하는 모양으로 잘라내십시오. 아티팩트가 막 보이기 시작할 때까지 압축한 다음 한 단계 되돌리십시오. 메타데이터 제거는 맨 마지막입니다. 순서가 중요합니다. 첫 단계 뒤의 모든 작업은 훨씬 적은 픽셀을 대상으로 하기 때문입니다.

크기가 먼저입니다

픽셀 수는 가로 폭의 제곱에 비례해 늘어나므로, 크기의 사소한 차이가 데이터에서는 엄청난 차이가 됩니다. 가로 4000픽셀로 저장되어 800픽셀 칼럼에 표시되는 이미지는 필요한 양의 약 25배에 달하는 데이터를 실어 나르고 있으며, 어떤 품질 설정으로도 그것을 되돌릴 수 없습니다.

목표 폭을 정할 때는 화면이 최대 얼마나 커지는지가 아니라 그 레이아웃에서 이미지가 렌더링되는 가장 넓은 폭을 재십시오. 3열 그리드의 카드는 아무리 커도 380픽셀에 그칠 수 있습니다. 파일 하나가 여러 자리에 쓰인다면 가장 큰 자리에 맞춰 크기를 정하십시오.

기기 픽셀, CSS 픽셀, 그리고 DPI에 관한 오해

CSS 픽셀은 레이아웃의 단위이지 물리적인 점이 아닙니다. 기기 픽셀 비율은 화면이 CSS 픽셀 하나당 몇 개의 기기 픽셀을 그리는지를 나타내며, 오래된 모니터에서는 1, 대부분의 최신 휴대폰과 노트북에서는 2, 일부 휴대폰에서는 3입니다. 비율이 2인 화면에서 800 CSS 픽셀 칼럼은 1600개의 기기 픽셀로 그려지며, CSS 폭에 맞춰 크기를 정한 이미지가 흐릿해 보이는 이유가 이것입니다.

실무 규칙은 2배입니다. 표시될 폭의 두 배로 내보내고 브라우저가 줄이도록 두십시오. 3배로 가면 데이터가 125% 더 늘어나는데, 일반적인 시청 거리에서 그 차이를 알아보는 사람은 별로 없습니다.

파일에 저장된 DPI와 PPI는 웹과 아무 상관이 없습니다. 그것은 파일을 어떤 물리적 크기로 인쇄해야 하는지를 적어둔 헤더의 숫자 하나일 뿐이고, 브라우저는 이를 완전히 무시합니다.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

"300 DPI"로 내보낸다고 해서 픽셀이 늘어나지도 않고 이미지 데이터가 달라지지도 않습니다.

리샘플링이 하는 일

축소한다는 것은 여러 개의 원본 픽셀이 하나가 된다는 뜻입니다. 새 격자보다 미세한 디테일은 표현될 수 없고, 리샘플러가 해당 영역 전체를 평균하는 대신 너무 적은 수의 원본 픽셀만 뽑아 쓰면 그 디테일이 가짜 무늬로 되접혀 나옵니다. 대각선이 계단처럼 튀고, 줄무늬 셔츠나 1픽셀 테두리가 있는 표처럼 미세하게 반복되는 질감에는 모아레가 생깁니다. 좋은 축소는 기여하는 모든 픽셀을 평균하며, 그 뒤에 약간의 선명화가 필요한 경우가 많습니다.

확대는 디테일을 만들어내지 못합니다. 보간은 이미 존재하는 픽셀들 사이의 값을 추측할 뿐이므로 결과는 흐릿하거나 뭉툭합니다. 기계 학습 기반 업스케일러는 대신 그럴듯한 디테일을 지어내는데, 이는 복원과는 다른 일입니다.

화면비, 자르기와 레터박스와 늘이기

자르기는 피사체를 제 크기로 유지하고 가장자리를 버리는 방식이며 기본으로 삼기에 알맞습니다. 레터박스는 프레임 전체를 유지하지만 여백 띠가 생기고 그 띠의 색을 정해야 합니다. 작품이나 도해처럼 아무것도 잘라내면 안 되는 경우에 값어치를 합니다. 늘이기는 형태를 왜곡하며, 얼굴이나 원이나 글자에서는 눈이 그것을 즉시 알아챕니다.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

파일 하나가 여러 모양으로 쓰인다면 안전 영역, 즉 모든 자르기에서 살아남는 구역을 기준으로 생각하십시오. 16:9 배너는 위아래를 잘라내고, 1:1 타일과 4:5 카드는 좌우를 잘라내므로, 모두가 공통으로 남기는 것은 가운데를 지나는 띠입니다. 피사체와 모든 글자를 그 안에 두십시오. 그러지 않으면 가로 사진의 가장자리 가까이 있는 얼굴이 정사각형 자르기에서 목이 잘립니다.

품질 설정 찾기

품질 수치는 무언가의 백분율이 아니며, 인코더끼리 척도를 비교할 수도 없습니다. JPEG 80, WebP 80, AVIF 80은 서로 아무 관계가 없는 세 가지 설정입니다.

방법은 셋 모두 같습니다. 몇 가지 설정으로 내보내고, 실제로 표시될 크기에서 결과를 보면서 아티팩트가 어디에서 먼저 드러나는지 확인하십시오. 하늘처럼 부드러운 그라데이션에서는 띠와 얼룩이 생기고, 날카로운 경계와 글자에서는 테두리가 울립니다. 손상이 눈에 보이기 시작하는 지점을 찾은 다음 한 단계 되돌리고 거기서 멈추십시오.

고정된 수치 하나는 모든 이미지에서 틀립니다. 얼마나 버릴 수 있는지는 내용이 결정하기 때문입니다. 잡음과 질감이 많은 사진은 살아남으려면 더 많은 비트가 필요하고, 평평한 일러스트는 복잡한 사진이라면 아무렇지 않게 넘길 설정에서도 무너집니다.

누끼, 부드러운 경계, 후광

배경 제거는 이미지가 여러 배경색 위에 놓여야 하거나 다른 요소와 겹쳐야 할 때 적절합니다. 제품 사진, 로고, 레이아웃에 합성해 넣는 인물 같은 경우입니다. 반면 머리카락, 나뭇잎, 유리처럼 경계가 실제로 미세한 경우에는 적절하지 않습니다. 엉성한 마스크는 정직한 직사각형보다 더 나빠 보이기 때문입니다.

딱딱한 경계는 이분법적이어서 모든 픽셀이 완전히 불투명하거나 완전히 투명합니다. 평평한 그래픽에는 어울리지만 사진에서는 계단이 생깁니다. 부드러운 마스크는 부분적인 불투명도를 허용하므로 어떤 픽셀은 40%만 피사체일 수 있으며, 머리카락이 제대로 보이는 유일한 방법입니다.

후광은 경계 픽셀에서 나옵니다. 렌즈의 흐림과 안티에일리어싱이 이미 피사체 색과 예전 배경색을 섞어 놓았으므로, 각 픽셀은 다음을 담고 있습니다.

observed = alpha * foreground + (1 - alpha) * background

배경 제거는 알파만 계산합니다. 그 픽셀들에 남은 색은 여전히 오염된 상태이므로, 흰 스튜디오 사진에서 오려낸 피사체는 옅은 테두리를 달고 다닙니다. 흰 페이지에서는 보이지 않고 어두운 페이지에서는 뚜렷합니다. 제대로 된 매팅은 전경 색까지 함께 풀어내며, 디프린지나 색 오염 제거라는 이름으로 노출됩니다. 그것이 안 되면 마스크를 픽셀의 몇 분의 일만큼 안쪽으로 조이고 가장자리를 다시 부드럽게 만드십시오.

회전과 메타데이터

어떤 프로그램에서는 똑바로 서 있고 다른 프로그램에서는 옆으로 누워 있는 이미지는 거의 언제나 EXIF 방향 태그 문제입니다. 카메라는 센서 이미지를 회전하지 않은 채로 저장하고, 어떻게 돌려야 하는지를 알려주는 태그를 덧붙입니다. 그 태그를 읽는 소프트웨어는 이미지를 올바르게 보여주고, 여러 이미지 라이브러리와 썸네일 생성기를 포함해 태그를 무시하는 소프트웨어는 원시 픽셀을 옆으로 누운 채 보여줍니다.

해결책은 회전을 픽셀에 직접 굽고 태그를 1로 설정하거나 제거하는 것입니다. 90도 단위 회전은 리샘플링 없이 픽셀을 재배치합니다. 이중 회전에 주의하십시오. 픽셀은 이미 돌아갔는데 태그가 그대로 남아 있으면, 규격을 지키는 모든 뷰어가 한 번 더 돌려버립니다.

메타데이터 제거는 정리 작업이 아니라 프라이버시 조치입니다. EXIF, IPTC, XMP 블록은 몇 미터 단위로 정확한 GPS 좌표, 촬영 시각, 카메라 제조사와 모델과 일련번호, 소유자 이름을 일상적으로 담고 있으며, 때로는 자르기 전 모습이 그대로 남아 있는 내장 썸네일까지 담고 있습니다. 집에서 찍은 사진을 손대지 않고 올리면 집 주소를 공개하는 셈입니다.

메타데이터는 맨 마지막에 제거하되 예외가 하나 있습니다. ICC 색 프로파일이 그 메타데이터와 나란히 자리하는데, 넓은 색역 이미지에서 이를 제거하면 남은 숫자들이 sRGB로 읽혀 색이 밋밋하거나 지나치게 진하게 나타납니다. 먼저 sRGB로 변환한 다음 나머지를 제거하십시오.