[티스토리 블로그] 이미지 썸네일 정복하기

티스토리는 이미지를 링크할 때 사이즈 옵션을 줄 수 있습니다.
썸네일을 생성할 때 아주 편리한 기능입니다.

빨간 박스부분이 사이즈 옵션입니다

 

모든 사이즈에 대응하진 않지만, 일정 비율 or 일정 사이즈에 따라 이미지를 자르거나 줄이는 데 활용하기 좋습니다.
각 옵션 내용은 다음과 같습니다.

옵션	의미	기능
C	Crop	사이즈 조절 후 이미지 중앙에서 정해진 사이즈로 자른다.
S	Snapshot	Crop과 동일하지만 캡쳐하듯 이미지를 자르므로 기본 이미지 정보는 사라진다. 움직이는 GIF, 투명 PNG 정보 등이 사라진다.
P	Portrait	원본 이미지 비율 그대로 사이즈 조절 후 남는 부분을 흰색으로 채운다.
R	Resize	잘려나가는 부분 없이 이미지 사이즈를 물리적으로 줄이거나 늘린다. 잘리는 부분이 없어 원본과 비율이 달라지면 왜곡이 생긴다.

 

사용법

• C100x100 : 100x100 사이즈로 Crop
• S0x100    : 세로 사이즈가 100인 상태로 비율에 맞춰 Snapshot
• P100x0    : 가로 사이즈가 100인 상태로 비율에 맞춰 Portrait (실질적 Crop,Snapshot)
• R100x100 : 100x100 사이즈로 Resize

 

추가 규칙

• 앞에 있는 C,S,P,R은 반드시 대문자로 작성해야 합니다.
• 중간의 x는 반드시 소문자여야 합니다.
• 100x0 처럼 세로 사이즈를 0으로 지정하면 가로 사이즈 지정된 상태에서 원본 이미지 비율에 맞게 조정됩니다.
• 0x100 처럼 가로 사이즈를 0으로 지정하면 세로 사이즈 지정된 상태에서 원본 이미지 비율에 맞게 조정됩니다.

 

---

예시를 보겠습니다.

사방이 투명한 이미지입니다.

 

C옵션에선 투명도가 유지되었지만, S옵션에서는 투명도가 사라졌습니다.

 

 

 

600x400 사이즈 이미지입니다

 

	Crop	Snapshot	Portrait	Resize
100x100
120x90
100x120
120x0		400x0
0x200	0x300

 

Snapshot 120x0, Crop 0x300 이미지는 사이즈에 대응하는 옵션이 없어 임의로 가능한 사이즈로 지정하였고, 표가 화면 밖으로 밀려나는 것을 방지하기 위해 이미지 가로 사이즈 최대값을 고정한 예제입니다.

사이즈에 대해서는 각 이미지 원본 비율, 옵션, 지정된 사이즈에 따라 지정 가/불가가 다르기 때문에 사이즈를 바꿔가며 확인해보시면 될 것 같습니다.