이미지 크기 조정 및 자르기

디지털 이미지는 픽셀 격자입니다. 1920×1080 이미지에는 200만 개 이상의 개별 픽셀이 있습니다. 크기 조정은 이 격자의 픽셀 수를 변경합니다. 다운스케일링(크기 축소)은 여러 픽셀을 더 적은 수로 병합해야 하며, 이를 데시메이션 또는 다운샘플링이라고 합니다. 업스케일링(크기 확대)은 기존 픽셀에서 새 픽셀을 보간해야 하며, 이를 보간 또는 업샘플링이라고 합니다. 결과의 품질은 사용된 리샘플링 알고리즘에 크게 좌우됩니다.

브라우저의 Canvas API는 브라우저 내장 이미지 리샘플링을 사용하며, 이는 일반적으로 이중 선형 또는 이중三次 보간입니다. 이중 선형 보간은 각 새 픽셀을 가장 가까운 4개의 원본 픽셀의 가중 평균으로 계산합니다. 이중三次 보간은 4×4 이웃을 사용하여 특히 업스케일링에서 더 부드러운 결과를 생성합니다. 캔버스의 imageSmoothingQuality 속성을 'low', 'medium', 'high'로 설정할 수 있으며, 저희 도구는 최대 품질을 위해 'high'를 사용합니다. 사진 이미지의 경우 이는 전용 이미지 편집 소프트웨어와 비슷한 결과를 생성합니다.

크기를 조정할 때 왜곡을 피하기 위해 종횡비(너비와 높이의 비율)를 유지하는 것이 중요합니다. 높이를 비례적으로 변경하지 않고 너비를 변경하면 이미지가 늘어나거나 찌그러져 보입니다. 저희 도구는 기본적으로 종횡비를 잠급니다. 하나의 차원을 변경하면 다른 차원이 자동으로 조정됩니다. 비례 크기 조정이 아닌 경우(예: 이미지를 고정 크기 컨테이너에 맞추는 경우) 종횡비를 잠금 해제할 수 있지만 결과는 찌그러져 보입니다.

크기 조정, 자르기, 압축은 종종 혼동되는 세 가지 다른 작업입니다. 크기 조정은 이미지의 차원(픽셀 수)을 변경합니다. 자르기는 특정 영역에 초점을 맞추기 위해 가장자리에서 픽셀을 제거합니다. 압축은 손실 또는 무손실 압축 알고리즘을 적용하여 차원을 변경하지 않고 파일 크기를 줄입니다. 이러한 작업은 다른 목적을 가집니다: 차원 맞추기를 위한 크기 조정, 구성을 위한 자르기, 파일 크기를 위한 압축.

웹 최적화를 위해서는 일반적으로 세 가지가 모두 필요합니다: 원하는 종횡비로 자르기, 대상 차원으로 크기 조정(예: Open Graph 이미지의 경우 1200×630), 파일 크기를 줄이기 위해 압축(히어로 이미지의 경우 200 KB 미만 목표). 일반적인 실수는 압축 없이 크기를 조정하는 것입니다. 4000×3000 이미지를 800×600으로 크기 조정했지만 PNG로 저장하면 여전히 수 메가바이트일 수 있습니다. 웹 이미지의 경우 항상 크기 조정과 압축(JPEG 또는 WebP 형식 사용)을 함께 수행하세요.