워드프레스 이미지 최적화 방법

이미지 최적화란 압축, 크기 자르기, 파일 형식 변환 등의 방법으로 파일의 크기를 줄여주는 작업을 말합니다.

이미지는 웹사이트 저장 공간을 많이 차지하기 때문에 사이트 로딩 속도에도 영향을 미치고, 이는 결과적으로 사용자 경험과 SEO(검색엔진최적화) 점수에도 안 좋은 영향을 미치는데요.

이미지를 최적화 하면, 이미지 크기가 줄어들어 페이지 속도가 빨라지고, 결과적으로 사용자 경험과 SEO 점수에도 긍정적인 영향을 미칠 수 있습니다.

이번 포스팅에서는 이미지를 최적화 하는 방법에 대해 알아보도록 하겠습니다.

1. 이미지 최적화 사이트

이미지 최적화 플러그인은 서버 리소스를 사용하기 때문에 트래픽을 낭비할 수 있습니다.

그러나, Compressor 나 Imagecompressor와 같은 이미지 최적화 툴을 제공하는 사이트를 이용하면 서버 리소스를 사용하지 않을 수 있습니다.

이미지를 삽입할 때마다 최적화 하는 것이 귀찮을 수 있지만 디스크 공간과 트래픽을 절감할 수 있으므로 생활화 하는 것이 좋을 듯 합니다.

직접 최적화 하는 것이 귀찮다면 (별로 권장하지는 않지만) 이미지 최적화 플러그인을 이용하시길 바랍니다

2. 플러그인

이미지 최적화 플러그인은 이미지를 자동으로 최적화를 해주는 편리한 제품 입니다.

이미지 최적화 플러그인 중에 추천할만한 플러그인을 몇 개 소개해 드리겠습니다.

1. Shortpixel

활성 설치 : 300,000+

CDN(Content Delivery Network)을 이용한 이미지 최적화 플러그인 입니다.

플러그인을 활성화 시키려면 API키가 필요하여 약간 번거롭지만, 무료로 월 100개의 압축을 사용할 수 있습니다.

다만, 카페24에서는 보안 문제로 독일에 위치한 Shortpixel 클라우드 서버가 접근할 수 없어 대부분의 국내 호스팅 이용자는 이용할 수가 없습니다.

Pro 버전

주요 기능

– PNG 파일 JPEG 자동 변환
– 큰 이미지 리사이즈
– WebP 이미지 지원
– PDF 파일 최적화
– 썸네일 이미지 최적화
– 로컬 이미지 백업

2. Imagify

활성 설치 : 900,000+

Imagify는 WP Media에서 개발한 이미지 크기 조정 & 압축 플러그인으로, WP Rocket을 사용할 경우 무료로 이용할 수 있습니다. (무료 이용자의 경우, 20MB를 크레딧으로 받습니다.)

다만, 이 플러그인도 API가 필요하기 때문에 사용을 원할 경우 가입을 해야 합니다.

Pro 버전

주요 기능

– 매월 무료 20M
– 자동 압축 지원(업로드 시)
– 수동 최적화, 대량 이미지 업데이트
– WebP 형식으로 변환(무료로는 월 20MB 변환 가능)
– EXIF 제거 지원
– 이미지 백업
– PDF 이미지 크기 조정 및 압축
– 이미지 최대 너비 설정(업로드 시)

3. Smush

활성 설치 : 1000,000+

Smush는 가장 많이 알려져 있는 플러그인 중 하나로, 설정이 매우 간단하기 때문에 입문자 분들에게 추천 드립니다.

무료 버전에서는 한 번에 50개의 이미지만 최적화 할 수 있고 원본 이미지 파일은 압축하지 않지만(썸네일만 압축), Pro 버전에서는 이러한 제한이 없고 압축 성능도 2배로 높아진다고 합니다(Ultra Smush는 이미지 압축 성능을 5배나 올릴 수 있다고 합니다).

주요 기능

– 선택한 디렉토리 이미지 압축
– Lazy Load : 페이지를 읽는 시점에 중요하지 않은 리소스는 나중에 하게 하는 기능
– CDN 활성화
– WebP 설정(Pro 전용)
– 이미지 복구
– 자동 무손실 압축, 자동 크기 조정, 섬네일 크기 선택
– 대량 최적화
– PNG -> JPEG 자동 변환

* 다른 플러그인과 차별화된 기능으로 이미지 품질에 최대한 영향을 주지 않는 데이터 무손실 압축 방식을 사용.

4. EWWW Optimizer

활성 설치 : 1000,000+

EWWW Optimizer는 Smush와 같이 가장 많이 알려져 있는 이미지 최적화 플러그인 중 하나 입니다.

속도 제한이 없고 파일 크기도 무제한이라서 국내에서 많이 사용하는데요. 자동으로 적합한 이미지 형식으로 바꾸어주는 기능도 무료로 포함되어 있습니다. (유료 기능으로 Easy IO를 사용하면 이미지가 자동으로 압축, 크기 조정, 지연 로드 설정, WebP 형식으로 자동 변환이 됩니다.)

Pro 버전

주요 기능

– WebP 자동 변환(유료)
– 지능형 이미지 변환 옵션
– 인터페이스 간소화로 간단한 설정
– 이미지 크기 자동 조정
– 스키마 컨버전 : 필요한 경우, 원본 이미지를 보존하고 최적화된 이미지를 따로 저장하여 백업을 유지하는 기능

위 플러그인들이 이미지 최적화로 가장 많이 언급되는 플러그인입니다.

각 플러그인들의 대해 성능을 비교 분석한 자료도 있으니 참고해보시길 바랍니다.

5. TinyPNG

활성 설치 : 200,000+

TinyPNG은 무료로 월 약 100개의 이미지를 최적화 할 수 있습니다.

(계정 승인까지 완료하면 매월 500개의 이미지 파일을 무료로 압축할 수 있다고 합니다.)

평균적으로 JPEG 이미지는 40-60%, PNG 이미지는 50-80% 정도로 품질 손실 없이 압축하며, 압축한 파일은 대쉬보드를 통해 확인할 수 있습니다.

Pro 버전

3. WebP 포멧 변환을 활용한 이미지 최적화

WebP(웹피)는 구글이 개발한 이미지 포맷으로, 기존 인터넷에서 널리 사용되는 GIF, JPG, PNG 포맷을 대체할 목적으로 만들어졌습니다. 이 포맷의 가장 큰 장점은 동일한 이미지 품질을 유지하면서도 파일 크기가 기존 포맷보다 훨씬 작다는 것입니다.

즉, JPEG, PNG, GIF 포맷을 WebP/AVIF 포맷으로 교체하면 퀄리티 손실 없이 이미지 크기를 크게 줄일 수 있다는 것입니다.

WebP vs. AVIF 이미지 포맷

WebP는 구글에 의해 개발된 이미지 포맷으로, JPEG, PNG, GIF 등 기존 이미지 포맷들보다 더 효율적인 압축을 제공합니다.

WebP는 손실 압축과 무손실 압축 모두 지원하며, 같은 화질의 이미지를 더 작은 파일 크기로 저장할 수 있어 웹 성능 최적화에 유리합니다. 또한, 투명도(알파 채널)와 애니메이션 지원이 가능하여 GIF 대체 포맷으로도 사용됩니다. 대부분의 모던 브라우저에서 지원되지만, 일부 구형 브라우저에서는 호환성 문제가 있을 수 있습니다.

AVIF(AV1 Image File Format)는 AOMedia Video 1(AV1) 비디오 코덱을 기반으로 한 이미지 포맷입니다.

이 포맷은 탁월한 압축 효율을 자랑하며, 고품질의 이미지를 매우 낮은 파일 크기로 제공합니다. AVIF는 HDR(High Dynamic Range) 및 광색역(Wide Color Gamut) 지원을 포함한 다양한 첨단 기능을 지원하며, WebP보다 더 진보된 압축 기술을 사용합니다. 그러나 AVIF는 상대적으로 새로운 포맷이기 때문에 WebP보다 지원하는 브라우저가 적고, 처리 시간이 더 길 수 있다고 합니다.

SNS 공유 시 WebP 이미지 문제

페이스북, 트위터, 네이버 카페 등 SNS에서 이미지 링크를 공유할 때 WebP 포맷의 썸네일은 보통 문제 없이 표시 되는데요.

하지만, 간혹 카톡에서 URL을 공유할 때, WebP 썸네일이 표시되지 안되는 경우가 있습니다.

만약, WebP 포맷의 썸네일이 제대로 표시되지 않으면 특성 이미지(대표 이미지)를 JPG 등으로 지정하는 것을 고려하시길 바랍니다.

1. WebP 변환 플러그인 (Converter for Media)

워드프레스 5.8 버전부터 WebP 포맷을 지원하였지만, 워드프레스 사이트에서 WebP 포맷으로 변환하려면 유료 서비스를 이용해야 합니다.

그러나 Converter for Media 플러그인을 사용하면 이미지 파일을 간편하게 WebP 또는 AVIF(Pro 버전) 이미지 포맷으로 변환하여 사이트 속도를 개선하고 트래픽도 절감할 수 있습니다.

특히, 이미 많은 이미지를 JPEG, PNG 등의 포맷으로 업로드한 경우라면 플러그인을 통해 기존 이미지들을 WEBP 포맷이나 AVIF 포맷으로 일괄 변환하는 것이 가능합니다.

고려 사항

다음의 상황이라면 플러그인의 사용을 고려해보시길 바랍니다.

– 기존에 많은 이미지들이 JPG, PNG 포맷으로 업로드된 경우
– 웹 서버 공간이 충분한 경우
– 사용자들이 WebP 포맷으로 이미지를 업로드하도록 강제할 수 없는 경우

다음의 상황에서는 플러그인을 사용하지 않는 것이 좋을 수 있습니다.

– 새로 블로그를 시작하고 WebP 포맷으로 이미지를 업로드할 수 있는 경우
– 웹 서버 공간이 부족한 경우

Converter for Media 플러그인을 사용하여 JPG/PNG/GIF 등의 이미지를 WebP/AVIF 포맷으로 변환할 경우 별도의 폴더가 생성되어 변환된 파일들이 저장됩니다. (wp-content/uploads 폴더의 이미지들이 webp 포맷으로 변환되어 wp-content/uploads-webpc라는 별도 폴더에 저장됩니다.)

즉, 추가적인 웹 서버의 디스크 공간이 필요하게 되는데요.

카페24 등 국내 호스팅을 이용하는 경우에는 디스크 공간이 그리 넉넉하지 않을 수 있으니 디스크 공간이 충분한지 확인을 한 후에 플러그인 사용을 결정하시기 바랍니다.

해외 호스팅을 이용하는 경우라면 일반적으로 공간이 충분하기 때문에 이런 제약에서는 비교적 자유로운 편입니다.

참고로, WebP나 AVIF 포맷으로 계속 이미지를 로드하게 하려면 해당 플러그인을 활성화 상태로 두어야 합니다.

즉, 비활성화 하면 다시 기존 이미지 포맷으로 이미지가 로드 된다는 것입니다.