사용자가 업로드하는 이미지는 사이즈가 천차만별이라, 절대로 원본을 그대로 웹서비스상에서 제공하게 된다면 브라우저 성능이나 네트워크 트래픽 등으로 인해서 고통을 받게 된다(특히나 최근에는 고해상도 폰으로 촬영한 이미지가 기본 8M를 육박하고 있다). 이에 따라 사용자 이미지를 서비스 제공에 필요한 적절한 사이즈로 리사이즈가 필요하다.

제공하는 서비스의 상황마다 다르겠지만, 타일에서 쉽게 생각할 수 있는 것은 해상도 기준이다.  대충 가로폭을 기준으로 비율을 유지하면서 줄이는 것이다. 

이렇게 한쪽을 기준으로 줄이는 것은 문제가 생길 수 있다. 위 예시에서는 모두가 같은 폭을 기준으로 맞춘 것인데, 비율상 세로로 긴 이미지가 들어온다면 세로 길이로 인해서 실질적인 면적이 큰 상태의 이미지로 남아있을 수 있다. 세번째 놈처럼 가로가 비정상적으로 긴 이미지의 경우에는 세로가 극도로 짧아져서 인식이 불가능한 이미지로 되어버릴 수가 있다. 한쪽변의 기준으로만 맞추면 이렇게 면적 차이가 들쑥날쑥한 놈들이 들어 올 수 있다.

따라서 타일에서 가장 적합한 리사이즈 기준은 '면적'이 될 것이다. 면적을 기준으로 하면 비율과 무관하게 '적절한' 중간 사이즈를 얻을 수가 있다.

면적을 계산하는 공식은 '가로x세로'이다. 타일에서는 이미지의 기준을 가로 1000, 세로 1000으로 잡고 있기에 기준 면적은 1,000,000이다. 이미지의 가로x세로가 1,000,000을 넘으면 리사이즈를 한다.

if ($userWidth * $userHeight > 1000000) {
  // 한다. 리사이즈를..
}

리사이즈된 이미지의 가로와 세로를 다음과 같이 구하면 될 것이다. 이미 이미지의 비율(가로/세로)은있으므로 리사이즈된 이미지의 가로($resizedWidth)만 먼저 구하면 된다.

1. $resizedWidth * ($userHeigh / $userWidth) * $resizedWidth = 1000000
2. ($userHeigh / $userWidth) * $resizedWidth^2 = 1000000
3. $resizedWidth^2 = 1000000 / ($userHeigh / $userWidth)
4. $resizedWidth = sqrt(1000000 / ($userHeigh / $userWidth))

이렇게 면적을 기준으로 이미지 리사이즈를 하면, 어떤 비율이건 적당히 사용할 수 있는 적당한 크기의 이미지가 만들어질 수 있다.  

if ($userWidth * $userHeight > 1000000) {
  // 한다. 리사이즈를..
  $resizedWidth = sqrt(1000000 / ($userHeigh / $userWidth));
  $resizedHeight = $resizedWidth * $userHeight / $userWidth;
  $userImage->resizeTo($resizedWidth, $resizedHeight);
} 

 

※ 비율이 극단적으로 1:10인 경우 -> 버리거나 최소크기($minWidth)로 제한한다.