서버를 옮겼더니 이런저런 문제가 나오네.
구글 서치콘솔 사이트맵에서 오류가 나와서 내 워드프레스에서 만들어 주는 사이트맵 URL을 확인해 보니 아래 오류가 나오고 있었다.
|
1 2 |
워드프레스 › 오류 SimpleXML 확장이 없으므로 XML 사이트맵을 만들 수 없습니다 |
한글로 검색해도 답이 없어서 영어로 검색.
php에 xml 모듈이 없어서 그렇단다.
설치해 줘야지.
|
1 |
sudo apt install php8.4-xml |
따로 리로드 같은건 필요 없고, 설치하고 사이트맵 URL 다시 열어보면 사이트맵 xml이 잘 작성 되어 있다.
이미지 파일은 우리 어렸을때부터 사용되던 jpg가 제일 인기가 많긴 하겠는데, 투명을 지원하는 png가 요즘 많이 보이는 것 같다.
gif는 화질구지 때문에 요즘은 거의 보기 힘들긴한데 그대로 가끔은 이걸로 움짤이 나오긴 하더라.
앞으로는 구글이 밀어주는 webp가 많이 나오려나 싶었는데 webp 상위호환 느낌으로 avif라는게 또 있어서 나는 이걸로 대세를 밀어보려 한다.
워드프레스가 6.5버전(2024/1월)부터 avif 이미지 파일 포맷을 지원하기 시작했다.
관련 뉴스 – https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/
워드프레스에서 avif 이미지를 지원한다는건 avif 이미지를 보여주는데 필요한 이런저런게 준비 되어있다는 것이지, 우리가 이미지 파일을 업로드하면 avif로 바꿔준다는 건 아니다. 그건 플러그인이 한다.
워드프레스에 jpg나 png 파일을 업로드하면 avif 파일로 변환해서 사용할 수 있게 하는 방법을 소개한다. (설치는 우분투 서버 24.04 LTS 기준)
워드프레스 관리 화면 왼쪽 사이드바 메뉴에서 도구->사이트 건강->정보 탭->미디어 처리(클릭해서 펼치기)
imagick가 설치되어 있고 지원 파일 포맷에 avif 가 있으면 된다.
gd에도 지원 파일 포맷에 avif 가 있는데 지금 내 환경에 gd 는 쓸만한게 못 되는데 아마 앞으로 avif 지원이 제대로 될 것이라 여러분 환경에서는 잘 될지도 모르겠다.
imagick가 표시 되어 있지 않으면 PHP imagick 모듈을 설치 해야한다.
|
1 |
sudo apt install php8.3-imagick |
설치 후 모듈에 imagick가 있는지 확인하고, 미디어 처리에 avif 파일 지원이 있는지 확인.
|
1 |
php -m |
워드프레스 플러그인으로는 워드프레스 공식으로 만들어진 Performance Lab을 설치한다.
설치하면 여럿 플러그인으로 나뉘어서 활성화 할 수 있는데 [모던 이미지 포맷]을 활성화하면 된다.
그 후 관리화면 왼쪽 메뉴에서 설정->미디어로 들어가면 모던 이미지 포맷 설정이 있는데 여기서 AVIF를 선택하면 된다.
avif 파일 지원이 안되는 경우에는 webp를 선택할 수도 있는데 imagick 모듈을 설치하지 않고 gd 모듈로 webp를 쓰려고 해도 여러가지 문제가 생긴다. webp 변환이 제대로 안되서 0byte 파일이 나오거나. 내 환경에서는 그랬다…
이제 워드프레스에서 jpg나 png 포맷의 이미지 파일을 업로드 해 보면 avif 파일로 변환 되어 있는걸 볼 수 있다.
파일 용량은 avif 압축 설정에 따라서 달라서 그림이 복잡한 파일은 그렇게까지 줄지는 않는듯한데 이미지 품질 자체는 괜찮은 것 같아서 계속 써 보려 한다.
화질 용량 비교 참고 – 차세대-이미지-포맷-avif-webp-jpeg-화질-용량-비교
관련 글 : 우분투 서버 24.04 LTS에 설치한 워드프레스에서 avif 이미지 포맷 사용하기 with gd or imagick
이전 글과 연결됨
우분투 서버 24.04 LTS에 설치한 워드프레스에서 avif 이미지 포맷 사용하기 with gd or imagick
php 8.3을 사용 중에, PHP를 업그레이드하면서 자동으로 8.4 버전이 설치 되어 버렸다.
다른 버전이 설치 되는거야 윈도우였다면 조금 다른 버전이면 덮어쓰기로 설치 될 것이고, 설사 따로 설치가 되었어도 내가 안쓰면 상관이 없는 문제인데 리눅스 시스템에서는 이게 여러가지 문제가 생긴다.
먼저 콘솔에서 php 를 실행하면 새로운 8.4 버전이 실행 된다.
예를 들면 워드프레스에서 imagick 모듈을 설치하고나서, 워드프레스 관리 메뉴에서 도구->사이트 건강으로 들어가서 imagick 모듈이 안보이면 php -m 명령으로 모듈 설치를 확인해야 하는데 php 8.3에 있는 imagick모듈을 설치하고 php -m 명령을 치면 php 8.4의 모듈을 확인하게 되니 설치가 되어있을리가 없다.
웹서버에 연결된 php는 8.3이 되는데, php-fpm은 8.3이 이미 가동 중이었고, 8.4 버전에 fpm은 설치하지 않았으니 웹서버에서 가동하는 php 버전은 8.3이 된다. 8.4 버전에 모듈을 설치하면 웹서버가 작동시키는 php 에서는 모듈이 설치 안되어있으니 작동이 안될 것이다.
모듈 설치시에 아래 두 커맨드처럼 8.3이냐 8.4를 고를때 콘솔에서 작동할건지, 웹서버에서 작동할건지 잘 생각하고 설치해야한다.
|
1 2 |
sudo apt install php8.3-imagick sudo apt install php8.4-imagick |
속편하게 그냥 둘다 설치하면 제일 좋다.
워드프레스에서 콘솔에서 wp media generate 명령으로 이미지 썸네일을 작성할 수 있는데, 이 커맨드는 콘솔에서 작동하므로 8.4 버전의 php를 사용하게 된다.
워드프레스 관리화면에서 imagick 모듈이 설치 되어 있다고 해도, 이건 php8.3-fpm에 설치되어있다는 뜻.
여기서 헷갈리기 시작하면 망하니 그냥 둘 다 똑같이 모듈을 설치하는게 낫다.
나는 하나만 쓰고 싶다하는 사람이 있으면
update-alternatives를 검색해 보면 된다. 여러 버전에 프로그램이 설치된 경우에 어떤걸 사용할지 정할 수 있다.
|
1 2 3 4 |
update-alternatives --get-selections | grep php php auto /usr/bin/php8.4 php-fpm.sock auto /run/php/php8.3-fpm.sock phpdbg auto /usr/bin/phpdbg8.4 |
게임 스크린샷을 풀사이즈로 올리니 이미지 파일 용량이 너무 커지는게 신경 쓰였는데, 우분투 서버 버전을 올리고 워드프레스 플러그인 정리를 좀 하다 보니 워드프레스 공식으로 나온 새로운 이미지 포맷 지원 플러그인이 있길래 설치했다.
플러그인에서는 webp, avif 이미지 포맷을 지원하는데 webp 다음에 나온게 avif 포맷이고 지원하는 브라우저는 webp 보다 적다고 하는데 최신 브라우저는 전체적으로 더 좋은건 avif 라 avif 포맷으로 가기로 결정.
플러그인을 설치하고 설정에서 avif 포맷을 선택하고 썸네일 등 이미지 재생성을 하려고 우분투 콘솔에서 wp media regenerate 커맨드를 실행했다.
여기서부터 문제가 발생하는데, 일단 처음엔 php에 있는 gd 모듈이 avif 포맷을 지원하지 않았다.
우분투 서버 24.04 버전에서는 php 8.3을 설치하는데 avif 를 지원한다고 하는 gd 버전이 설치되어 있어도 워드프레스 플러그인에는 avif 지원을 하지 않는다고 표시 된다.
이래저래 알아본 결과 ppa(개인 패키지 저장소)에 있는 gd 모듈을 설치하면 문제 없다는 글을 발견해 리포지토리를 추가.
|
1 |
sudo add-apt-repository ppa:ondrej/php |
없을 경우
|
1 |
sudo apt install software-properties-common |
리포지토리 추가 후
|
1 |
sudo apt upgrade |
업그레이드를 하면 php8.4도 같이 설치되더라.
php 버전이 두개가 설치되면 좀 헷갈림… php -v 해서 지금 작동하는게 어떤 버전인지 확인하도록. php 8.4가 설치되면 기본적으로 이게 우선된다.
워드프레스 관리화면에서 도구->사이트 건강->정보(탭)->미디어 처리 항목->GD 지원 파일 포맷에 AVIF가 추가 되어있을 것이다.
GD 버전은 2.3.3으로 업그레이드 이전과 같은게 함정.
우분투 콘솔에서 본 php 8.3과 8.4 버전 gd의 정보.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
sudo apt show php8.3-gd Package: php8.3-gd Version: 8.3.17-1+ubuntu24.04.1+deb.sury.org+1 Priority: optional Section: php Source: php8.3 Maintainer: Debian PHP Maintainers <team+pkg-php@tracker.debian.org> Installed-Size: 164 kB Provides: php-gd Depends: php-common (>= 1:81~), ucf, php8.3-common (= 8.3.17-1+ubuntu24.04.1+deb.sury.org+1), libc6 (>= 2.17), libgd3 (>= 2.3.3) Download-Size: 31.2 kB APT-Manual-Installed: no APT-Sources: https://ppa.launchpadcontent.net/ondrej/php/ubuntu noble/main arm64 Packages |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
sudo apt show php8.4-gd Package: php8.4-gd Version: 8.4.4-1+ubuntu24.04.1+deb.sury.org+1 Priority: optional Section: php Source: php8.4 Maintainer: Debian PHP Maintainers <team+pkg-php@tracker.debian.org> Installed-Size: 229 kB Provides: php-gd Depends: php-common (>= 2:95~), ucf, php8.4-common (= 8.4.4-1+ubuntu24.04.1+deb.sury.org+1), libc6 (>= 2.17), libgd3 (>= 2.3.3) Download-Size: 36.0 kB APT-Manual-Installed: yes APT-Sources: https://ppa.launchpadcontent.net/ondrej/php/ubuntu noble/main arm64 Packages |
wp media geraerate 커맨드로 다시 avif 파일 생성을 시도해 보면 avif파일이 생성이 되긴하는데 곳곳에 경고가 뜨고, 파일이 제대로 만들어지지 않아 0byte 파일이 생성되거나 하더라.
예를 들면 gd가 팔레트 이미지를 지원하지 않아서 생기는 에러.
Warning: imageavif(): avif doesn’t support palette images
이것저것 찾아보면서 php 에서 gd 외에 이미지 처리를 하는 라이브러리가 imagick 이라고 하나 더 있는데 이걸 쓰면 된다는 이야기가 있어서 설치해 봤다.
|
1 2 |
sudo apt install php8.3-imagick sudo apt install php8.4-imagick |
8.3, 8.4 두 버전을 설치해야 되는 이유 → 우분투 서버 24.04 LTS PHP 버전이 여러개 설치 되어 있는 경우
그냥 깔끔하게 다 해결 된다.
avif 파일로 가고 싶으면 처음부터 imagick을 설치했으면 아무 문제가 없었을 듯.
우분투 서버 14.04 LTS 에서 설치한 아파치 Apache/2.4.7 는 웹컨텐츠를 압축하기 위해서 mod_deflate 를 사용한다. 기본적으로 활성화 되어 있고, 웹에서 사용하는 일반적인 파일들은 미리 정의가 되어 있기 때문에 그냥 쓰는 일이 많지만, 웹컨텐츠 중에서 좀 특수한 파일이 있을 경우에는 압축이 되지 않는 경우가 있다.
나 같은 경우에는 워드프레스 젯팩을 설치했는데 그 안에 Genericons.svg 라는 파일이 압축이 되고 있지 않았다. 이 파일은 텍스트 파일로 78Kb 나 되는 사이즈를 가지고 있다.
이 사실은 구글의 PageSpeed Insights 에서 알게 되었다. 운영중인 사이트/블로그의 속도를 개선하기 위해서 쓰면 좋을듯하니 이용해보자.
각설하고, svg 라는 확장자를 가진 이 파일을 아파치에서 압축하는 방법을 알아보자.
위에서 아파치에서 압축은 mod_deflate 을 사용한다고 했다. 이 모듈의 설정 파일은 deflate.conf 이고 이 파일은 /etc/apache2/mods-enabled 에 있다. 열어서 수정하도록 하자.
|
1 |
sudo vi /etc/apache2/mods-enabled/deflate.conf |
파일을 열어보면
|
1 |
AddOutputFilterByType DEFLATE text/html text/plain text/xml |
이렇게 mime type 로 압축 송신할 파일들을 정의해 둔 것을 볼 수 있다.
svg 파일의 mime type 을 알아보기 위해서는 아래 파일을 참조하자.
|
1 |
vi /etc/mime.types |
vi 에서 / 키로 검색 모드로 들어가서 svg 를 입력하면 아래와 같이 mime type 이 image/svg+xml 이라는 것을 확인할 수 있다.
|
1 |
image/svg+xml svg svgz |
다시 deflate.conf 파일로 돌아가서 아래와 같이 압축할 파일의 정의를 추가한다.
|
1 |
AddOutputFilterByType DEFLATE image/svg+xml |
설정을 적용시키기 위해서는 아파치 재기동이 필요하다.
|
1 |
sudo service apache2 restart |
PageSpeed Insights 에서 다시 확인한 결과 압축이 적용되어 압축 사용 항목이 통과 되어 있다.
