WebP 이미지 사용하기 (2021-05-21 11:51 수정) > 그누보드5 팁자료실

그누보드5 팁자료실

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

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-로-변환/

추천
6

댓글 11개

썸네일 만드는 것만 처리하면 완료되네요.
그누보드 에도 시간이 걸리겠지만 추가되지 않을까 조심스레 생각해봅니다
워낙 좋은 이미지 형식이라서요...
왠만한 사이트 가보면 webp로 처리하는곳들이 많다보니...그게 부럽더라구요.
해피정님 작성하신내용대로 하면 작동은 되겠지만 나중에 업데이트 나오면 또 엄청난
고생을해야되서 ㅠㅠ 그게 걱정이네요.
처음에 webp 저도 제사이트에 적용시키고자했었는데 포기한 이유가 IE에는 적용이 안된다는 단점덕분에.... 포기했었거든요
근데 IE가 사라지니 다시 준비해봐야겠네요 ㅋㅋ
저는 모든이미지,gif등을 webp로 변환해서 쓸려고 했었습니다 출력도 webp만..

일단 그전에 webp업로드부터 지원해야겠네요
팁 너무 감사합니다 적용할곳을 한번에 정리해주셨네요 ㄷㄷ
썸네일 생성이 안되서 ... 그것도 시간을 갖고 찾아봐야겠어요 ^^
저장되는 이미지를 모두 webp 로 제어하는건 무척 흥미롭네요.
실제로 그렇게 운영하는 사이트가 있어서 그 당시 webp를 알고 webp에 빠져서
그 사이트와 동일하게 webp로 준비를 했었는데...
궁금해서 지금 보니 다시 원본 확장자를 지원하네요..?
음 webp로 모든 이미지를 출력 하다가 다시 원본 확장자 출력으로 돌아간 이유가 궁금해지네요
그누보드 5.x에 정식 배포판에 적용은 아마 어렵지 않을까 생각합니다
php 7.1 이후 서버에만 정상 작동하는 거라서요..
WebP 가 php 5.4 부터 인식은 하지만
이미지 사이즈를 해석하는 함수 getimagesize 에서 webp 형식이 php 7.1.0 에서 추가되었습니다

mysql 의 비밀번호 방식 변경만큼이나 큰 작업이 될테니까요...
그누보드 6 출시되면 그때는 어쩌면....
avif 가 php 함수에서 지원하지 않고 있군요...
getimagesize 함수의 마지막 이미지 포멧지원이 WebP (고유번호 18) 입니다
검색해보니 WebP 의 상위형식으로 취급된다고는 하는데,
php.net 에서 아직 관련 자료가 확인되지 않네요
전체 126 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT