03
25

좌 - 티스토리 / 우 - 원본 이미지

티스토리엔 이미지를 리사이징 해주는 치환자가 있다.

이미지가 크면 로딩 속도가 길어지고, 로딩 속도가 길어지면 길어질수록 검색 순위에도 안 좋은 영향을 주기 때문이다.

그러므로 치환자를 통해 이미지의 크기를 미리 지정해주고, 티스토리 서버에서 작게 리사이징 한 이미지를 보내주는 방식을 통해 웹 페이지의 용량을 줄일 수 있다. 사용법도 간편해서 스킨 제작 시에도 자주 사용되는 편이다.

 

다만 이걸 사용하면 평소엔 괜찮은데,

  1. 썸네일로 움짤을 사용하는데, 해당 스킨 코드에서 지정한 크기보다 gif의 가로 세로 폭 크기가 클 때
    (즉, 티스토리 측에서 gif 이미지를 리사이징할 때)

  2. 본문에서 사용되는 gif 이미지 가로 폭이 1280px을 넘어갈 때
    (이 역시 티스토리 측에서 gif 이미지를 리사이징할 때)

위 이미지와 같이 gif 재생이 버벅이는 문제가 생긴다.


1번 문제(리스트 썸네일)의 해결방법

① 치환자 사용 시 gif보다 큰 크기로 지정한다.

//i1.daumcdn.net/thumb/~ <- 왼쪽과 같은 코드를 스킨 편집기 내부에서 검색해보면, R520x520처럼 되어있는 부분이 자주 등장한다는 걸 알 수 있다. 이 부분은 딱 보기에도 알 수 있듯 썸네일의 크기를 결정하는데, gif 이미지를 리사이징 하지 않도록 숫자 값을 최대한 키워주기만 하면 된다.

다만 숫자를 너무 키우면 리사이징의 의미가 없어지므로 주의.

 

② 다른 치환자 방식을 사용한다.

R을 제외한 C, P, S 방식은 모두 이미지 원본의 속성을 무시하므로, 이 방식을 사용하면 된다.

원본의 속성을 무시한다는 건 gif를 jpg화 시킨다는 뜻인데, 이러면 용량도 잡을 수 있고 크기도 원하는 대로 설정할 수 있다. 유일한 단점이 있다면 이미지가 움직이지 않는다는 것. 하지만 한 게시글의 썸네일인 만큼 보통은 움직일 이유가 없다.

 

③ 치환자 자체를 사용하지 않는다.

스킨 수정을 통해 이미지 치환자 앞에 붙은 //i1.daumcdn.net/thumb/~ 같은 식의 코드를 삭제해주면 된다.

물론 이러면 원본 이미지를 그대로 불러온다는 뜻이므로, 로딩 속도는 포기할 수 밖에 없다.


2번 문제(본문 내부 이미지)의 해결방법

① srcset을 초기화한다.

html의 img는 여러 개의 src(원본 이미지 링크)를 가질 수 있다. 이때 사용되는 것이 srcset.

srcset에 있는 이미지 링크 중 어느 것이 나오는지는 브라우저의 판단이며, 사용자가 구태여 알 필요는 없다.

다만 문제가 되는 티스토리표 리사이징 gif의 링크는 srcset에 들어가므로, 간단한 코드를 통해 이 srcset 자체를 지워주면 해결된다.

// Vanilla JS
const imgs = document.querySelectorAll('img');
if(imgs.length > 0){
  imgs.forEach(function(img){
    if(img.getAttribute('srcset') == null) continue;
    img.setAttribute('srcset', '');
  });
}
// Jquery
$('img[srcset]').each(function(){$(this).attr('srcset', '')});

 

이 방법들이 근본적인 해결법은 아니다. 기껏 해봤자 눈속임 정도.

더 나은 방안을 찾게 되면 추가할 예정.


참고

 

COMMENT