워드프레스 이미지 최적화 방법 webp 변환 프로그램 플러그인 포토스케이프x

01

of 05

webp 파일 만들기

① 사용할 이미지를 다운로드 받거나 캡처한다. 이때 파일은 대부분 jpg, png 파일이다. 간단한 이미지 편집이 필요하다면 픽픽 (PicPick)을 사용한다. 조금 복잡한 편집이 필요하다면 포토샵을 사용한다. 하지만 99%는 픽픽 (PicPick)으로 충분하다.

② 편집이 다 끝났으면 포토스케이프x를 이용하여 webp 파일로 변환한다. 설정은 아래와 같이 품질을 100으로 한다.

③ webp 파일을 아래 사이트에 접속해서 압축한다. 예전엔 판다가 눈에 띄는 tinify 사이트를 사용했지만, 현재는 압축률이 더 좋은 compressor 사이트를 이용한다. 설정은 아래 이미지처럼 LOSSY를 선택하면 된다.

④ 이렇게 압축한 webp 파일을 워드프레스에 업로드하면 된다.

02

of 05

다소 복잡한 과정으로 webp 파일을 만드는 이유

이렇게 조금은 복잡한 방법으로 webp 파일로 변환하는 이유는 품질때문이다. 그냥 포토스케이프x에서 품질을 낮춰서 webp로 변환해도 되지만 이럴경우, 이미지에 따라서 품질이 상당히 나빠질 수 있다.

이미지 파일의 경우 2가지로 분류할 수 있다. ① 사진이나 그림이 대부분인 일반적인 이미지 파일 ② 문서나 텍스트 위주의 화면을 캡처한 이미지로 나눌 수 있다. 워드프레스에 글을 작성할 땐 이 두 가지 이미지를 모두 사용한다.

①의 경우 마음대로 크기를 조절하거나, 포토 스케이트 x에서 품질을 80 정도로 해도 이미지가 눈에 띄게 변하지 않는다. ②의 경우 사이즈를 조절하면 흐려지고, 포토스케이프x에서 품질을 낮추면 오히려 용량이 커진다.

때문에 ②의 경우 처음 캡처를 할 때부터 내가 원하는 사이즈에 맞게 캡처하거나, 이미지를 잘라내기 해서 크기를 맞춘다. 절대 사이즈 조절을 하지 않는다.

현재 내가 이글을 작성하면서 사용하는 이미지도 모두 이렇게 캡처해서 잘라내기로 내가 원하는 사이즈로 맞춘 후 작업한 이미지다. 그래서 이미지가 흐려지지 않았고 깨끗하게 보이는 것이다.

※ 위 과정이 너무 귀찮거나 복잡하다면 포토스케이프x만 사용해도된다. 대신 ①은 품질 80, ②는 품질 100으로 변환해야 한다.

03

of 05

워드프레스 이미지 최적화 방법 webp 플러그인

압축률이 좋다고 소문난 ShortPixel 이미지 최적화 플러그인을 사용하려고 했지만 유료라 다른 플러그인을 알아보게 되었다. 그래서 찾은 플러그인이 Converter for Media다. webp의 경우 무료로 최적화를 해준다.

마음같아선 최적화가 아닌 기존 png 파일을 아예 webp 파일로 변환하고 기존 png 파일을 삭제했으면 좋겠지만 이런 방식이 아닌 기존 png 파일과 webp 파일 모두 가지고 있다가 png 파일이 호출되면 webp 파일을 불러오는 방식인거 같다.

만약 기존 png 파일을 아예 webp 파일로 변경하고 싶다면 수동으로 하나씩 작업해야하는 불편함을 있지만 아래 ShortPixel 미디어 교체 활성화 플러그인을 사용하면 된다.

04

of 05

Converter for Media 설정방법

① Converter for Media 플러그인을 설치하면 아래와 같은 에러 메세지가 표시된다.

② 클라우드웨이즈 설정을 아래 이미지와 같이 변경하고 플러그인에 재접속하면 에러 메세지가 사라진다.

③ Converter for Media General Settings : 아래 이미지 처럼 설정한다. 원하는데로 설정값을 변경해도 된다. 만약 계속 png, jpg 파일을 사용한다면 맨아래 Conversion of new images를 ON 하면 된다.

④ Converter for Media Advanced Settings : 아래 이미지 처럼 설정한다. 원하는데로 설정값을 변경해도 된다. Image loading mode의 경우 클라우드웨이즈에서 webp 리디렉션 설정을 ON 했기 때문에 사용 가능하다.

⑤ Bulk Optimization : 실행하면 아래 이미지 처럼 %가 조금씩 올라가고 최적화가 완료된다.

05

of 05

Converter for Media 최적화 제외 파일 설정

① 다운로드용으로 올려놓은 몇몇 이미지 파일이 존재한다. 이 경우 제외 설정하면 된다. 워드프레스 → 미디어 → 파일 선택 후 아래 이미지처럼 Restore Originals를 선택한다.

② 완료 후 확인은 위 0%를 확인하면 된다.