워드프레스는 네이버, 티스토리 블로그와 다르게 개인이 호스팅 서버의 비용을 지불하고 사용하는 방식이다보니 사진이나 동영상의 용량 관리에 큰 신경을 써야한다. 사소해보이는 스마트폰 사진 1개의 용량이 3MB에서 많게는 10MB까지 잡아 먹기 때문에 별 생각없이 이미지를 마구 업로드하다보면 분명 서버용량이 부족해지기 때문이다.
워드프레스를 이용하는 사람들이라면 기본적으로 이미지 관리 툴을 사용하고 있을텐데 매번 사진이나 이미지 용량을 줄이는 것이 상당히 귀찮은 것이 사실. 이번 포스팅에서는 워드프레스에 이미지를 업로드 하는 것만으로 이미지 형식을 webp파일로 변환하여 사진 용량이 줄어들게 설정해본다.
워드프레스 이미지 사진 용량 줄이기 WEBP 란?
WEBP는 구글에서 개발한 이미지 파일 형식으로 JPEG, PNG, GIF와 같은 이미지 형식으로 다른 이미지 형ㄱ식에 비해서 매우 높은 압축률과 빠른 디코딩 속도를 가지고 있는 것이 특징이다. WEBP는 손실 압축과 무손실 압축 모두를 지원하며 손실압축을 사용할 경우 이미지 품질을 낮추면서 파일 크기를 크게 줄일 수 있고 무손실 압축은 파일의 전체 크기를 줄이면서도 이미지 품질을 그대로 유지한다.
쉽게 말해 일반적으로 사용하는 JPEG 형식에 비해서 용량은 작으면서도 동일한 퀄리티를 경험할 수 있어 웹 에서의 업로드 및 로딩이 빠른 장점이 있다.
Converter fot Media 플러그인
- 워드프레스 플러그인 추가
- Converter fot Media 검색
- 설치
워드프레스 왼쪽 메뉴바에서 플러그인 추가를 선택해 Converter fot Media를 검색 후 설치한다. 위 사진에는 이미 설치가 되어있는 상태이기 때문에 활성이라는 문구가 표기된다.
- 플러그인
- Converter fot Media
- Settings 선택
왼쪽 메뉴바에서 플러그인 선택 후 Converter fot Media를 찾는다. 가장 앞 부분 Settings을 선택한다.
- Converter fot Media 세팅
- 스크롤을 아래로 내려 이미지 대량 최적화 선택
- 변경사항 저장 선택
위 화면이Converter fot Media의 설정 화면이다. 영어로 표기가되어 뭐가 뭔지 모르겠다면 마우스 오른쪽 버튼을 선택해 ‘한국어로 번역’을 선택한다.(구글 크롬기준) 기본적인 무료 기능만 사용할 것이기 때문에 모든 것을 알 필요는 없다.
스크롤을 아래로 내려 ‘이미지 대량 최적화’ 메뉴로 이동한다.
이미지의 대량최적화 메뉴에는 동그란 두개의 썸네일이 보이는데 아랫부분 ‘대량 최적화 시작’을 선택한다. 대량 최적화 시작을 선택하면 현재 워드프레스 서버에 업로드 되어있는 이미지들이 webp로 자동 변환된다.
만약 포스팅을 완료한 상태에서 Converter fot Media 설정 메뉴로 들어와 대량 최적화 시작을 눌러주면 이미지 파일이 자동으로 webp로 변환된다는 말이다. 이렇게 간단한 방법으로 이미지 파일을 webp로 변환할 수 있다.
하지만 이 과정 자체가 굉장히 편리한 것이 맞지만 더 편리하게 사용할 수 있는 방법이 있다. 바로 이미지를 업로드 할때마다 자동으로 webp 파일로 변환되게 설정하는 것이다.
Webp 자동변환 설정
- Converter fot Media Setting
- 고급 설정
- 변환방법 -> GD 선택
- 변경 사항 저장
Converter fot Media 두 번째 탭인 ‘고급 설정’을 선택한다. 두 번째 메뉴에 보면 변환 방법이라는 것이 보이는데 이 부분이 처음에는 이미지킥으로 되어있다. 이 것을 GD로 바꾸어주면 이미지를 업로드할때마다 자동으로 Webp파일로 변환된다.
이미지나 사진의 용량을 줄이기 위해 별도의 프로그램을 설치할 필요없이 워드프레스의 플러그인 하나로 이미지 용량 절약이 가능해졌다. 그만큼 포스팅에 쏟는 시간과 열정을 줄일 수 있게 된 것이다.
반드시 변경 사항을 저장하다를 선택한다.
Server configuration error(서버 구성 오류) 대처 방법
나는 클라우드웨이즈에서 벌처 서버를 사용하고 있는데 Converter fot Media을 처음 실행하면 Server configurationerror(서버 구성 오류)가 발생했다. 오류코드로는 “bypass_apache”. 이럴땐 당황하지 말고 위 사진의 고급 설정에서 ‘이미지 로딩 모드’에 ‘Nginx 우회(bypassing_apache 오류 문제가 있을 때 사용)’을 선택해주고 저장하면 문제가 해결된다.
워드프레스 함께 보면 좋은 포스팅
워드프레스 이전 글 링크 넣기
워드프레스 SNS 공유 버튼 만들기(카카오톡,네이버,페이스북 등)
워드프레스 모든 이미지 중앙정렬 자동