WebP 이미지 사용하기 (2021-05-21 11:51 수정)

WebP 형식은 Google이 출시 한 On2 Technologies에서 개발 한 VP8 비디오 코덱을 기반으로하는 WebM 비디오 컨테이너 형식의 자매 프로젝트입니다. 
Google은 2010 년 2 월 19 일 On2 Technologies를 인수 한 후 같은 해 9 월 WebP를 릴리스했습니다.
자료인용 : http://choesin.com/webp-파일이란-무엇이며-어떻게-열-수-있습니까


그누보드에서 WebP 확장자 이미지가 본문에 바로 보이도록 하는 방법입니다
테스트 보기 : https://www.happyjung.com/test_gallery/20

PHP 7.1.0 에서 getimagesize() 에서 WebP 형식이 추가되었습니다
웹서버가 PHP 7.1 이후 사용하는 경우에만 적용해야 합니다


2021-05-18 13:48
  . 처음 작성

2021.05.20 15:54
  . 첨부파일에 webp 이미지 등록시 삭제되는 문제 해결
  . 갤러리 스킨에서의 썸네일 생성이 안됨

2021-05-21 04:06
  . /config.php 수정
  . /lib/thumbnail.lib.php 수정

2021-05-21 11:04
  . /lib/thumnail.lib.php 수정

2021-...

  . 썸네일 생성 미해결상태입니다

  . 그외 본문에서 webp 이미지 보는 것은 정상 작동합니다

1. 그누보드 / config.php  ( 그누보드 5.4.5.4 기준 205 줄 )
// 썸네일 jpg Quality 설정
define('G5_THUMB_JPG_QUALITY', 90);

를 아래와 같이 변경

// 썸네일 jpg Quality 설정
define('G5_THUMB_JPG_QUALITY', 90);

// 썸네일 webp Quality 설정
define('G5_THUMB_WEBP_QUALITY', 90);


2. 그누보드 / adm / member_form.php  ( 그누보드 5.4.5.4 기준 506 줄 )
    if (!f.mb_icon.value.match(/\.(gif|jpe?g|png)$/i) && f.mb_icon.value) {
        alert('아이콘은 이미지 파일만 가능합니다.');
        return false;
    }

    if (!f.mb_img.value.match(/\.(gif|jpe?g|png)$/i) && f.mb_img.value) {
        alert('회원이미지는 이미지 파일만 가능합니다.');

를 아래와 같이 변경

    if (!f.mb_icon.value.match(/\.(gif|jpe?g|png|webp)$/i) && f.mb_icon.value) { // WebP 추가
        alert('아이콘은 이미지 파일만 가능합니다.');
        return false;
    }

    if (!f.mb_img.value.match(/\.(gif|jpe?g|png|webp)$/i) && f.mb_img.value) { // WebP 추가
        alert('회원이미지는 이미지 파일만 가능합니다.');


3-1. 그누보드 / adm / member_form_update.php  ( 그누보드 5.4.5.4 기준 184 줄 )
    $image_regex = "/(\.(gif|jpe?g|png))$/i";
를 아래와 같이 변경
    $image_regex = "/(\.(gif|jpe?g|png|webp))$/i"; // WebP 추가


3-2. 그누보드 / adm / member_form_update.php  ( 그누보드 5.4.5.4 기준 206 줄 )
                    if($size[2] === 2 || $size[2] === 3) {
를 아래와 같이 변경
                    if($size[2] === 2 || $size[2] === 3 || $size[2] === 18) { // WebP 추가


4. 영카트 / adm / shop_admin / bannerformupdate.php  ( 영카트 5.4.5.4 기준 38 줄 )
    if( !preg_match('/\.(gif|jpe?g|bmp|png)$/i', $bn_bimg_name) ){
        alert("이미지 파일만 업로드 할수 있습니다.");
    }

    $timg = @getimagesize($bn_bimg);
    if ($timg['2'] < 1 || $timg['2'] > 16){

를 아래와 같이 변경

    if( !preg_match('/\.(gif|jpe?g|bmp|webp)$/i', $bn_bimg_name) ){ // WebP 추가
        alert("이미지 파일만 업로드 할수 있습니다.");
    }

    $timg = @getimagesize($bn_bimg);
    if ($timg['2'] < 1 || $timg['2'] > 18){ // WebP 추가


5. 그누보드 / bbs / qawrite_update.php  ( 그누보드 5.4.5.4 기준 200 줄 )
            if ($timg['2'] < 1 || $timg['2'] > 16)
를 아래와 같이 변경
            if ($timg['2'] < 1 || $timg['2'] > 18) // WebP 추가


6-1. 그누보드 / bbs / register_form_update.php  ( 그누보드 5.4.5.4 기준 379 줄 )
$image_regex = "/(\.(gif|jpe?g|png))$/i";
를 아래와 같이 변경
$image_regex = "/(\.(gif|jpe?g|png|webp))$/i"; // WebP 추가


6-2. 그누보드 / bbs / register_form_update.php  ( 그누보드 5.4.5.4 기준 398 줄 )
                if (!($size[2] === 1 || $size[2] === 2 || $size[2] === 3)) { // jpg, gif, png 파일이 아니면 올라간 이미지를 삭제한다.
                    @unlink($dest_path);
                } else if ($size[0] > $config['cf_member_icon_width'] || $size[1] > $config['cf_member_icon_height']) {
                    $thumb = null;
                    if($size[2] === 2 || $size[2] === 3) {
                        //jpg 또는 png 파일 적용

를 아래와 같이 변경

                if (!($size[2] === 1 || $size[2] === 2 || $size[2] === 3 || $size[2] === 18)) { // jpg, gif, png, webp 파일이 아니면 올라간 이미지를 삭제한다. // WebP 수정
                    @unlink($dest_path);
                } else if ($size[0] > $config['cf_member_icon_width'] || $size[1] > $config['cf_member_icon_height']) {
                    $thumb = null;
                    if($size[2] === 2 || $size[2] === 3 || $size[2] === 18) { // WebP 추가
                        //jpg 또는 png , webp 파일 적용


6-3. 그누보드 / bbs / register_form_update.php  ( 그누보드 5.4.5.4 기준 456 줄 )
                    if (!($size[2] === 1 || $size[2] === 2 || $size[2] === 3)) { // gif jpg png 파일이 아니면 올라간 이미지를 삭제한다.
                        @unlink($dest_path);
                    } else if ($size[0] > $config['cf_member_img_width'] || $size[1] > $config['cf_member_img_height']) {
                        $thumb = null;
                        if($size[2] === 2 || $size[2] === 3) {
                            //jpg 또는 png 파일 적용

를 아래와 같이 변경

                    if (!($size[2] === 1 || $size[2] === 2 || $size[2] === 3 || $size[2] === 18)) { // gif jpg png webp 파일이 아니면 올라간 이미지를 삭제한다. // WebP 추가
                        @unlink($dest_path);
                    } else if ($size[0] > $config['cf_member_img_width'] || $size[1] > $config['cf_member_img_height']) {
                        $thumb = null;
                        if($size[2] === 2 || $size[2] === 3 || $size[2] === 18) { // WebP 추가
                            //jpg 또는 png , webp 파일 적용 // WebP 추가


7. 그누보드 / bbs / view_image.php  ( 그누보드 5.4.5.4 기준 15 줄 )
if ( ! preg_match('/(jpg|jpeg|png|gif|bmp)$/i', $extension) ){
를 아래와 같이 변경
if ( ! preg_match('/(jpg|jpeg|png|gif|bmp|webp)$/i', $extension) ){ // WebP 수정


8. 그누보드 / bbs / write_update.php  ( 그누보드 5.4.5.4 기준 535 줄 )
            if ($timg['2'] < 1 || $timg['2'] > 16)
를 아래와 같이 변경
            if ($timg['2'] < 1 || $timg['2'] > 18) // WebP 추가


9-1. 그누보드 / install / install_db.php  ( 그누보드 5.4.5.4 기준 174 줄 )
cf_image_extension = 'gif|jpg|jpeg|png',
를 아래와 같이 변경
cf_image_extension = 'gif|jpg|jpeg|png|webp',


9-2. 영카트 / install / install_db.php  ( 영카트 5.4.5.4 기준 200 줄 )
cf_image_extension = 'gif|jpg|jpeg|png',
를 아래와 같이 변경
cf_image_extension = 'gif|jpg|jpeg|png|webp',


10. 그누보드 / js / wrest.js  ( 그누보드 5.4.5.4 기준 226 줄 )
    var pattern = /\.(gif|jpg|png)$/i; // jpeg 는 제외
    if(!pattern.test(fld.value)){
        if(wrestFld == null){
            wrestMsg = wrestItemname(fld)+" : 이미지 파일이 아닙니다.\n.gif .jpg .png 파일만 가능합니다.\n";

를 아래와 같이 변경

    var pattern = /\.(gif|jpg|png|webp)$/i; // jpeg 는 제외 // webp 수정
    if(!pattern.test(fld.value)){
        if(wrestFld == null){
            wrestMsg = wrestItemname(fld)+" : 이미지 파일이 아닙니다.\n.gif .jpg .png .webp 파일만 가능합니다.\n"; // WebP 수정


11. 그누보드 / lib / common.lib.php  ( 그누보드 5.4.5.4 기준 3851 줄  /  영카트 5.4.5.4 기준 3866 줄 )
        if($extension && preg_match('/(jpg|jpeg|png|gif|bmp|conf|php\-x)$/i', $extension)) {
를 아래와 같이 변경        
        if($extension && preg_match('/(jpg|jpeg|png|gif|bmp|webp|conf|php\-x)$/i', $extension)) { // WebP 수정


12. 영카트 / lib / shop.lib.php  ( 영카트 5.4.5.4 기준 654 줄 )
    if (!preg_match('/\.(gif|jpe?g|png)$/i', $filename))
를 아래와 같이 변경
    if (!preg_match('/\.(gif|jpe?g|png|webp)$/i', $filename)) // WebP 수정


13-1. 그누보드 / lib / thumbnail.lib.php  ( 그누보드 5.4.5.4 기준 88 줄 )
    if( preg_match('/(\.jpg|\.jpeg|\.gif|\.png|\.bmp)$/i', $file['file']) && $contents = run_replace('get_file_thumbnail_tags', '', $file) ){
를 아래와 같이 변경
    if( preg_match('/(\.jpg|\.jpeg|\.gif|\.png|\.bmp|\.webp)$/i', $file['file']) && $contents = run_replace('get_file_thumbnail_tags', '', $file) ){ // WebP 수정


13-2-1. 그누보드 / lib / thumbnail.lib.php  ( 그누보드 5.4.5.1 기준 229 줄 )
    $size = @getimagesize($source_file);
    if($size[2] < 1 || $size[2] > 3) // gif, jpg, png 에 대해서만 적용

를 아래와 같이 변경

    $size = @getimagesize($source_file);
    if(!($size[2] == 1 || $size[2] == 2 || $size[2] == 3 || $size[2] == 18)) // gif, jpg, png .webp 에 대해서만 적용 // WebP 추가


13-2-2. 그누보드 / lib / thumbnail.lib.php  ( 그누보드 5.4.5.4 기준 229 줄 )
    $size = @getimagesize($source_file);
    if(!isset($size[2]) || $size[2] < 1 || $size[2] > 3) // gif, jpg, png 에 대해서만 적용

를 아래와 같이 변경

    $size = @getimagesize($source_file);
    if(!isset($size[2]) || !($size[2] == 1 || $size[2] == 2 || $size[2] == 3 || $size[2] == 18)) // gif, jpg, png .webp 에 대해서만 적용 // WebP 추가


13-3. 그누보드 / lib / thumbnail.lib.php  ( 그누보드 5.4.5.4 기준 248 줄 )
    $ext = array(1 => 'gif', 2 => 'jpg', 3 => 'png');
를 아래와 같이 변경
    $ext = array(1 => 'gif', 2 => 'jpg', 3 => 'png', 18 => 'webp'); // WebP 추가


13-4. 그누보드 / lib / thumbnail.lib.php  ( 그누보드 5.4.5.4 기준 301 줄 )
    } else if ($size[2] == 3) {
        $src = @imagecreatefrompng($source_file);
        @imagealphablending($src, true);

를 아래와 같이 변경

    } else if ($size[2] == 3) {
        $src = @imagecreatefrompng($source_file);
        @imagealphablending($src, true);
    } else if ($size[2] == 18) { // WebP 추가
        //$src = @imagecreatefromwebp($source_file);


13-5. 그누보드 / lib / thumbnail.lib.php  ( 그누보드 5.4.5.4 기준 507 줄 )
    } else if($size[2] == 3) {
        if(!defined('G5_THUMB_PNG_COMPRESS'))
            $png_compress = 5;
        else
            $png_compress = G5_THUMB_PNG_COMPRESS;

        imagepng($dst, $thumb_file, $png_compress);

를 아래와 같이 변경

    } else if($size[2] == 3) {
        if(!defined('G5_THUMB_PNG_COMPRESS'))
            $png_compress = 5;
        else
            $png_compress = G5_THUMB_PNG_COMPRESS;

        imagepng($dst, $thumb_file, $png_compress);
    } else if($size[2] == 18) { // WebP 추가
        if(!defined('G5_THUMB_WEBP_QUALITY'))
            $webp_quality = 90;
        else
            $webp_quality = G5_THUMB_WEBP_QUALITY;

        imagewebp($dst, $thumb_file, $webp_quality);
    } else {


14. 그누보드 / plugin / PHPMailer / class.phpmailer.php  ( 그누보드 5.4.5.4 기준 3611 줄 )
            'png'   => 'image/png',
를 아래와 같이 변경
            'png'   => 'image/png',
            'webp'  => 'image/webp',


15-1. 그누보드 / plugin / social / includes / functions.php  ( 그누보드 5.4.5.4 기준 665 줄 )
        } else if($ext == 3) {
            $image = imagecreatefrompng($file_url);
        } else {

를 아래와 같이 변경

        } else if($ext == 3) {
            $image = imagecreatefrompng($file_url);
        } else if($ext == 18) { // WebP 추가
            $image = imagecreatefromwebp($file_url);
        } else {


15-2. 그누보드 / plugin / social / includes / functions.php  ( 그누보드 5.4.5.4 기준 680 줄 )
        case '3':
          imagepng($tmp, $path, 0);
          break;

를 아래와 같이 변경

        case '3':
          imagepng($tmp, $path, 0);
          break;
        case '18': // WebP 추가
          imagewebp($tmp, $path, 100);
          break;


16-1. 영카트 / shop / itemqaformupdate.php  ( 영카트 5.4.5.4 기준 100 줄 )
        if( preg_match('/(gif|jpe?g|bmp|png)$/i', strtolower(end(explode('.', $data_path))) ) ){
를 아래와 같이 변경
        if( preg_match('/(gif|jpe?g|bmp|png|webp)$/i', strtolower(end(explode('.', $data_path))) ) ){ // WebP 추가


16-2. 영카트 / shop / itemqaformupdate.php  ( 영카트 5.4.5.4 기준 120 줄 )
        if( preg_match('/(gif|jpe?g|bmp|png)$/i', strtolower(end(explode('.', $data_path))) ) ){
를 아래와 같이 변경
        if( preg_match('/(gif|jpe?g|bmp|png|webp)$/i', strtolower(end(explode('.', $data_path))) ) ){ // WebP 추가


17. 영카트 / shop / itemuseformupdate.php  ( 영카트 5.4.5.4 기준 110 줄 )
        if( preg_match('/(gif|jpe?g|bmp|png)$/i', strtolower(end(explode('.', $data_path))) ) ){
를 아래와 같이 변경
        if( preg_match('/(gif|jpe?g|bmp|png|webp)$/i', strtolower(end(explode('.', $data_path))) ) ){ // WebP 추가


18-1. 그누보드 / mobile / skin / member / 스킨 / register_form.skin.php  ( 그누보드 5.4.5.4 기준 430 줄 )
            if (f.mb_icon.value) {
                if (!f.mb_icon.value.toLowerCase().match(/.(gif|jpe?g|png)$/i)) {

를 아래와 같이 변경

            if (f.mb_icon.value) {
                if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png|webp)$/i)) { // WebP 추가


18-2. 그누보드 / mobile / skin / member / 스킨 / register_form.skin.php  ( 그누보드 5.4.5.4 기준 440 줄 )
            if (f.mb_img.value) {
                if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png)$/i)) {

를 아래와 같이 변경

            if (f.mb_img.value) {
                if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png|webp)$/i)) { // WebP 추가


19-1. 그누보드 / skin / member / 스킨 / register_form.skin.php  ( 그누보드 5.4.5.4 기준 432 줄 )
            if (f.mb_icon.value) {
                if (!f.mb_icon.value.toLowerCase().match(/.(gif|jpe?g|png)$/i)) {

를 아래와 같이 변경

            if (f.mb_icon.value) {
                if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png|webp)$/i)) { // WebP 추가


19-2. 그누보드 / skin / member / 스킨 / register_form.skin.php  ( 그누보드 5.4.5.4 기준 442 줄 )
            if (f.mb_img.value) {
                if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png)$/i)) {

를 아래와 같이 변경

            if (f.mb_img.value) {
                if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png|webp)$/i)) { // WebP 추가


20. 환경설정 > 기본환경설정 > 이미지 업로드 확장자
gif|jpg|jpeg|png
를 아래와 같이 변경합니다
gif|jpg|jpeg|png|webp


참고자료
https://ncube.net/php-webp-이미지를-jpg-png-로-변환/