본문 바로가기

티스토리스킨/팁.활용.확장

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

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

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

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


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

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

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

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


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

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


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

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


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

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



<img src="//i1.daumcdn.net/thumb/C600x600/?fname=[##_cover_item_thumbnail_##]" alt="">



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

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



썸네일
옵션 

비율 및 크기

가로/세로
원본 비율

 원본 속성

명 

C

가로x세로 형식으로 가로, 세로 픽셀 크기를 지정.

C300x200


무시

 유지

Crop. 

티스토리 스킨 대부분에서 기본으로 사용하는 썸네일 옵션.

지정한 썸네일 크기 영역을 모두 덮는 최소 크기로 리사이즈 한 후(가로, 또는 세로중 한방향은 지정한 크기와 일치하고 나머지 쪽은 남게됨) 가운데를 중심으로 배치하고 남는 부분을 잘라냄(이미지 가로/세로 비율 유지). 가로, 또는 세로로 잘린 이미지가 생성됨.

정해놓은 썸네일 크기(픽셀 단위)로 항상 이미지가 표시되기 때문에 일정한 모양을 유지하는 블로그 레이아웃에 최적임.

P

지정한 가로x세로 크기 안에 썸네일 이미지 전체가 가로/세로 비율을 유지한채 들어감.

P300x300

무시

 유지

Portrait.

지정한 썸네일 크기 영역 안에 들어갈 수 있는 크기로 이미지를 가로/세로 비율을 유지해 리사이즈한 후, 정 가운데에 배치하고 남는 영역은 흰색 배경으로 채움.

리사이즈한 이미지의 가로, 세로중 한쪽은 지정한 썸네일 크기와 일치하고, 나머지는 항상 지정한 영역보다 작거나 같음.

가로, 세로를 모두 지정하면 크기에 맞춰 이미지를 늘려 채움. 

가로, 세로중 한쪽 값만 지정하고 나머지는 0으로 고정.

R200x300, R600x0, R0x150

유지/무시

 유지

Resize.

가로/세로 값을 모두 지정하면, 리사이즈 하면서 이미지를 잡아 늘려 지정한 크기의 썸네일을 만듬(이미지 가로X세로 비율 깨짐). 지정한 썸네일 영역 크기와 일치하는 썸네일이 항상 생성되지만, 이미지와 지정 썸네일 크기의 가로 세로 비율이 다를 경우 이미지가 늘어나 보이게 됨.

가로, 또는 세로값 하나만 지정(이방법을 주로 사용)하고, 나머지를 0으로 지정하면 가로 세로 비율이 유지되며, 크기를 지정한 부분을 제외한 나머지 부분은 자동으로 가로 세로 비율에 맞춰 크기가 정해짐.

가로, 또는 세로로 가변인 레이아웃에 적합하며, 크롭되는 썸네일을 원하지 않을 경우 사용할 수 있음.

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 크기의 이미지가 됩니다.


<img src="//i1.daumcdn.net/thumb/C600x400/?fname=[##_cover_item_thumbnail_##]" alt="">


 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배이상 크기차이가 나게 됩니다.

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


600 x 400 Size: 50.4Kb                                                                300 x 200 Size: 15.6Kb



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

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

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


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

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

  • 비밀댓글입니다

    • 보호글 영역으로는 썸네일 이미지 치환자 정보 자체가 넘어오지 않습니다.
      스킨단에서는 보호글 썸네일 이미지를 표시할 수 있는 방법이 없습니다.

  • 사진 비율이 깨지는것땜에 블로그 글의 썸네일을 다 R로 적용되게 만들고싶은데요
    저 방식으로는 HTML에서 따로 제가 첨부한 이미지만 R로 설정하는것만 알겠드라구요
    글목록의 썸네일을 새로 사진올릴떄마다 R~로 고정될수있게 하고 싶은데 어딜 들어가야하나요???

    • 방식은 동일합니다.

      스킨 기본 룰을 따라 만들어진 스킨이면
      skin.html
      에서

      <s_article_rep></s_article_rep>
      안에 글목록이 옵니다.

      안에 보면

      <img src="//i1.daumcdn.net...

      로 시작하는 썸네일이 오게 됩니다.
      티스토리에서 표시되는 글목록이나 모든 이미지들은 이 경로를 통해 썸네일이 동적으로 생성됩니다.

      예를 들어

      <s_article_rep_thumbnail>
      <img src="//i1.daumcdn.net/thumb/C360x240/?fname=[샵샵_article_rep_thumbnail_raw_url_샵샵]" alt="">
      </s_article_rep_thumbnail>

      이렇게 글목록 썸네일 아이템 한개가 표시됩니다.

      [샵샵_article_rep_thumbnail_raw_url_샵샵]

      요게 글목록 한개의 썸네일이 되는 치환자입니다.
      글목록 종류에 따라(최근글, 인기글, 관련글 등) 치환자가 정해져 있고(약간씩 이름이 다릅니다.) 해당 부분의 치환자를 찾은 후 경로의 썸네일 표시 크기값을 지정해주면 됩니다.

      이미지 url 안의 중간 경로에 표시되는
      c360x240 과 같은 크기 정의값을
      원하는 r***x0 과 같은 규적으로 정의를 해주면 됩니다.

    • 헐 감사합니다 며칠전부터 어떻게 바꾸는지 몰라서 고민했던부분인데 드디어 고쳤어요!

  • 보호글도 썸네일이 뜨면 좋을 듯 한데요ㅠㅠㅠ HTML에서 수정이 안 되니.. 아쉽네요


닫기