By aPOST in 티스토리스킨 — 2023년 12월 23일

티스토리 이미지 썸네일 치환자 완벽정리

티스토리 스킨의 커버, 글 목록, 카테고리의 관련 글 등에는 글에 첨부된 메인 이미지의 썸네일이 표시됩니다.

티스토리 공식 사용 가이드, 또는 스킨 가이드에는 명시적으로 설명이 되어있지 않지만

티스토리 스킨에는 썸네일을 생성하는 다양한 옵션 값이 존재합니다.

나만의 스킨을 제작할 때, 또는 티스토리에서 제공되는 스킨을 내 블로그에 적용해 사용하는 경우

썸네일 이미지 옵션을 잘 조정하면

본인 취향에 맞는 레이아웃을 만들거나

블로그 초기 로딩 속도를 좀더 빠르게 할 수 있습니다.

특히, 글 목록에 표시하는 글 갯수가 많은 블로그인 경우, 스킨이 제공하는 기본값을 사용하면 블로그 초기 로딩속도가 많이 느려집니다.

썸네일 옵션 조정을 통해 최적화를 하면 블로그 로딩 속도를 상당히 개선할 수 있습니다.

티스토리에서 제공하는 기본 스킨들은 대부분 썸네일 크기라 600px x 600px 입니다.

빠른 로딩을 원하면 크기를 좀 더 줄여도 무방합니다.

보통 티스토리에서 제공하는 스킨을 그대로 사용하는 경우 아래와 같은 썸네일 생성 코드를 사용하고 있습니다.

스킨에 따라 값이 조금씩 다르기는 하지만, 대체로는 거의 비슷합니다.

여기서 중요한부분이 "C600x600" 입니다.

썸네일 생성 옵션과 가로x세로 크기를 지정하는 것입니다.

썸네일 옵션	비율 및 크기	가로/세로 원본 비율	원본 속성	설명
C	가로x세로 형식으로 가로, 세로 픽셀 크기를 지정. C300x200	무시	유지	Crop. 티스토리 스킨 대부분에서 기본으로 사용하는 썸네일 옵션. 지정한 썸네일 크기 영역을 모두 덮는 최소 크기로 리사이즈 한 후(가로, 또는 세로중 한방향은 지정한 크기와 일치하고 나머지 쪽은 남게됨) 가운데를 중심으로 배치하고 남는 부분을 잘라냄(이미지 가로/세로 비율 유지). 가로, 또는 세로로 잘린 이미지가 생성됨. 정해놓은 썸네일 크기(픽셀 단위)로 항상 이미지가 표시되기 때문에 일정한 모양을 유지하는 블로그 레이아웃에 최적임.
P	지정한 가로x세로 크기 안에 썸네일 이미지 전체가 가로/세로 비율을 유지한채 들어감. P300x300	무시	유지	Portrait. 지정한 썸네일 크기 영역 안에 들어갈 수 있는 크기로 이미지를 가로/세로 비율을 유지해 리사이즈한 후, 정 가운데에 배치하고 남는 영역은 흰색 배경으로 채움. 리사이즈한 이미지의 가로, 세로중 한쪽은 지정한 썸네일 크기와 일치하고, 나머지는 항상 지정한 영역보다 작거나 같음.
R	가로, 세로를 모두 지정하면 크기에 맞춰 이미지를 늘려 채움. 가로, 세로중 한쪽 값만 지정하고 나머지는 0으로 고정. R200x300, R600x0, R0x150	유지/무시	유지	Resize. 가로/세로 값을 모두 지정하면, 리사이즈 하면서 이미지를 잡아 늘려 지정한 크기의 썸네일을 만듬(이미지 가로X세로 비율 깨짐). 지정한 썸네일 영역 크기와 일치하는 썸네일이 항상 생성되지만, 이미지와 지정 썸네일 크기의 가로 세로 비율이 다를 경우 이미지가 늘어나 보이게 됨. 가로, 또는 세로값 하나만 지정(이방법을 주로 사용)하고, 나머지를 0으로 지정하면 가로 세로 비율이 유지되며, 크기를 지정한 부분을 제외한 나머지 부분은 자동으로 가로 세로 비율에 맞춰 크기가 정해짐. 가로, 또는 세로로 가변인 레이아웃에 적합하며, 크롭되는 썸네일을 원하지 않을 경우 사용할 수 있음.
S	C 옵션과 같은 형식으로 사용. S200x200	무시	무시	Snapshot. 스냅샷 이미지를 생성합니다. C 옵션과 같은 기능을 하지만, C, P, R 옵션이 GIF 애니메이션에 적용했을 때 GIF 애니메이션 썸네일이 만들어지는 것과 달리 GIF애니메이셔 속성 등은 모두 사라지고, 첫번째 이미지만으로 최종 썸네일 이미지를 생성합니다.

* 썸네일 옵션 및 크기값 공통 주의사항

- 썸네일 옵션(C,P,R,S)은 무조건 대문자로 사용해야 합니다. 소문자 사용시 에러가 발생합니다.

- 크기 숫자 사이의 x(영문 소문자 x)는 반드시 소문자로 사용해야 합니다. 대문자 사용시 에러가 발생합니다.

위 샘플 이미지를 여러가지 옵션으로 썸네일을 생성하면 다음과 같습니다.

썸네일옵션	가로	정사각	세로
C	C150x100	C120x120	C120x160
P	P200x120	P120x120	P160x200
R	R200x0	R200x200	R0x200
S	S150x100	S120x120	S120x160

썸네일 생성시 가로 세로 비율은 3:2, 4:3, 1:1 과 같이 정형화된 비율로, 숫자값은 10단위 이상으로 끊어서 값을 지정하는 것을 추천합니다.

썸네일 치환자가 모든 크기를 지원하는 것이 아니므로 아무 값이나 지정해 사용할 수는 없습니다.

예를 들어 3:2 비율로 고정 크기인 썸네일을 지정할 경우 C30x20, C90x60, C180x120, C240x160 과 같이 30단위로 건너뛰는 썸네일만 지정할 수 있습니다. (200보다 클 경우 60단위로 지정) 반드시 이런 것은 아니고 몇몇가지는 변형인 크기들도 지원하지만, 일일이 입력해가면서 찾는게 상당히 번거로우므로 10단위, 또는 비율*10 단위로 지정하는 것을 추천합다.

검색결과에 블로그가 노출될 때 대표 이미지가 GIF애니메이션으로 유지되도록 하려면 "S"옵션은 사용하면 안됩니다.

지정한 썸네일 가로x세로 크기가 지원되지 않는 경우, 이미지가 표시되지 않거나 아래와 같은 에러 이미지를 대신 표시합니다.

C273x182와 같은 크기는 사용할 수 없습니다.

에러가 표시되거나 썸네일이 표시되지 않는 경우 C100x100 과 같은 확실히 표시되는 썸네일 값을 입력해 파일 경로가 올바른지, 또는 이미지 태그에 오타는 없는지를 먼저 확인하는 것이 좋습니다.

생성한 썸네일 이미지는 CSS를 이용해 여러가지 속성을 부여할 수 있고, 크기값을 강제로 지정해 더 작거나 크게 보이도록 할 수 있습니다.

예를들어 C600x400으로 600px x 400px 크기 썸네일을 생성했다면 실제 다운로드되는 이미지는 600px x 400px 크기의 이미지가 됩니다.

CSS를 이용해 이 이미지를

img{

width:300px;

height:200px;

}

와 같이 이미지 크기를 작게(1/4크기) 지정했다면, 이미지는 300px x 200px 크기로 웹페이지에 보여집니다.

하지만, 실제 이미지는 600px x 400px 입니다.

썸네일을 확대보기를 해야한다거나 하는 경우를 고려한게 아니라면 애초에 C300x200으로 썸네일 크기를 지정해 300px x 200px 이미지가 다운로드 되도록 하는 방법도 있습니다.

두가지는 결과적으로는 웹페이지에 300px x200px 크기의 같은 이미지를 표시하지만, 다운로드하는 실제 이미지 크기는 많이 차이가 나게 됩니다.

이미지가 몇개 안된다면 크게 문제가 되지 않겠지만, 글 목록에 수십게 이상의 글을 표시하는 포토갤러리 레이아웃 같은 것을 사용한다면 얘기가 좀 달라집니다.

경우에 따라서는 최초 페이지 로딩 속도가 최소 몇초 이상 차이나게 됩니다.

예를들어 글에 첨부된 아래 이미지는 3000px x 2000px, 900Kb 이미지입니다.

이 이미지를 600px x 400px 썸네일(C600x400)로 생성한 것이 아래 첫번째 이미지, 300px x 200px 썸네일(C300x200)로 생성한 것이 두번째입니다.

두 이미지는 각각 50.4k와 15.6k로 파일 크기가 3배이상 크기차이가 나게 됩니다.

이런 이유때문에 적절한 타입과 크기의 썸네일을 지정해서 사용하는 것은 중요합니다.

티스토리에서 공식 배포하는 기본 스킨들 중에는 글 목록에 "C600xC600"으로 썸네일 크기가 지정된 것들이 많습니다.

대부분 티스토리 스킨의 글 목록 썸네일 크기는 300px x 300px 이하가 사용됩니다. 경우에 따라서는 180px x 180px 인 경우도 있습니다.

썸네일이 작게 보이는 것은 600px x 600px 썸네일 이미지를 CSS로 조정해서 작게 보이도록 만드는 것입니다.

이럴 경우 불필요하게 큰 썸네일을 생성하고 있는 것이므로, C300x300 과 같은 값으로 변경을 해주면 초기 글 목록 속도가 조금 더 빨라지게 됩니다.

특히 사진을 많이 사용하는 포토블로그를 운영하는 경우 적절한 썸네일 이미지 최적화는 필 수 입니다.