WebP로 워드프레스 이미지 압축! Imagify의 강력한 기능과 다른 플러그인 비교

워드프레스를 빠른 홈페이지로 만드는 방법은 여러 가지가 있지만, 그중 핵심은 데이터베이스 최적화와 이미지 압축입니다. 저의 경우, 워드프레스 이미지 압축 플러그인뿐만 아니라, Gzip과 CSS, JavaScript를 포함한 리소스를 최적화해주는 유료 플러그인인 WP-Rocket을 사용하고 있습니다.

우선 WP-Rocket은 사이트 속도를 개선하는 데 특화된 플러그인으로, 설치와 동시에 캐싱, 리소스 축소 및 병합 등의 작업을 간편하게 처리해준다는 장점이 있습니다.

기능	WP Hummingbird	WP Rocket	Cloudflare
캐싱(Caching)	브라우저 캐싱, 페이지 캐싱, Gzip 압축 지원	고급 캐싱 기능, 브라우저 캐싱 및 페이지 캐싱, 데이터베이스 최적화	CDN(캐싱 포함)을 통한 전 세계 콘텐츠 배포
CSS/JS 최적화	CSS/JS 파일 축소(Minify), 병합 및 비동기 로드 지원	CSS/JS 축소, 병합, 지연 로드, 비동기 로드 지원	HTML, CSS, JS 파일 축소 및 최적화
이미지 최적화	이미지 파일 크기 축소는 외부 플러그인 필요	Imagify 연동으로 WebP 변환 및 이미지 크기 최적화	이미지 로드 속도 개선 및 캐싱
CDN 연동	Cloudflare와 같은 CDN 서비스와 연동 가능	Cloudflare와 연동 가능, RocketCDN 유료 서비스 제공	전 세계 데이터 센터를 활용한 무료 CDN 제공
리소스 압축	Gzip 압축 지원	Gzip 및 Brotli 압축 지원	Brotli 압축 기본 제공
데이터베이스 최적화	데이터베이스 최적화는 별도 플러그인 필요	데이터베이스 최적화 기능 제공 (스케줄링 가능)	제공되지 않음
DNS 관리	제공되지 않음	제공되지 않음	고급 DNS 관리 및 보안 기능 제공
속도 테스트 및 분석	Lighthouse 기반의 속도 테스트와 개선 권장 사항 제공	별도 속도 테스트는 없으나, 캐싱 및 최적화 상태를 대시보드에서 제공	성능 통계 및 전송 속도 분석
보안 기능	제공되지 않음	제공되지 않음	DDoS 방어, SSL 인증서 지원, 방화벽 제공
무료/유료	무료, 일부 고급 기능은 유료(Pro)	유료 플러그인 (라이선스 필요)	기본 CDN 및 보안 기능은 무료, 고급 기능은 유료 (Pro)
초보자 사용 용이성	친숙한 UI와 설정 마법사 제공	매우 직관적인 UI로 설정이 간편	설정에 따라 약간의 학습 필요
특징 요약	무료 버전으로 기본 캐싱과 최적화 가능, 클라우드플레어와 연동 시 성능 극대화 가능	고급 캐싱 및 최적화 도구를 한 곳에서 통합 관리 가능, 모든 설정이 사용자 친화적	글로벌 네트워크를 통한 빠른 콘텐츠 전달 및 보안 기능 제공

또한, 무료 옵션으로는 WP Hummingbird를 추천하며 저 같은 경우 이 플러그인과 함께 클라우드플레어(Cloudflare)와 연동하면 더욱 효과적입니다.

WP Hummingbird는 캐싱 및 파일 최적화를 통해 무거운 워드프레스 사이트도 빠르게 로드될 수 있도록 돕습니다. 특히, 클라우드플레어의 CDN(콘텐츠 배포 네트워크)와 함께 사용하면 전 세계 사용자들에게 더 빠른 접속 속도를 제공할 수 있습니다.

WP-Rocket을 사용하는 경우, 이미지 최적화 기능을 강화하기 위해 Imagify 플러그인을 함께 사용하는 것을 권장드립니다. Imagify는 이미지 파일의 크기를 모바일과 데스크톱 환경에 맞게 자동으로 최적화하며, 용량을 대폭 줄여 사이트 속도를 높여줍니다.

또한, 플러그인의 중요한 기능 중 하나는 이미지를 최신 형식인 WebP 파일로 변환하는 것인데 저 같은 경우 WebP는 기존 JPEG와 PNG보다 용량이 훨씬 작으면서도 품질을 유지하므로, 사이트 성능과 사용자 경험을 동시에 개선할 수 있습니다. 더불어, 변환된 이미지를 보호하여 품질 손실 없이 안전하게 관리할 수 있다는 점도 큰 장점입니다.

참고 : 이미지 무료 압축 플러그인 WP-Smush

크롬 다른이름으로 저장 WebP 확장자 – JPG, PNG 이미지 변환방법

워드프레스 이미지 압축

워드프레스 플러그인에서 Imagify 검색해서 설치합니다.

설치를 하면 상단에 미리보기로 바로 이미지를 최적화 할 수 있으며 무료버전의 경우 1달에 50mb의 무료 압축을 제공하며 500mb는 한달에 4.99달러 그리고 한달에 9.99e달러를 사용하면 무제한으로 이미지를 압축할 수있습니다.

주요 기능	세부 내용
이미지 최적화	이미지 파일(JPEG, PNG, GIF)을 압축하여 용량을 줄이고, 품질 손실을 최소화함.
WebP 변환	업로드된 이미지를 최신 포맷인 WebP로 변환하여 페이지 로딩 속도를 개선함.
압축 모드	3가지 압축 레벨 제공: Normal(가벼운 압축), Aggressive(중간 압축), Ultra(강력한 압축).
자동 최적화	이미지를 업로드할 때 자동으로 최적화 처리. 기존 이미지를 한 번에 최적화하는 일괄 처리 기능도 제공.
크기 조정	업로드 시 이미지를 사전 설정된 크기로 자동 리사이징하여 서버 용량 절약.
통합성	WP Rocket과 통합 가능하여, 최적화된 이미지와 캐싱을 동시에 관리 가능.
사용량 추적	최적화된 이미지와 절약된 용량을 대시보드에서 시각적으로 확인 가능.
가격 플랜
무료 플랜	월 20MB의 이미지 최적화 제공. 소규모 웹사이트나 테스트용으로 적합.
Lite 플랜 (소규모 사이트)	월 $4.99 (연 $49.99) 1GB의 이미지 최적화 제공. 중소형 웹사이트에 적합.
Plus 플랜 (중간 규모)	월 $9.99 (연 $99.99) 3GB의 이미지 최적화 제공. 더 많은 이미지를 다루는 중형 웹사이트에 적합.
Infinite 플랜 (무제한)	월 $24.99 (연 $249.99) 최적화 가능한 이미지 용량에 제한 없음. 대규모 웹사이트나 이미지를 많이 다루는 사이트에 적합.
추가 세부 사항
환불 정책	14일 이내 환불 가능.
지원	이메일 및 티켓 기반의 고객 지원 제공.
호환성	워드프레스 및 WooCommerce와 완벽 호환.

이미지 압축은 3가지 옵션으로 제공되며, 압축률이 높아질수록 이미지 용량은 줄어들지만 품질 저하가 발생할 수 있습니다. 따라서 사이트의 용도에 맞게 적절한 옵션을 선택하는 것이 중요합니다.

• Normal: 가벼운 압축으로 품질 유지가 중요할 때 적합합니다.
• Aggressive: 중간 정도의 압축으로 용량 절감과 품질의 균형을 제공합니다.
• Ultra: 강력한 압축으로 최대한 용량을 줄이는 데 초점을 맞추며, 품질 저하가 발생할 수 있습니다.

또한, 이미지 업로드 시 자동으로 최적화하도록 설정할 수 있으며, 필요에 따라 원본 이미지를 백업할 수 있습니다. 원본 이미지를 보관하면 언제든지 최적화를 되돌릴 수 있어 유연하게 관리할 수 있다는 장점이 있습니다.

특히, Imagify는 EXIF 데이터 유지 기능을 제공합니다. EXIF 데이터는 이미지에 포함된 메타데이터로, 카메라로 촬영한 이미지의 셔터 속도, 노출, ISO, 카메라 브랜드 및 모델 등 다양한 정보를 저장되며 이 데이터를 보관하면 전문적인 사진 작업이나 분석에 유용하지만, 용량 최적화를 위해 필요하지 않다면 삭제하는 것도 고려할 수 있습니다.

워드프레스 WebP 이미지 변환

가장 매혹적인 기능이라고 할 수 있는 이미지를 WebP 버전으로 저장해 주는 기능으로서 워드프레스 홈페이지 이미 업로드한 이미지도 WebP 형식으로 이미지를 표시합니다.

확장자	특징	평균 용량	워드프레스 부하 영향	업로드 시 추천 이유
JPEG	손실 압축 이미지, 고화질 지원	중간 (작게 압축 가능)	낮음: 크기가 작아 서버 부담이 적음	사진이나 복잡한 그래픽에 적합, 빠른 로딩 속도 제공
PNG	무손실 압축, 투명도 지원	중간~높음	중간: 고화질 및 큰 파일 크기로 처리 시간 소요	투명한 배경이 필요한 로고나 그래픽 이미지에 적합
GIF	애니메이션 및 256색 팔레트 지원	낮음~중간 (애니메이션 시 높음)	중간: 애니메이션이 많을 경우 부하 증가	간단한 애니메이션이나 아이콘 제작에 적합
WEBP	고효율 압축, 투명도와 애니메이션 지원	낮음 (JPEG/PNG 대비 작음)	매우 낮음: 작은 파일 크기로 빠른 처리 가능	모든 웹 이미지에 적합, 속도 및 성능 최적화
SVG	벡터 이미지, 무제한 크기 확장 가능	매우 낮음 (텍스트 기반)	매우 낮음: 용량이 작아 서버에 거의 부담 없음	로고, 아이콘 등 크기 확장이 필요한 그래픽에 적합
BMP	무압축, 오래된 포맷	매우 높음	높음: 큰 파일 크기로 서버와 클라이언트 부담 증가	거의 사용되지 않음, 대체 포맷(JPEG, PNG) 권장
TIFF	고화질 및 무손실 압축 지원	매우 높음	매우 높음: 처리 속도가 느리고 메모리 사용량 증가	워드프레스 업로드 비추천, 전문 인쇄 작업에 적합

파일최적화를 통해 이미지를 섬네일과 중간 대형등 각각의 사이즈로 저장하거나 현재 사용하고 있는 테마에 있는 파일을 최적화할 수 있습니다.

이렇게 기존 1.5GB의 이미지를 압축해서 600MB로 절반이상의 이미지를 압축했으며 이로 인해 구글 페이지속도 측정을 확인해보면 워드프레스 속도가 비약적으로 빨라진것을 확인할 수 있습니다.

이미지 확장자별 워드프레스 성능 비교

위 그래프는 이미지 확장자별 평균 파일 크기와 서버 부하, 처리 속도, 최적화 난이도를 비교한 것으로 홈페이지 업로드 용으로 WEBP와 SVG는 파일 크기가 작고 부하가 적어 워드프레스 성능에 부담이 가장 적으며, GIF와 PNG는 용량과 부하가 커 최적화가 필요합니다.

커스텀 코드를 활용한 PNG → WebP 변환 및 원본 삭제

만약 플러그인이 아닌 커스텀 코드를 통해 이미지를 변환할 수 있기 때문에 플러그인 설치로 인해 워드프레스 속도가 저하되는것이 싫다면 활용할 수 있습니다.

우선 용량이 큰 PNG 파일을 업로드 시 용량이 작은 WEBP 최적화하고 기존의 PNG 원본 이미지를 자동으로 삭제하고자 한다면 Functions.php 파일에 아래의 코드를 추가합니다.

add_filter('wp_handle_upload', 'convert_png_to_webp_and_delete_original', 10, 2);

function convert_png_to_webp_and_delete_original($upload, $context) {
    // 파일 경로 및 확장자 확인
    $file_path = $upload['file'];
    $file_type = pathinfo($file_path, PATHINFO_EXTENSION);

    // PNG 파일만 처리
    if (strtolower($file_type) === 'png') {
        $webp_path = str_replace('.png', '.webp', $file_path);

        // PNG를 WebP로 변환
        $image = imagecreatefrompng($file_path);
        if ($image && imagewebp($image, $webp_path, 80)) {
            imagedestroy($image);

            // 원본 PNG 삭제
            unlink($file_path);

            // 업로드된 파일 URL 및 경로를 WebP로 교체
            $upload['file'] = $webp_path;
            $upload['url'] = str_replace('.png', '.webp', $upload['url']);
            $upload['type'] = 'image/webp';
        }
    }

    return $upload;
}

이렇게 설정하게 되면 png 파일을 업로드 될 때 자동으로 Webp로 변환 후 원본 png 파일을 삭제됩니다.

추가로 WebP 변환은 PHP의 imagewebp 함수를 사용하며, 퀄리티는 80으로 설정하며 필요에 따라 값을 조정할 수 있습니다. 이때 PHP 환경에서 GD 라이브러리가 활성화되어 있어야 하니 이점 참고하세요

마지막으로 이미지 변환을하게 되면 워드프레스 로드에도 영향을 줄일 수 있으며 ImageMagick 활용하여 서버에서 Convert 명령어를 사용해 이미지를 Webp로 변환할 수 있습니다.