웹 이미지 준비하기: 크기·형식·화질을 직접 비교하는 실습

이미지가 들어갈 위치부터 확인하기

파일이 작아도 내용을 알아볼 수 없다면 좋은 결과가 아닙니다. 사용 권한이 있는 2400 × 1600 픽셀 사진을 준비하고, 가로 600 CSS 픽셀의 본문 영역에 넣는 상황을 가정하겠습니다. 원본은 보관하고 별도 파일로 내보내세요. 아래 수치는 계산을 설명하는 예시이며 실제 압축 성능 측정치가 아닙니다.

원본 비율은 3:2입니다. 1200 × 800으로 내보내면 비율이 유지되고, 가정한 600픽셀 영역에서 CSS 픽셀 하나당 이미지 픽셀 두 개를 사용할 수 있습니다. 600 × 400은 픽셀 수가 더 적지만 고밀도 화면에서는 흐릿해질 수 있습니다. 실제 표시 크기에서 비교한 뒤 선택하세요. 작은 원본을 크게 늘려도 원래 없던 디테일이 복원되지는 않습니다.

품질 슬라이더보다 크기를 먼저 계산하기

출력 높이는 원본 높이 × 출력 너비 ÷ 원본 너비입니다. 이번에는 1600 × 1200 ÷ 2400 = 800입니다. 픽셀 수는 3,840,000에서 960,000으로 줄어 원본의 4분의 1이 됩니다. 그렇다고 파일 용량이 정확히 4분의 1이 되지는 않습니다. 이미지의 복잡도, 형식, 메타데이터, 인코딩 설정이 용량에 함께 영향을 줍니다.

먼저 크기를 바꾸고 같은 크기의 결과들끼리 인코딩 품질을 비교하세요. 크기와 품질을 동시에 바꾸면 흐릿해진 원인을 구별하기 어렵습니다. 비율 고정을 유지하고, 정사각형이 필요한 경우에는 늘려 찌그러뜨리는 대신 자를 영역을 정하세요. 크롭은 구도를 바꾸고 리사이즈는 치수를 바꿉니다.

내용에 따라 형식 선택하기

JPEG는 알파 채널을 보존하지 않습니다. 투명 로고를 JPEG로 저장한다면 배경색을 명시하고 결과를 열어 확인하세요. PNG는 무손실 형식이지만 사진의 용량이 항상 가장 작지는 않습니다. 확장자 이름만 바꾸는 것은 변환이 아닙니다. 출력 형식을 선택한 뒤 내려받은 파일을 다시 여세요.

같은 조건으로 비교하기

이미지 크기 조절 도구에서 복사본을 1200 × 800으로 만듭니다. 이 결과를 같은 입력으로 사용해 이미지 변환기에서 JPEG와 WebP를 각각 만드세요. 파일 이름에 형식과 설정을 적어 원본을 덮어쓰지 않고 비교할 수 있게 합니다.

원본과 결과의 가로·세로, 바이트 크기, 눈에 보이는 손상을 기록하세요. 가상의 900 KB 원본이 270 KB 결과가 됐다면 절감률은 (900 − 270) ÷ 900 × 100 = 70%입니다. 실제 판단에는 직접 측정한 크기를 넣으세요. 품질 숫자는 인코더 설정이지 시각적 품질이 몇 퍼센트 남았다는 측정값이 아닙니다. 형식이 다르면 같은 숫자도 다르게 작동할 수 있습니다.

다운로드한 결과 확인하기

의도한 표시 크기와 100% 픽셀 보기에서 모두 여세요. 작은 글자, 머리카락·나뭇잎, 그라데이션, 투명 경계를 살펴봅니다. 이어서 실제 페이지를 좁은 화면으로 열고 컨테이너를 벗어나지 않는지, 가로 스크롤을 만들지 않는지 확인하세요. 의미 있는 이미지에는 대체 텍스트를 넣습니다. 차트라면 단순히 ‘이미지’라고 하기보다 핵심 정보를 설명해야 합니다.

글자가 뭉개지면 압축을 더 강하게 하지 말고 무손실 형식을 유지하거나 출력 치수를 늘려 보세요. 용량이 커지면 다른 형식과 비교하거나 원본을 유지합니다. 다운로드 성공은 파일이 만들어졌다는 뜻이며 읽기 쉬움이나 업로드 대상 사이트의 허용 규격까지 증명하지 않습니다.

개인정보와 한계

연결된 도구는 선택한 파일을 브라우저에서 처리하지만 페이지·라이브러리·광고를 불러오는 네트워크 요청은 발생할 수 있습니다. 로컬 처리가 네트워크 요청이나 위험이 전혀 없다는 뜻은 아닙니다. 공개하면 안 되는 내용은 게시 전에 제거하세요. 변환만으로 모든 메타데이터가 제거된다고 가정하지 말고 결과 파일을 확인해야 합니다.

참고 자료와 다음 실습

MDN 이미지 형식 가이드에서 형식별 기능을 확인할 수 있습니다. 다음에는 글씨가 많은 스크린샷으로 같은 비교를 해 보세요. 선택한 형식과 눈으로 확인한 이유를 기록하면 가장 작은 파일만 고르는 실수를 줄일 수 있습니다.