PNG·JPG 이미지를 WebP로 자동 변환하는 이유

웹 성능에서 이미지는 가장 큰 로딩 지분을 차지한다. 특히 블로그나 기사형 콘텐츠에서는 이미지가 여러 장 포함되기 때문에, 포맷 최적화는 속도와 SEO 관점에서 반드시 고려해야 한다. 최근에는 용량 대비 화질 효율이 높은 WebP 포맷이 표준으로 자리 잡으며, 서버에서 자동으로 변환해 저장하는 방식이 점점 일반화되고 있다.

이미지 자동 변환 도입의 핵심 장점

1. 페이지 로딩 속도 개선

WebP는 동일한 화질 대비 PNG나 JPG보다 용량이 25~80% 작다. 이는 모바일 환경에서 특히 체감이 크며, CDN 비용 절감에도 직접적인 효과가 있다.

2. 검색엔진 선호도 증가

구글은 페이지 로딩 속도를 중요한 순위 요소로 본다. WebP 전환을 통해 LCP(Largest Contentful Paint)가 개선되면 자연스럽게 SEO 점수 상승을 기대할 수 있다.

3. 서버 저장 공간 최적화

콘텐츠가 누적되면 이미지 저장 공간이 압도적으로 커지는데 WebP는 장기적으로 스토리지 비용을 크게 줄인다.

PHP로 WebP 자동 변환 기능 구현하기

PHP 8.3 환경에서는 GD 라이브러리의 imagewebp() 기능을 활용해 PNG·JPG를 빠르고 안정적으로 WebP로 변환할 수 있다. 이 기능을 활용하면 콘텐츠 저장 시 모든 이미지 태그를 검사하고, WebP가 아닌 경우 자동으로 변환 후 링크까지 갱신할 수 있다.

핵심 구현 로직 요약

1. contents에서 모든 img src 추출

정규식을 통해 콘텐츠에 포함된 모든 이미지 경로를 가져온다. 경로에 쿼리스트링이 포함되어도 안전하게 처리하도록 parse_url()을 사용하는 것이 좋다.

2. 확장자 검사 후 PNG/JPG만 변환

이미 WebP 파일은 그대로 건너뛴다. 또한 GIF, SVG 등 변환이 불가능하거나 원본 훼손 우려가 있는 형식은 예외로 둔다.

3. 서버의 실제 이미지 파일을 로드

클라이언트 URL이 아니라 서버 경로에서 실제 파일을 찾아야 하므로 $_SERVER["DOCUMENT_ROOT"] 기준으로 실제 경로를 구성한다.

4. WebP 변환 및 파일 쓰기

GD 함수로 이미지 객체를 로드한 뒤 imagewebp()로 변환한다. 기존 이미지는 그대로 두고, 동일 경로에 확장자만 .webp로 변경하여 저장한다.

5. contents 내 이미지 src를 신규 WebP 파일명으로 치환

가장 중요한 단계로, 변환 후 콘텐츠의 이미지 링크까지 동시에 변경해야 서버 로딩 시 WebP가 불러와진다.

예시 코드

function process_webp_images($contents) { 
    $root = rtrim($_SERVER['DOCUMENT_ROOT'], '/');
    $contents_raw = stripslashes($contents);
    $updated = $contents_raw;
 
    preg_match_all('/<img[^>]+src=["']([^"']+)["']/i', $contents_raw, $matches);
 
    foreach ($matches[1] as $src) { 
    
        $parsed = parse_url($src);
     
        if (empty($parsed['path'])) continue;
        
        $path = $parsed['path'];
     
        $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
     
        if ($ext === 'webp') continue;

        if (!in_array($ext, ['png','jpg','jpeg'])) continue;

        $orig_path = $root . $path;
        
        if (!file_exists($orig_path)) continue;
        
        $webp_path = preg_replace('/.(png|jpe?g)$/i', '.webp', $orig_path);
        $webp_url = preg_replace('/.(png|jpe?g)(?.*)?$/i', '.webp$2', $src);
     
         switch ($ext) { 
            case 'png': $img = @imagecreatefrompng($orig_path);
            break;
         case 'jpg': case 'jpeg': $img = @imagecreatefromjpeg($orig_path);
            break;
         } 
     
        if ($img) { 
            imagewebp($img, $webp_path, 90);
            imagedestroy($img);
            $updated = str_replace($src, $webp_url, $updated);
        } 
    } 
    return addslashes($updated);
} 

도입 후 체감되는 개선 효과

WebP 자동 변환 기능을 도입하면 콘텐츠 작성 과정에서 이미지를 따로 변경하거나 압축할 필요가 없다. 작성자는 기존처럼 PNG나 JPG를 업로드하기만 하면 되고, 서버가 저장 단계에서 모든 최적화를 자동으로 처리한다.

1. 페이지 속도 향상

실제 운영 사이트 기준으로 이미지 로딩 속도가 평균 30~60% 개선되는 경우가 많다.

2. SEO 점수 증가

Core Web Vitals 개선으로 검색 노출 성능 자체가 좋아진다.

3. 콘텐츠 제작 효율 상승

작성자가 포맷 변환을 신경 쓸 필요가 없어 작업 흐름이 간단해진다.

마무리

이미지 최적화는 웹 성능에서 가장 큰 효과 대비 투자 비용이 낮은 영역이다. PHP 기반으로 WebP 자동 변환 기능을 구축해두면 콘텐츠 품질과 SEO 모두에서 장기적인 이점을 얻을 수 있다. 사이트 전체를 가볍게 유지하면서도 고품질 이미지를 유지하고 싶다면 반드시 도입해야 할 기능이다.