Home Science Coding Design Etc. AboutMe

빠른 페이지 로딩을 위한 사이트 내 이미지 최적화 작업

April 26, 2020   /   2 mins read   /  

문제점 - 평소 습관대로 고화질 이미지들을 올렸다

블로그의 'About me' 를 수정하다보니, 이미지가 생각보다 엄청-나게 크다는 것을 깨달았습니다. 평소 연구실에서 그리는 이미지들의 경우 논문에 넣거나, 발표용 자료인 경우가 대부분이므로 고화질을 요구하게 되는데요. 그러다보니 자연스레 발표용 자료에 넣을때도, 심지어 카카오톡으로 이미지를 전송할때도 항상 최대화질(원본)을 유지해서 보내는 게 습관이였죠. 😅




너무 느린 웹사이트 로딩 속도, 원인은 용량이 큰 이미지들

인터넷을 크롬을 쓰다보니, 대부분 내용들이 캐쉬되어 있으니 블로그 내에서 속도가 느린 줄 몰랐습니다. 최근 CSS 파일을 수정하여 새로 로딩하려다보니 크롬의 경우 캐쉬파일들을 초기화(새로고침, ctrl+shift+R) 할 필요가 있었습니다. 그리고 로딩속도가 느리다는 사실을 그제서야 깨달았습니다.

조금 찾아본 결과, 현재 사이트에 올려진 이미지들의 용량이 너무 크다는 결론을 얻었고, 용량을 줄일 필요가 있었습니다. 이렇게 트래픽이 적은 블로그에서는 큰 의미는 없을 지 몰라도, 이러한 사소한 로딩 시간들이 쌓이면 꽤나 유의미한 차이가 발생합니다.




다른 사이트들의 프로필 이미지 크기는 어느정도?

우선 기존 제 블로그에 올라와있던 프로필 사진이 201 kb 였습니다. 사실 이정도가 용량이 큰 건 지 감이 없었는데요. 비교하기 위해 웹사이트 중 프로필 사진이 있는 것들을 찾아보았습니다. 그리고 용량을 확인해보았죠. 몇몇 사이트들의 프로필 사진의 크기를 비교해보았습니다.

GitHub

Linkedin

Naver


  • GitHub - 400x400 px 크기의 jpg 파일이 4~24 kb (큰 프로필로 보여줄 땐 24 kb)
  • Linkedin - 100x100 px 크기의 png 파일이 4 kb
  • Naver - 56x56 px 크기의 jpeg 파일이 1.9 kb

이를 통해, 적당한 프로필 사진의 크기는 약 20kb 이내임을 알 수 있습니다.


로딩속도 확보를 위해 이미지의 크기를 줄이자

다음 작업으로는 용량을 줄이는 작업이였는데요. 통상적으로 사진을 찍은 이미지의 경우 jpg, 디지털로 그린 경우 png 방식이 조금 더 용량이 적다고 알려져 있습니다.

간단하게는 확장자 변경을 통해 용량을 줄일 수 있고, 제 경우 조금 더 용량을 줄이기 위해 포토샵에서 저장할 때 Save for Web에서 사이즈 조절 및 압축방식의 변경 (jpeg low, gif 64 color, png-08 등 비교)을 통해 이미지를 수정하였습니다.

최종적으로는 화질은 거의 유지한채, 201 kb → 8 kb 로 용량을 줄였습니다.




요즘은 인터넷이 발달되어 200 kb 쯤이야 사실 별거 아닐 수도 있지만, 자잘한 용량들이 쌓여서 생각보다 꽤 차이가 발생하더군요. 블로그 서비스를 제공하는 플랫폼에서 블로깅을 하다가, 직접 관리를 하다보니 이런 점들도 알 수 있어 좋았습니다. 끝!