2번에 이어서 텍스트 큐브 트래픽 줄이는 과정으로 이미지를 외부에 저장해 사용하는 방법에 대해서 이야기 해보겠습니다.
이 부분은 html에서 너무 간단한 기초태그인 img태그를 단순히 활용하는것입니다.
요즘에 어설픈 해상도로 포스팅 하면 보는 재미가 뚝 떨어지기 쉽습니다. 워낙 고해상도 장비가 많고 스마트폰 마저 FULL-HD 해상도를 달고 나오는 세상입니다.
그래서 외부에 이미지를 업로드 해놓고 그걸 외부 링크로 달아버리는것입니다.
대표적으로 외부에 업로드 할만한 서비스는 알려진것으로 플리커(http://www.flickr.com), 구글 플러스(https://plus.google.com), 스카이드라이브(https://skydrive.live.com)가 많이 언급됩니다. 그외에도 티스토리(tistory.com)나 무료웹호스팅인 hostinger(hostinger.kr)같은 서비스를 활용하는 방법도 있습니다.
해당 서비스들은 거의 무제한에 가까운 용량에 별다른 제한없는 외부 이미지 링크를 제공하기 때문에 사진이 많은 블로깅을 하시는 분들께 극추천 드립니다.
이같은 내용만 봐서는 사실 너무 오래되고 고리타분한 내용입니다. 그냥 img태그 써라는 말밖에 되지 않으니까요.
하지만 이렇게 포스팅 하는 이유는 바로 사진 팝업플러그인인 LightBox 적용 때문입니다.
그냥 html태그로 img= 활용해서 이미지를 붙여넣기 하면 원본 이미지가 확 줄어서 보이게 되고 원본을 보려면 별도 링크를 찾아서 새창으로 열어서 봐야 하는 불편함이 생깁니다. 그냥 첨부파일의 경우에는 lightbox가 잘 적용되지만, 외부 링크의 경우에는 적용이 잘 안되기 때문이죠.
그래서 외부 이미지에도 적용되는 플러그인을 사용해보았으나 그게 잘 작동하지 않아서 찾은 방법이 조금 번거롭지만 약간의 수작업의 도움을 받아서 하는것입니다.
우선 여기에 사용하는 태그부터 알려드리겠습니다.
텍스트큐브에서 이미지 태그는
형식으로 되어있습니다. 기존이미지를 변경할때는 저 위치를 찾아서 아래 태그로 바꿔 삽입하면 됩니다. 그냥 첨부터 넣을때는 아래 태그를 원하는 이미지 위치에 넣으면 되겠죠?
<div class=”imageblock center” style=”text-align: center; clear: both;”>
<a href=”http://www.url.com/img.jpg” rel=”lightbox”><img src=”http://www.url.com/img.jpg” width=”폭” height=”높이” /></a> </div>
이 HTML 태그가 lightbox에 적용되는 태그로서 두군데의 주소 부분에 이미지 주소를 넣고 폭과 높이를 블로그에 맞게 수정해서 바꿔주면 됩니다.
스마트폰으로 사진하나만 찍어도 거의 1메가가 넘습니다. 맛집 한번 다녀와서 포스팅 했다가 방문자당 5~10메가 넘는 트래픽을 소모한다면 하루 트래픽을 금새 소모하게 되어 홈페이지가 먹통될겁니다. 그걸 미리미리 예방하기 위해서는 외부 서버를 잘 활용해야 하겠습니다.
다음번엔 마지막 3번째인 압축전송에 관해서 알려드리겠습니다.