Image in Revolution Slider

예를 들어 아래의 이미지를 모니터라고 가정해 보자

그리고 아래의 이미지가 모니터에 꽉 들어 차게 나오길 바라는 이미지라고 한다면

문제는 이 여자 이미지가 모니터의 크기와 같지 않다는 것이다(모니터에 비해 너무 크지 않은가?) 여기서 우리가 선택할수 있는 옵션이 무엇이 있을까?

기술적으로 우리는 여자 이미지를 모니터의 사이즈와 같도록 할수 있다.(아래사진) 그러나 이미지와 모니터의 좌/우 크기 비율이 달라서 심각한 왜곡이 발생한다:

위의 방법이 아주 좋지않다... 그러면 어떤 방법이 있을까?

한가지 방법은 이미지를 잘라내는것이다. 아래의 예처럼:

위의 이미지는 화면 전체에 나타낼수 있다(목적이 완수되었다 ^^;;) 그러나 보다시피 이미지의 많은 부분이 잘려졌다... 어떻게 하면 왜곡되지도,잘리지도 않으면서 이미지가 화면 가득차게 할 수 있을까? 바로 사이즈를 비율에 맞춰서 줄이는 것이다. 아래의 사진처럼:

그러나 위 결과물은 이미지의 양쪽에 커다란 공백이 존재한다. 어떻게 하면 이미지가 왜곡되지도 않고, 잘리지도 않으며, 화면에 공백이 생기지도 않게 화면에 가득채워지도록 만들수 있을까?
기술적으로 컴퓨터 모니터의 크기와 똑 같은 크기로 이미지 원본을 만들면 된다.(오호 제일 좋은 방법인걸...!!) 그러나...이것도 좋은 방법은 아니다. 세상에 모든 모니터의 크기가 똑 같지 않기 때문이다. 대신에 우리는 그때 그때 목적에 따라서 위의 예제중 한가지 경우를 결정하는 수 밖에 없다.:

이미지 왜곡: 항상 가장 나쁜 선택일거 같다.
이미지 잘림: 화면에 공백이 생기는것을 막기위해선 최선이다.
잘림없이 사이즈 줄이기: 대부분 화면에 공백을 만들지만, 전체 이미지를 보여주는 것이 중요하다면 최선의 선택이다.

Ideal Image Size

이제 슬라이더의 경우를 살펴보자.

슬라이더를 만들때 이미지의 크기를 얼마로 해야 할까? 라는 것은 아주 어려운 문제이다. 슬라이더의 목적에 따라서 그때 그때 적당한 크기가 다르기 때문이다. 그렇더라도 이미지 사이즈에 관한 최선의 선택은 있다.

1.큰 이미지 = 파일이 큰 이미지 = 로딩시간이 길어진다. 이미지를 "웹 친화적"으로 만들어라

이미지의 사이즈를 1920x1200 픽셀 이하로 하고, 파일의 크기를 포토샵의 “Save for Web”옵션을 이용해서 이미지의 손실이 없는 범위에서 최대한 압축하는것이다.

2.필요한 것 보다 큰 이미지를 사용하지 마라

만약 슬라이더를 “Auto Responsive”레이아웃을 사용해서 만들었고, 슬라이더가 들어가 있는 부모 컨테이너가 박스모드라서 그안에 어떤 컨텐츠라도 절대 1200px을 넘을 수 없다면, 당신의 슬라이더의 원본 이미지도 1200px을 넘는 크기일 필요가 없다.

3.이미지는 항상 슬라이더의 “Grid Width”와“Grid Height”비율에 기초해서 확대/축소 된다.

만약 위의 2번 경우처럼 슬라이더가 1200px을 넘어설수 없다고 가정하고, 실제 이미지의 크기는 1000x500 이고, 설정한 그리드 넓이(Grid Width) x 그리드 높이(Grid Height) 또한 1000x500 일때, 2번에서 예로든 슬라이더의 실제 넓이가 1200px 이라면(옵션에 의해서 최대한 풀 슬라이드설정해 놓은경우) 슬라이더의 높이는 600px(아래에서 설명하겠지만 Unlimited Height = On 일 경우이다) 이 될것이다. (1000 : 500 = 1200 : x , x=600 )

이미지가 화면의 크기에 반응함에따라서 리사이즈될때 가장 흔한 질문은 "왜 나의 이미지가 잘려서 일부분이 안보이게 되는가? " 이다.이 대답은 위에서 언급한 그리드넓이(Grid Width)와 높이(Grid Height)의 비율에 있다. 만약 이미지의 원본사이즈가 그리드의 넓이/높이 설정보다 작거나 비율이 다르다면 이미지는 늘여지거나 잘릴수 밖에 없다. 이것을 피하기 위해서는 그리드의 넓이/높이 설정과 같거나 같은 비율을 유지하면서 더큰 이미지를 선택하는 것이 최선이다.

Unlimited Height

슬라이더 메인 세팅페이지 안의 "Grid Width" 와 "Grid Height" 의 값에 따라서 슬라이더는 "반응(responsive - 화면의 크기에 따라서 슬라이더의 크기가 변화함)"한다.

예를 들어 아래의 이미지를 슬라이더에 넣는다고 가정하면

"Unlimited Height" 옵션이 Off 되어있을 때, 슬라이더의 넓이는 화면의 넓이 변화에 따라서 확장(설정된 그리드 넓이를 넘어서서)과 수축을 하겠지만, 높이는 "Grid Height"를 넘어서서 더 확장되진 않는다.(그러나 수축되는 경우는 그리드의 넓이와 높이에 비례해서 슬라이더의 넓이와 높이가 줄어든다.)

그래서 만약 화면의 넓이가 1400px의 넓이가 되었고, Grid Width 는 700, Grid Height of 300 으로 설정 되어 있다면,

Unlimited Height = Off 일때, 화면의 넓이는 1400px 가 되고, 슬라이더의 넓이는 1400x300 이 될것이다. (Off일때는 그리드 높이를 초과할수 없으므로)

이미지를 클릭해 보라

그러나 "Unlimited Height" 옵션이 On 이 되어있을때는 설정된 그리드넓이(Grid Width)보다 슬라이더의 넓이가 넓어질때, 그 비율 만큼 그리드높이(Grid Height)보다 슬라이더 높이도 늘어난다. 만약 위의 예처럼 설정된 그리드넓이가 700 인데 슬라이더의 넓이가 1400px(화면이 넓어졌을때)이라면 높이도 600px이 되는 것이다.(넓이 200%증가 = 높이도 200% 증가)

Unlimited Height = On 일때, 화면의 넓이는 1400px 가 되고, 슬라이더의 넓이는 1400x600