블로그 이미지 최적화 플러그인 적용

🔧

계기

티스토리에는 이미지를 업로드 하면 이미지 원본의 해상도가 아닌 본문의 크기와 비슷한 해상도로 변환시켜 표시해주는 플러그인이 있다. 이미지 데이터 전송량을 줄여주어서 블로그 로딩 속도도 향상시켜주고, 브라우저의 속도도 비교적 향상시킬 수 있는 아주 좋은 플러그인이다.

나도 한 번 플러그인을 사용해 봤는데, EXIF 의 Rotation 태그 때문에 레이아웃이 깨지는 문제가 발생했다. 이에 관한 글을 작성한 적도 있었다. (티스토리 반응형 웹스킨 이미지 최적화 플러그인과 EXIF -  2019.07.11 22:11)

당시에는 내가 속도를 중요시 하는 블로그가 아니라 생각해서 뭐 상관 없겠지 하고 그냥 넘어갔는데, 이번에 경기도와 서울에 놀러갔다 글을 쓰면서 브라우저 개발자 도구의 네트워크 항목을 봤는데, 글 하나 불러오는데 92.2MB나 불러오는 정말 너무 하다고 할 수 있을 정도로 많은 전송량이 적혀있었다.

개발자 도구에서 본 네트워크 사용량

화면 하단 상태 창에 92.2MB 전송^[각주:1], 끝: 14.21초^[각주:2] 라고 나타나 있다.

글 하나에 92.2MB면 500MB LTE 요금제로 글 5편만 봐도 데이터가 초과될 수 있는 상황인 것 같았다. 지나가다 글 하나 보고 100MB가 소진된 거면 이건 내 블로그가 문제라는 생각이 들었다.

티스토리 반응형 웹스킨 이미지 최적화 플러그인을 실행 시키면 어떻게 되는지 알아보기 위해 플러그인을 다시 실행시켜봤다. 결과는 당연하게도 엄청 큰 차이가 있었다.

플러그인을 켜고 개발자 도구에서 본 네트워크 사용량

화면 하단 상태 창에 7.76MB 전송, 끝: 7.51초 라고 나타나 있다.

이미지가 기기에 맞는 저해상도로 변환된 덕분에 전송 용량이 약 12배가 차이가 나고, 네트워크 전송 시간이 약 2배가 차이가 났다.

갖가지 실험들

이미지 갯수에 따라서 데이터 양과 다운로드 완료 시간은 어떻게 달라질까 하는 궁금함에 실험을 한 번 해보기로 했다.

1. 이미지가 한 장만 있는 글 (글 내의 이미지가 저해상도)

글 내에 이미지가 640x403 해상도 한 장만 있는 글에서는 당연하게도 차이가 거의 없었다. 해당 이미지가 변환되서 표시되지를 않아서 그런 듯 하다.

플러그인을 껐을 때

900.74 KB 전송, 끝: 4.83초

플러그인을 켰을 때

900.77KB 전송, 끝: 4.54초

플러그인을 켰을 때에는 경우에 따라 전송 속도가 플러그인을 껐을 때 보다 느리게 나오는 경우도 있긴 하였지만, 키거나 끄는 것에 대해서는 별 차이 없는 듯 했다.

2. 이미지가 여러 장 있는 글 (글 내의 이미지 한 장만이 고해상도)

글 내에 이미지중 한 장만이 고해상도인 4160x2336 으로 업로드 된 글로 실험했다.

플러그인을 껐을 때

6.35MB 전송, 끝: 5.02초

플러그인을 켰을 때

1.58 MB 전송됨, 끝: 4.52초

확실히 이미지가 저해상도로 바뀜에 따라서 전송량이 줄어들긴 했다. 하지만 전송량에 비해서 전송이 끝나는 시간이 그렇게 차이가 나지는 않았다. 오히려 여러번 새로고침을 했을 때 1.58MB로 전송량은 고정되어 있지만 5.26초로 시간이 더 늘어나는 경우도 있었다.

3. 축소판 이미지가 있는 블로그 글 목록 (큰 이미지가 없을 때)

예전에는 블로그 글 목록페이지의 축소판 이미지에도 플러그인이 영향을 줬었던 것으로 알고 있었다. 당시에는 글 대표 이미지의 원본 파일을 그대로 보여줬었는데, 아직도 글 목록 보기에서 원본을 보여주는지 궁금해서 실험해봤다.

플러그인을 껐을 때

884.08KB 전송됨, 끝: 2.06초

플러그인을 켰을 때

883.81 KB 전송됨, 끝: 1.62초

위의 결과와 마찬가지로 목록에서는 큰 차이가 없었다. 과거 블로그 글 목록에는 플러그인을 적용하지 않으면 글 대표이미지의 원본이미지가 나왔었는데, 어느샌가 플러그인을 적용하지 않아도 목록의 크기에 맞는 해상도로 변환된 이미지 파일을 보여주는 것으로 바뀐 것 같다.

4. 축소판 이미지가 있는 블로그 글 목록 (큰 이미지가 있을 때)

혹시 작은 이미지만 있는 목록이여서 그런건가 싶어서 큰 이미지가 많은 글 목록 페이지도 한 번 실험해 봤다.

플러그인을 켰을 때

1.07 MB 전송됨, 끝: 2.03초

플러그인을 껐을 때

1.07 MB 전송됨, 끝: 1.77초

역시나 차이가 없었다.

결론

고해상도의 이미지파일이 많지 않으면 사실 차이가 없다. 하지만 고해상도의 이미지 파일이 많은 글에서는 데이터 전송량과 페이지를 불러오는 속도에서 상당한 차이가 나는 것을 확인할 수 있었다.

혹시나 셀룰러 데이터 네트워크를 통해 방문하는 사람들을 위해서 플러그인을 켜두었다. 그리고 레이아웃이 깨지는 글을 조금씩 고쳐나가야 할 것 같다.

혹시나 몰라서 아래와 같이 레이아웃이 깨져보일 수 있다는 문구를 추가해 놓았다.

> Tattler's Blog

이미지 수정 중입니다. 레이아웃이 깨져보일 수 있습니다.

상단에 바꾼 모습

19/8/14 05:43 PM 추가

블로그의 모든 사진들을 잘 나오도록 Autorotate 프로그램을 이용해서 변환 작업을 완료했다. 생각보다 변환해야 하는 것이 많지 않아서 일찍 끝낼 수 있었다.

19/8/14 09:54 PM 추가

이미지를 기기에 맞게 출력해주는 기능은 srcset 이라는 HTML 5.1부터 정의된 속성으로 사용되는데^[각주:3] 만약에 브라우저가 해당 구문을 지원하지 않으면 저해상도로 변환된 이미지가 아닌 원본 이미지가 보여지게 된다. 참고로 IE11은 지원하지 않는다.^[각주:4]

19/08/20 06:10 PM 추가

항상 크기가 줄어드는 줄 알았는데, 예외도 있었다. 205번 글에 있는 png 파일이 그 예외였다. 오히려 197KB파일이 558KB로 증가할 때도 있었다. 혹시나 jpg로 변환해서 그런가 싶었는데, png 파일 그대로였다. 무슨 이유에서 그런 것 일까?

다운로드 받은 이미지 분석1

둘 다 PNG 형식이었다.^[각주:5]

   

다운로드 받은 원본의 속성(좌) 티스토리 자체 변환본의 속성(우)

변환된 것이 361KB 가량 용량이 더 크다

1. 전송된 크기 [본문으로]
2. 모든 요청을 받아들이는데 걸리는 시간 [본문으로]
3. 출처: www.quora.com/What-are-the-differences-between-HTML5-and-HTML5-1 [본문으로]
4. 지원하는 브라우저 리스트는 caniuse.com/#feat=srcset 에서 볼 수 있다. [본문으로]
5. 우측의 Vector.jpg 에서 jpg는 테스트용으로 혹시 파일 확장명에 따라서 그림 형식이 달라지나 테스트하기 위함이었다. [본문으로]