웹용 이미지 크기 조정과 자르기 하는 법

크기 조정(resize)과 자르기(crop)는 같은 것처럼 들리지만 서로 다른 문제를 풉니다 — 그리고 이 둘을 잘 쓰는 것은 압축만 하는 것보다 종종 더 큰 속도 이득입니다. 이 가이드는 그 차이, 지나치게 큰 이미지가 왜 해로운지, 그리고 웹용으로 이미지 크기를 올바르게 맞추는 법을 설명합니다.

크기 조정 vs. 자르기

• 크기 조정(Resizing)은 이미지 전체의 치수를 바꾸며 전부를 유지합니다 — 위아래로 배율을 조정하는 것입니다.
• 자르기(Cropping)는 한 영역만 남기려고 이미지의 일부를 잘라냅니다 — 단지 크기가 아니라 프레임 안에 무엇이 들어가는지를 바꾸는 것입니다.

프로필 사진이 좋은 예입니다: 얼굴 주위를 정사각형으로 자르고, 그 정사각형을 표시 크기로 크기 조정합니다.

지나치게 큰 이미지가 페이지를 느리게 하는 이유

휴대폰에서 바로 나온 사진은 폭이 4,000픽셀일 수 있습니다. 그것이 800픽셀 폭의 칼럼에 표시된다면, 브라우저는 결코 보여줄 수 없는 다섯 배 많은 픽셀을 내려받은 뒤 즉석에서 줄입니다. 시각적 이득은 0인데 대역폭을 낭비하고 페이지를 느리게 하는 것이죠. 이미지를 표시되는 크기 정도로 조정하는 것은 종종 가능한 가장 큰 파일 크기 절감입니다 — 흔히 압축보다도 큽니다.

종횡비를 유지하세요

종횡비(aspect ratio)는 폭 대 높이의 비율입니다. 두 치수를 같은 배율로 조정하면 이미지가 왜곡되지 않습니다. 하나만 바꾸면 늘어나거나 찌그러집니다. 대부분의 도구는 기본적으로 비율을 “잠급니다” — 일부러 왜곡하려는 게 아니라면 잠긴 채로 두세요. 다른 모양이 필요하다면(예: 세로 사진에서 가로 배너), 늘리는 대신 새 비율로 자르세요.

이미지는 얼마나 커야 하나?

• 이미지 폭을 그것이 채우는 공간에 맞추세요 — 컨테이너를 측정하세요.
• 고밀도(Retina) 화면에서 선명하게 보이려면 표시 크기의 약 2배로 내보낸 뒤 압축하세요.
• 확대하지 마세요 — 작은 이미지를 키우면 흐릿함만 더해질 뿐, 없던 디테일을 만들어 낼 수는 없습니다.

종합하기

좋은 작업 순서는 자르기 → 크기 조정 → 압축입니다. 이미지 리사이저가 종횡비를 잠근 채 자르기와 크기 조정을 한 번에 처리하고, 그다음 이미지 압축기에 넘겨 파일 크기를 낮춥니다. 품질을 어디까지 밀어붙일지는 압축 가이드를, 먼저 올바른 포맷을 고르려면 이미지 포맷 설명을 읽으세요.