이 블로그를 시작한 이유는 철저하게 일상에서 벌어지는 일들, 갑작스레 떠오르는 생각들, 순간적으로 이해하고 똑똑하다 생각했지만 시간이 지나며 잊어버리고 다시 멍청해지는 그런 소소한 것들을 기록하기 위함이었다.
육아휴직 시작하면서는 개인적 목표의 업무일지 같은 목적으로도 사용했다. 구글 광고는 주요한 목적이 아니었다. 광고에 거는 기대는 호스팅 비용이 나오면 좋겠다 정도였는데….
그런데 얼마전에 하드용량을 추가로 구매해야 했다. 광고에서는 나오는 수익은 Zero인데. 대체 뭐가 잘못된건가 살펴보니, 불필요하게 이미지 파일들을 원본으로 올리고 있었던 걸 찾을 수 있었다. 어차피 웹에서 보기에 kb 단위로 충분한데, 난 Mb 단위로 이미지를 올리고 있었던 거다. 분명 하드 용량도 잡아먹고, 트래픽도 잡아먹고 있었을거다.
그래서 대체 wordpress에 image를 올릴 때 어떻게 최적화해야 하는 지 찾아봤다. 1 2
Contents
1. image 파일을 upload하면 wordpress가 하는 일은
wordpress에 image를 upload하면 wordpress는 자동으로 Thumbnail, Medium, Large 사이즈의 image들을 추가로 생성한다.
이 값들은 admin 화면의 Settings > Media 메뉴에서 확인하고 변경할 수 있다. 이 블로그의 경우 아래와 같이 설정되어 있다. 현재 설정 값은 default 값이다.
그리고 이 글을 쓰고 있는 편집화면 오른쪽에서 원본이미지와 위에서 자동 생성된 이미지 사이즈 중 어떤 것을 보여줄 지 선택할 수 있다. 3
wordpress가 원본 파일을 어떤 식으로 처리하는 지는 아래 사진에서 확인해보자.
즉, 결국 화면에서 보이는 Size 이상은 무의미하다. 현재 이 블로그의 경우 797.984px의 Box를 사용하고 있으므로 사실 Full Size 뿐 아니라 Large Size도 Traffic 측면에선 과한 것이다.
2. 그렇다면 내 theme에 적합한 Custom Size를 지정하려면 어떻게 해야 하나 ?
내가 자주 사용하는 image size들이 있다면, 이 size들을 추가하면 웹사이트 운영이 더 편해지지 않을까?
예를 들어 위 블로그 사이즈인 797.984px을 고려해서 Large-Post 라는 size를 정의하면 Traffic 효율적인 이미지 사용이 가능할 것으로 보인다.
아래 문서에 상세히 설명이 되어 있다. 내용만 확인하고, 실제 적용해보지는 않았다. 필요한 경우 아래 문서를 참고해보자.
https://wpshout.com/wordpress-custom-image-sizes/
3. upload 하기 전에 불필요하게 큰 image를 조정하는 게 좋지 않을까 ?
어차피 사용될 일 없는 큰 image 파일은 upload하기 전에 resize하는게 좋지 않을까? 본인이 편한 image editor를 사용해서 resize해보자.
나같은 경우 crop 없이 단순히 image size를 조정하는 방법으로 알씨를 사용한다.
탐색기에서 image 파일을 선택하고 마우스 오른쪽 키로 Context Menu를 띄우면, 이미지 크기를 변경할 수 있는 창을 띄울 수 있다.
4. 대개 사진은 jpg로, 그래픽이나 글자가 들어간 경우 png로
자세히 읽어보지는 않았다. jpg는 용량면에서 강점이 있으나, 압축 과정에서 손실이 있다는 것으로 이해했다.
좀 더 자세히 알고 싶다면 다음 문서들을 참고해보자.
https://www.wpexplorer.com/optimize-images-wordpress-guide/
https://visualcomposer.com/blog/wordpress-image-sizes-guide/
5. JPG를 사용하는 경우 progressive JPG를 사용하는게 UX측면에서 좋다.
6. Lazy Loading을 사용하자.
모든 image를 한번에 load하는 대신 사용자가 image 근처로 view를 이동했을 때만 image를 load하도록 하자.
관련 플러그인은 아래를 참조한다.
https://wordpress.org/plugins/bj-lazy-load/
참조문서들에 나온 주요 내용들을 정리해보았다.
(2)번 글에선 image upload 전에 resize할 필요 없이, upload된 image들을 resize해서 하드 용량을 절약할 수 있게 해주는 플러그인들에 대해 정리해본다.
Footnotes
- 이 블로그를 계속 하는 목표 중 하나가 Digital Literacy를 키우는 게 목표다. 생각나는데로 뚝딱 하면 금새 포스팅할 수 있고, 또 재밌게 글을 쓰고 싶다.
- 참고문서 : https://www.wpexplorer.com/optimize-images-wordpress-guide/
https://visualcomposer.com/blog/wordpress-image-sizes-guide/ - 여기에서 full size 즉 전체 크기를 선택하고, 원본 파일이 Mb 단위였다면 트래픽의 낭비가 어마어마 했을거다.