티스토리 블로그 프로필 이미지 리사이징

대부분의 스킨에서 썸네일 리스트에는 이미지 리사이징 적용되어 있다. 이러한 리사이징 코드들은 용량을 줄여주고 필요한 만큼의 사이즈로 적절하게 이미지를 보여준다. 크기가 줄어들지 않고 그대로 첨부한 이미지가 적용되면 웹페이지 속도가 상당히 느려진다. 4G 또는 5G 환경이라고 해도 모바일에서는 데이터 부담이 커질 수 있고 웹페이지가 로딩되는 시간이 길어진다. 그렇게 되면 검색엔진에도 악영향을 끼치게 될 수 있다.

리사이징이 적용된 프로필 이미지의 용량

의외로 이 문제는 쉽게 해결할 수 있다. 대부분의 이미지 치환자엔 적용되어 있지만 댓글이나 방명록에 적용된 프로필 이미지나 로고 이미지에는 리사이징 코드가 적용되어 있지 않은 경우가 많다. 또는 https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1 치환자는 블로그 프로필 이미지를 가져온다. 자신의 블로그 스킨 구조에서 프로필 이미지는 블로그 프로필 이미지 치환자가 적용되어 있을 것이다. 그 앞(이미지 또는 썸네일 치환자)에는 아래와 같이 썸네일 사이즈에 적용되는 리사이즈 코드를 적용하면 된다.

//i1.daumcdn.net/thumb/C100x100/?fname=

내가 설정한 블로그 프로필 이미지는 처음부터 작게 설정해서 적용할 수 있지만, 다른 사람들의 블로그 프로필의 경우에는 이미지의 용량과 크기가 상당할 수 있으므로 코드를 적용해주면 이미지 사이즈가 적절하게 줄어들어 표시가 된다. 스킨 구조에 따라선 굉장히 중요한 작업이다.

예제

<!-- 프로필 -->
<div class="inner-box">
	<a href="https://creativestudio.kr/" title="프로필사진"><img src="//i1.daumcdn.net/thumb/C140x140/?fname=https://tistory1.daumcdn.net/tistory/3045799/attach/03a32db2cebe41198c9508d7c20b4ff1" class="img-profile" alt="프로필사진"></a>
	<p class="text-profile">라이브러리는 인간이 지닌 위대한 능력인 상상력을 기반으로 하여 여러가지 콘텐츠를 다루고자 합니다.</p>
</div>