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
댓글 12개
과연 될지는 의문이지만...
해피정님 작성하신내용대로 하면 작동은 되겠지만 나중에 업데이트 나오면 또 엄청난
고생을해야되서 ㅠㅠ 그게 걱정이네요.
근데 IE가 사라지니 다시 준비해봐야겠네요 ㅋㅋ
저는 모든이미지,gif등을 webp로 변환해서 쓸려고 했었습니다 출력도 webp만..
일단 그전에 webp업로드부터 지원해야겠네요
팁 너무 감사합니다 적용할곳을 한번에 정리해주셨네요 ㄷㄷ
저장되는 이미지를 모두 webp 로 제어하는건 무척 흥미롭네요.
그 사이트와 동일하게 webp로 준비를 했었는데...
궁금해서 지금 보니 다시 원본 확장자를 지원하네요..?
음 webp로 모든 이미지를 출력 하다가 다시 원본 확장자 출력으로 돌아간 이유가 궁금해지네요
그누 다음 업데이트 버젼에 나올꺼라 확신합니다.
php 7.1 이후 서버에만 정상 작동하는 거라서요..
WebP 가 php 5.4 부터 인식은 하지만
이미지 사이즈를 해석하는 함수 getimagesize 에서 webp 형식이 php 7.1.0 에서 추가되었습니다
mysql 의 비밀번호 방식 변경만큼이나 큰 작업이 될테니까요...
그누보드 6 출시되면 그때는 어쩌면....
getimagesize 함수의 마지막 이미지 포멧지원이 WebP (고유번호 18) 입니다
검색해보니 WebP 의 상위형식으로 취급된다고는 하는데,
php.net 에서 아직 관련 자료가 확인되지 않네요
감사합니다.
list 에서는 썸네일이 안나오네요. (갤러리 스킨)
