안녕하세요. 오늘은 티스토리 블로그에 새롭게 추가된 썸네일 스킨 치환자에 대해서 알아보겠습니다.
기존에 티스토리는 썸네일 API를 공개하지 않았기 때문에
포스팅 본문의 썸네일을 추출하기가 쉽지 않았습니다.
그래서 기존의 스킨 개발자 분들은 Ajax를 이용한 이미지 추출을 하였습니다.
다만 이방식을 했을때는 바로 썸네일이 나타나지 않고 시간이 소요되며
RSS를 전체공개 설정을 해야하는 단점이 있습니다.
그러던 중 티스토리에서 썸네일 이미지 주소의 스킨 치환자를 추가 합니다.
https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F23406E3956B4F6F82F
기존의 썸네일 스킨 치환자
<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F23406E3956B4F6F82F">
하지만 이 방식 또한 치명적인 단점이 있었습니다.
바로 썸네일의 크기를 조절하지 못하고
썸네일의 이미지 사이즈 크기가 가로값이 750px인 썸네일로 제공된다는 점입니다.
제가 사용하는 블로그 본문의 내용 사이즈가 800px로 작성되는데
고작 50px줄어드니 이미지 크기가 거의 동일한 것과 마찬가지겠죠?
기존의 썸네일 치환자를 사용 했을 경우
홈 화면에 썸네일이 작은 것 처럼 보여도 750px 사이즈를 추출해서 갖고
오기 때문에 매우 큰 이미지를 로딩하는 셈입니다.
이게 뭐가 문제냐고 할 수 있겠지만
모바일과 PC에서 반응형웹에서는 특히 모바일은 페이지 로딩속도가 급격하게 늘어나
매우 치명적입니다.
웹페이지 속도를 확인 할 수 있는
https://developers.google.com/speed/pagespeed/insights/
에서도 가장 큰 문제점이 이미지 최적화를 거론 하였습니다.
그래서 불편을 감수하더라도 대부분의 개발자분들은
Ajax를 이용한 이미지 추출을 하고 있었습니다.
저도 페이지 로딩 속도 향상을 위해서 고민하던중
제가 사용하는 CCZ-CROSS 스킨의 제작자이신 흉내내기 님께서 엄청난 정보를 주십니다.!
- INFO
- CCZ-CROSS 스킨 소개
이번에 새롭게 공개된 티스토리 반응형 웹 #2번에
썸네일을 주소와 함께 호출 할 수 있는 방법이 있다고 하셨습니다.
아니!!! 티스토리가 2015년 반응형 웹 스킨 공모전도 하고나서
자체 반응형 웹스킨을 출시하더니!!
이번에 2번째로 공개한 스킨에서 코드가 존재하다니!!
바로 확인을 해보았습니다.
새로운 썸네일 스킨 치환자 https://t1.daumcdn.net/cfile/tistory/23406E3956B4F6F82F
<img src="//i1.daumcdn.net/thumb/C210x150/?fname=https://t1.daumcdn.net/cfile/tistory/23406E3956B4F6F82F">
와 진짜 핵소름...
그동안 이것 때문에 얼마나 복잡한 코드를 사용 하였던가..
ㅠ_ㅠ 손쉽게 썸네일 사이즈를 조절 할 수있는 스킨치환자를 만들어다니...
서운하기까지 합니다. 스킨가이드에는 새로운 치환자를 소개하지 않았거든요!!
썸네일 치환자 하나만 바꿨을 뿐인데 기존 사이트 맞나요?
PC환경은 무려 80이상 속도 점수까지 확득합니다
기존에도 썸네일 사이즈 크기는 여러 사용자들에 의해서 공개가 되었습니다.
썸네일 싸이즈의 코드를 살펴보면
이건 원본 파일입니다.
https://t1.daumcdn.net/cfile/tistory/2311913A56B501C135 - 5.54MB
기존 썸네일 스킨치환자 적용시 이미지
http://cfile1.uf.tistory.com/R750x0/2311913A56B501C1356014 - 5.54MB
이미지 파일이 750px 이하기 때문에 원본과 썸네일의 파일 용량은 똑같습니다 ㅡ_ㅡ
기존 치환자로 위 이미지를 대표이미지로 지정해놓았다면 홈화면은.. 상상도 하기 싫군요.
P0x0 - 원본 비율 살리고 그대로 가져오는 방식입니다.
http://cfile1.uf.tistory.com/P200x200/2311913A56B501C1356014 - 606KB (약 10분의 1수준 입니다)
R0x0 - 원본 비율 살리고 세로 및 가로 길이 많큼 그대로 가져오는 방식입니다.
http://cfile1.uf.tistory.com/R200x0/2311913A56B501C1356014 - 604KB
http://cfile1.uf.tistory.com/R0x160/2311913A56B501C1356014 - 762KB
C0x0 - 원본 비율을 무시하고 지정된 비율로 잘라서 그대로 가져오는 방식입니다.
http://cfile1.uf.tistory.com/C74x107/2311913A56B501C1356014 -238KB
http://cfile1.uf.tistory.com/C150x150/2311913A56B501C1356014 - 520KB
http://cfile1.uf.tistory.com/C150x100/2311913A56B501C1356014 - 360KB
S0x0 - 원본 비율을 무시하고 자릅니다. GIF도 멈춥니다.
http://cfile1.uf.tistory.com/S150x150/2311913A56B501C1356014 - 7.6KB
(썸네일 이미지를가장 줄이는 코드S 입니다.)
지원하는 썸네일 크기는 아직 전체를 잘모르지만
4:3 사이즈는 대부분 지원합니다.
이렇게 4종류의 썸네일을 제공합니다.
아직 썸네일 사이즈는 수치가 공개되지않아서 일일히 값을 대입해보는 방식 밖에 없습니다.
늦게나마 썸네일 스킨치환자를 만들어준 티스토리가 정말 고맙네요!!
그럼 다들 썸네일로 블로그를 이쁘게 꾸미시고 더빠른 로딩을 위해서 바꾸시길 바랍니다.
