apache JPG 이미지 호출 시 WEBP 이미지로 응답 설정

 

WEBP 이미지는 JPG 이미지보다 압축률이 우수하고, 이미지 품질 차이가 크지 않기 때문에 적용 시 네트워크 트래픽 감소와 웹 페이지 로드 속도 개선에 효과적입니다.

 

쇼핑몰의 경우 다수 상품 이미지 파일이 업로드 되어 있고 해상도가 낮은 리스트는 WEBP, 이미지 품질이 중요한 상세 페이지는 JPG, PNG로 사용할 수 있는 방법을 설명하려고 합니다.

 

현업 부서에서 WEBP 파일을 생성하여 업로드하고 소스단에서 WEBP파일로 확장자로 호출하면 좋겠지만

기존 이미지들을 다 변환하여 작업하기에는 쉽지 않고 공수가 많이드는 작업으로 시스템단에서 처리할 수 있는 방법입니다.

 

1. JPG 이미자파일 WEBP 전환

#!/bin/bash

#8로 시작하는 디렉토리 전체가 대상입니다. 
ls -d 8* | while read dir; do    
echo "Processing directory: $dir"

# 디렉토리 내에서 'middle6' 또는 'middle6_1'이 포함된 JPG 파일을 찾고 변환
#middle6(-1) 리스트용 JPG 파일
for FILE in "$dir"/middle6.JPG; do
# 파일이 실제로 존재하고, 확장자가 JPG인 경우만 처리
if [ -f "$FILE" ]; then
# .webp 파일명으로 변환 (JPG -> webp)
WEBP_FILE="${FILE%.JPG}.webp"

# 변환이 이미 되어 있는지 확인
if [ ! -f "$WEBP_FILE" ]; then
echo "변환 중: $FILE -> $WEBP_FILE"

# cwebp 명령어로 변환 (여기서 -q 100은 품질 100%로 설정)
cwebp -quiet -q 100 "$FILE" -o "$WEBP_FILE"

# 변환 완료 메시지
echo "$FILE -> $WEBP_FILE 변환 완료!"
else
echo "$WEBP_FILE 이미 존재합니다."
fi
fi
done
done

echo "변환 완료."

 

2. apache 설정 (JPG 이미지 파일 호출 시 WEBP 이미지 유뮤 확인하여 응답)

#httpd-vhosts.conf 파일 열기
vim /usr/local/apache/conf/exetra/httpd-vhosts.conf

# vhosts 설정 내역에 아래 내용 추가

<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*middle6(_1)?)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1.webp -f
RewriteRule (?i)(.*middle6(_1)?)(\.jpe?g|\.png)$ %1.webp [L,T=image/webp]
</IfModule>


<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

 

 

각 항목 설명(chatcpt)

• mod_rewrite:
  • RewriteEngine On: URL 재작성 엔진을 활성화합니다.
  • RewriteCond %{HTTP_ACCEPT} image/webp: 클라이언트의 브라우저가 webp 형식을 지원하는지 확인합니다. (브라우저가 Accept 헤더에 image/webp를 포함한 경우)
  • RewriteCond %{REQUEST_URI} (?i)(.*middle6(_1)?)(\.jpe?g|\.png)$: 요청된 URI가 .jpg 또는 .png 형식인 경우에만 해당 규칙을 적용합니다. (middle6 또는 middle6_1을 포함한 이미지 파일에 대해 적용됩니다.)
  • RewriteCond %{DOCUMENT_ROOT}%1.webp -f: 요청된 파일 경로에 해당하는 .webp 파일이 실제로 존재하는지 확인합니다. (예: middle6.jpg에 대응하는 middle6.webp가 존재하는지 확인)
  • RewriteRule (?i)(.*middle6(_1)?)(\.jpe?g|\.png)$ %1.webp [L,T=image/webp]: 위 조건들이 모두 충족되면, 원본 이미지(.jpg 또는 .png)를 .webp 파일로 리다이렉트합니다. 리다이렉트된 파일은 image/webp 타입으로 처리됩니다.
• mod_headers:
  • Header append Vary Accept env=REDIRECT_accept: 서버가 웹 서버 캐시나 프록시 서버에 의해 잘못 캐시되지 않도록 Accept 헤더를 Vary에 추가합니다. 이로 인해 webp 지원 여부에 따라 캐시가 다르게 처리되게 됩니다.
• mod_mime:AddType image/webp .webp: .webp 파일에 대해 image/webp MIME 타입을 설정합니다. 이를 통해 서버는 .webp 파일을 올바르게 처리할 수 있습니다.

 

 

테스트 완료 후 실제 서비스 반영 이슈

현재 테스트는 완료되었지만, 실제 서비스에 반영하지 못한 이유는 다음과 같습니다:

1. CDN 캐싱 이슈: 현재 사용 중인 CDN 업체에서는 요청 헤더의 Accept 항목에 따라 캐싱 처리가 되지 않아, image/webp 항목을 지원하지 않는 브라우저에서 webp 이미지를 요청하면 이미지가 정상적으로 출력되지 않을 수 있습니다. 예를 들어, Safari iOS 14 미만 버전에서는 webp 형식을 지원하지 않기 때문에, 이러한 경우 이미지가 표시되지 않을 수 있습니다.
2. 크롬 개발자 도구 요청 헤더의 Accept 항목:
   • WebP 지원 여부는 브라우저의 Accept 헤더에 따라 결정됩니다. Accept 항목에 image/webp가 포함되어 있으면 webp 형식으로 이미지를 요청하지만, 해당 항목이 없는 경우 webp 이미지를 받지 못하게 됩니다.
   예를 들어, 크롬 브라우저의 요청 헤더에서 Accept 항목은 아래와 같습니다:여기서 image/webp가 포함되어 있으면, WebP 형식의 이미지를 지원한다고 인식할 수 있습니다.
   

   Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

   
   
   
3. PHP 버전 문제: 현재 운영 중인 이미지 업로드 서버의 PHP 버전이 5.2로, webp 이미지를 생성하는 기능을 지원하지 않습니다. 따라서 JPG 이미지 파일을 업로드할 때 webp 이미지로 자동 변환하는 기능을 사용할 수 없는 상황입니다. 최신 PHP 버전(예: 7.0 이상)에서 제공하는 GD 라이브러리 또는 Imagick 라이브러리 기능을 사용하려면 PHP 버전을 업그레이드해야 합니다.

 

해결 방안

1. CDN 캐싱 설정: CDN에서 Accept 헤더에 따라 캐싱을 다르게 처리할 수 있다면, 이를 이용해 webp 이미지를 지원하는 브라우저와 그렇지 않은 브라우저를 구분하여 다른 이미지를 제공할 수 있도록 해야 합니다. 이를 위해 Vary 헤더를 설정하여 Accept 값에 따라 캐시를 다르게 적용할 수 있도록 해야 합니다.
2. WebP 이미지 업로드 서버에서 지원: 이미지 업로드 서버에서 PHP 버전을 업그레이드하고, webp 이미지 변환 기능을 활성화할 수 있도록 해야 합니다. 만약 PHP 버전 업그레이드가 불가능하다면, 서버 측에서 웹 서버나 별도의 이미지 변환 서비스를 통해 webp 이미지를 생성하는 방법도 고려할 수 있습니다. 예를 들어, ImageMagick을 사용하여 서버 측에서 이미지 업로드 후 자동으로 webp 파일을 생성할 수 있습니다.