일반적으로 반응형 스킨이 아닌 경우에는 이미지 기본 넓이를 체크하고 싶지 않아도 관리자가 알아서 체크하게 되어 있습니다.


왜냐하면 반응형 스킨이 아닌 경우 대체적으로 티스토리에 삽입되는 이미지를 자동 리사이징하는 로직이 들어가 있지 않고, 그렇기 때문에 유저가 직접 설정해준 이미지 기본 넓이에 따라서 블로그에 들어가는 이미지의 최대 넓이가 정해지기 때문입니다.


하지만 반응형의 경우 삽입되는 이미지를 자동 리사이징하는 로직이 들어가 있는 경우가 많기 때문에, 오히려 이미지 기본 넓이를 체크하는 것을 잊게 될 가능성이 높습니다. 하지만 블로그 최적화(딱 맞는 크기의 이미지를 보여주는 것이 이미지의 해상도를 최적화하면서도 블로그의 속도를 조금이라도 높일 수 있습니다.)를 위해서라도 이미지 기본 넓이를 적절하게 바꿔주는 것은 필요합니다.


이미지 넓이는 PC에서 보여지는 것을 기준으로 합시다. 모바일은 기기마다 해상도도 다양할 뿐더러 레티나 디스플레이 등 pixel density가 2, 3 인 기기들도 있으므로 모바일임에도 불구하고 PC수준의 해상도를 가진 이미지를 요구하기도 합니다.




반응형 스킨에서 이미지 기본 넓이를 확인하는 방법은 간단합니다.


단, 인터넷 익스플로러에서는 이 방법을 사용하기 어렵습니다. 웬만한 반응형 스킨들이 모두 크로스브라우징을 고려하여 제작되었으므로, 다른 브라우저에서도 무리없이 스킨이 잘 보일 것입니다. 지금 하려는 이야기는 구글 크롬을 기준으로 합니다.




내 블로그에 임의로 포스팅을 합니다. 이 때 들어가는 이미지는 블로그 영역의 최대 넓이보다 더 넓은게 좋습니다.


이미지를 넣은 다음(이미 넓은 이미지가 들어가 있다면 그 이미지를 기준으로 하셔도 좋습니다.) 포스팅 본문에서 F12를 누릅니다. 그럼 아래와 같은 개발자 모드가 보일 것입니다.



우리가 눈여겨봐야 할 것은 위의 코드가 아니라 밑의 크롬이 보여주는 레이아웃을 보여주는 박스 그림입니다.


이 그림은 스크롤을 쭈욱 내리다 보면 거의 맨 아래쪽에 있습니다.



이 그림에서 000 x 000 중에서 왼쪽 값이 기준이 됩니다. (만일 테두리 등이 들어간 스킨이라면 박스에 값이 좀 많이 들어가 있을 겁니다. 그 경우 맨 가운데 안쪽 박스에 들어간 값을 기준으로 합니다.) 이게 PC에서 보여지는 이미지의 최대 넓이값입니다.


* 주의 : 일정 정도 이상의 해상도가 되는 PC에서 이 작업을 해야합니다.. 개인적으로 이 작업을 하는 PC는 가로폭 1200px 이상을 권장합니다. 그렇지 않은 경우 반응형 스킨의 경우 이미지가 자동 리사이징 되어서 원하는 값을 얻지 못할 수 있습니다.




이제 티스토리 관리자 모드로 들어갑니다.



[글 설정]에서 [글쓰기 가로폭]에 방금 봐놨던 값을 삽입합니다.


그러고 보니 저도 PC모드에서의 최대값은 640인데, 650으로 되어 있더군요. 바꿔줍니다.




사실 이 값이 기준값에서 많이 틀어져있다면 새 글을 쓰고 나서의 이미지와 기존 이미지와의 차이를 많이 느낄 겁니다. 하지만 저처럼 650->640으로 바꾸는 것과 같이 많이 틀어져있지 않다면 차이를 눈으로 확인하기가 어렵습니다. 하지만 컴퓨터 시스템상의 로딩속도에는 분명 차이가 있다는것...


반응형 스킨을 쓰는 모든 티스토리 블로거들은 신경써야 할 부분이 되겠습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바