워드프레스 이미지 최적화 개요
워드프레스 글 작성을 하면서, 사진 안올리는 사람 없을 거라 본다. 단 한 장이라도 글을 읽는 독자들에게 도식화된 또는 정형화된 사진을 올려야 글 내용을 이해하는 데 도움을 주는 적절한 수단이 되기 때문이다.
자, 그럼 여러분들은 사진들 업로드 시에 혹시 그냥 올린 흑우들 있는가? 일단 이게 무슨 말이냐,.. 하면 사진 파일 용량이나 파일의 확장자가 상관없이 마구 올리는 것을 말한다. 이는 여러분의 사이트 SEO에 전혀 도움이 되지 않는 방법이다. 만약 이런 분들이 계셨다면 잘 찾아오셨다.
이번 포스팅은 사진 파일과 용량이나 확장자를 전혀 고려하지 않고, 사진 압축도 없이 사진을 업로드 하시는 분들에게 꼭 필요한 부분이라 할 수있다.
이미지 최적화 이유
그렇다면 이미지 최적화를 왜 해야 하는 걸까? 가장 먼저 속도이다. 일반 사진을 그냥 올리게 될 경우, 확장자가 대부분 JPG일텐데 JPG파일은 대게 해상도가 높아 무거운 호환이어 업로드 후, 화면이 현시 되는데 로딩 시간이 걸릴 수 있다.
물론 컴퓨터 성능이 좋고 서버가 상급이며 속도 관리를 해주었다면 이를 걱정하실 필요 없다. 하지만 가성비를 원하는 분들이라면 또는 내 서버에 용량을 아끼고 싶은 신 분들이라면 이미지 최적화가 꼭 필요하다는 것이다.
구글 SEO를 노린다면,
그리고 구글 SEO 상위에도 접근할 수 있게 된다. 기본적으로 구글은 빠른 서버를 좋아한다. 만약 인터넷에 올라오는 글들이 느리고 사진이나 그림도 뜨는 데 한참 걸린다면 1) 기본적으로 독자들이 이탈할뿐더러 2) 구글SEO에서 좋은 점수를 득하지 못하게 된다. 도메인 점수나 내 홈페이지 성능에 영향을 미치지 않기 위해서라면 이미지 최적화는 이제 필수라고 할 수 있다.
이미지 용량(기본)
이미지 용량이 왜 중요할까? 티스토리나 네이버에서 블로그를 사용하면 각 그 기업의 서버를 이용하기에 한 번에 큰 용량을 올리지 지 않는 이상(네이버는 2G정도 제한있음) 몇 천 개의 포스팅을 하여도 받쳐줄 수 있다. 하지만 워드프레스 같은 경우, 기본적으로 내 고유 서버를 기반으로 하기에 정해진 용량이 있어 한도 내에서 사용해야 한다. 본인 같은 경우, FastComet 호스팅을 이용하고 있는데 현재 아래의 사진과 같이 남은 상황이다.
워드프레스 이미지 최적화 방법
이미지 용량 줄이기
먼저, 간단하게 이미지 용량을 줄이는 방법을 말씀드리겠다.
아래의 TinyPng 사이트를 접속한다. 그리고 사이트 중앙의 Drop your Webp, PNG, or JPEG를 클릭한다. 이어 내가 사용하고자 하는 사진 파일을 업로드 한다.(여러장 올릴 수 있음)
▶ TinyPng 접속 → 사진 업로드 → 압축(완료)
그렇게 업로드 한 뒤 열기를 눌러주면, Compessing 작업을 하는 표시가 나오게 되며 시간이 조금 지나면 Finshed 라고 현시가 된다. 이는 사진 압축이 완료되었다는 말로 바뀐 사진 용량을 보면 확연하게 줄어졌다는 것을 볼 수 있다.
▶2.9m → 909.5KB 약 68%정도
사실 화면에 나온 909.5KB도 본인에게는 큰 용량이라 생각한다. 디자인과 퀄리티를 중요시하는 분들에게는 물론 픽셀 하나하나가 중요한 부분이 될 수 있지만 본인은 육안으로 설명만 가능하게끔 참조 사진 정도만 주로 올려서 본인에겐 꼭 필요한 작업이라 할 수 있다. 여러분도 꼭 이부분을 이용하여 이미지 용량을 줄이시기를 바란다.
플러그인 설치(Convert for Media)
두 번 째는 플러그인 설치이다. 이미지 용량을 줄이는 플러그인을 정말 많이 써봤는데 그 중에 제일 마음에 드는 것은 Convert for Media였다. 플러그인 새로 추가 부분에서 아래의 사진과 같은 Convert for Media를 찾아 설치하여 준다.
먼저, 이걸 설치하는 이유는 설명 한줄로 끝이 난다. Speed up website by using our WebP & AVIF Conveter. 이는 Webp라는 기능을 이용하여 우리 사이트의 속도를 올려준다는 것이다. 그럼 Webp가 뭐냐?(자세한 설명은 이 곳 클릭)
▶ Speed Your Website
Webp는 2010년 구글에서 만든 이미지 포맷이라 하는데, 구글에서 Webp를 이용하게 되면 JPEG/JPG나 PNG파일 대신에 Webp파일로 압축하여 송출한다. 이는 기본적으로 JPEG포맷보다 30% 정도의 크기를 줄일 수 있다고 한다.
이쯤 됐으면 설치가 완료 됐을 것이고, 설치가 완료된 사람은 아래의 항목으로 내려가자.
Convert for Media 설정방법
설치한 뒤 크게 건드릴 부분이 없긴 한데, 몇 가지만 손을 보자면 General Settings 탭에서 WebP를 선택하여준다. AVIF로도 변경이 가능한데 이는 유료버젼이기에 현재는 체크가 불가능 할 것이다. 참고로 AVIF가 이미지를 최적화하는데 더 좋은 기능이라 할 수 있다.
▶General Settings → Webp 선택
그리고 아래의 사진과 같이 본인은 이미 Webp로 모두 변환 시켜 놓았지만 이걸 처음 설치하시는 분들은 먼저 Force the conversion of all images again을 클릭후, Start Bulk Optimization을 눌러 내가 등록했던 모든 포스팅의 사진들을 모두 WebP로 한번에 변환시켜 준다. 이 얼마나 편리한 기능인가?
▶Force the conversion of all images → Start Bulk Optimization
그리고 마지막으로 Advanced Settings 탭에 들어가 Conversion method를 GD로 입력하여 바로바로 Webp로 변환되게끔 설정을 하고 Save Changes를 눌러주면 된다.
▶Advanced Settings → GD 선택 → Save Changes
위의 과정을 잘 따라 했다면, 오늘 워드프레스 이미지 최적화 작업은 완료이다. 혹시나 헷갈리거나 어려우신 분들은 다시 올라가서 천천히 보시기 바란다. 그래도 모르겠다, 에러가 발생한다 라는 분들은 댓글을 남겨 주시기를 바란다.
결론
여러분은 앞으로 사진을 올릴 때 이제 모두 Webp로 저장 될 것이다. 단, 처음 업로드 시에는 JPG나 PNG파일로 올라가게 될 것이다. 그리고 자연스레 속도도 15%정도 올라 갈 수 있다. 웹 저장 과정에서 변환되는 원리이기에 헷갈릴 수 있다. 향후 저장 공간이 적어지고 글이 많아지며 어느정도 수익이 좀 생겼을 때, AVIF PRO버젼으로 변경해도 괜찮다고 본다.
이렇게는 하지말자
하지만 포스팅 수가 얼마 없거나 수익도 얼마 나오지도 않느 상황인데, 유료부터 해보겠다는 마음을 갖지 않길 바란다. 무료버젼으로도 충분히 절약이 가능하기 때문이다.
마지막으로 혹시나 디자이너 분들, 해상도나 픽셀을 1픽셀도 깍아 먹지 않아야 한다.라는 등 정말 고화질로 저장해야겠다 라는 분들에게는 위 과정을 비추하는 바다.
