카테고리 보관물: 워드프레스

워드프레스 php imagick 모듈 설치로 avif 이미지 파일 포맷 사용

워드프레스6.5가 avif 이미지 파일 포맷을 지원하기 시작하다.
1년도 더 된 이야기인데…

이미지 파일은 우리 어렸을때부터 사용되던 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 기준)

워드프레스가 설치 되어 있는 서버에서 avif 지원하는지 확인

워드프레스 관리 화면 왼쪽 사이드바 메뉴에서 도구->사이트 건강->정보 탭->미디어 처리(클릭해서 펼치기)
imagick가 설치되어 있고 지원 파일 포맷에 avif 가 있으면 된다.
gd에도 지원 파일 포맷에 avif 가 있는데 지금 내 환경에 gd 는 쓸만한게 못 되는데 아마 앞으로 avif 지원이 제대로 될 것이라 여러분 환경에서는 잘 될지도 모르겠다.

워드프레스 사이트 건강 화면에서 avif 지원 확인하기
GD는 아직 제대로 안되더라.

PHP imagick 모듈 설치

imagick가 표시 되어 있지 않으면 PHP imagick 모듈을 설치 해야한다.

설치 후 모듈에 imagick가 있는지 확인하고, 미디어 처리에 avif 파일 지원이 있는지 확인.

모던 이미지 포맷 플러그인 활성화

워드프레스 플러그인으로는 워드프레스 공식으로 만들어진 Performance Lab을 설치한다.
설치하면 여럿 플러그인으로 나뉘어서 활성화 할 수 있는데 [모던 이미지 포맷]을 활성화하면 된다.
그 후 관리화면 왼쪽 메뉴에서 설정->미디어로 들어가면 모던 이미지 포맷 설정이 있는데 여기서 AVIF를 선택하면 된다.

모던 이미지 포맷 설정
php에서 gd 나 imagick 모듈이 avif 포맷을 지원하지 않으면 avif 를 지원하지 않는다는 메시지가 표시 된다.

avif 파일 지원이 안되는 경우에는 webp를 선택할 수도 있는데 imagick 모듈을 설치하지 않고 gd 모듈로 webp를 쓰려고 해도 여러가지 문제가 생긴다. webp 변환이 제대로 안되서 0byte 파일이 나오거나. 내 환경에서는 그랬다…

이제 워드프레스에서 jpg나 png 포맷의 이미지 파일을 업로드 해 보면 avif 파일로 변환 되어 있는걸 볼 수 있다.

미디어 추가 화면에서 avif로 변환됨
png 파일이 avif 파일로 변환 되어 있다.

파일 용량은 avif 압축 설정에 따라서 달라서 그림이 복잡한 파일은 그렇게까지 줄지는 않는듯한데 이미지 품질 자체는 괜찮은 것 같아서 계속 써 보려 한다.
화질 용량 비교 참고 – 차세대-이미지-포맷-avif-webp-jpeg-화질-용량-비교

관련 글 : 우분투 서버 24.04 LTS에 설치한 워드프레스에서 avif 이미지 포맷 사용하기 with gd or imagick

우분투 서버 24.04 LTS PHP 버전이 여러개 설치 되어 있는 경우

이전 글과 연결됨
우분투 서버 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를 고를때 콘솔에서 작동할건지, 웹서버에서 작동할건지 잘 생각하고 설치해야한다.

속편하게 그냥 둘다 설치하면 제일 좋다.

워드프레스에서 콘솔에서 wp media generate 명령으로 이미지 썸네일을 작성할 수 있는데, 이 커맨드는 콘솔에서 작동하므로 8.4 버전의 php를 사용하게 된다.
워드프레스 관리화면에서 imagick 모듈이 설치 되어 있다고 해도, 이건 php8.3-fpm에 설치되어있다는 뜻.
여기서 헷갈리기 시작하면 망하니 그냥 둘 다 똑같이 모듈을 설치하는게 낫다.

나는 하나만 쓰고 싶다하는 사람이 있으면
update-alternatives를 검색해 보면 된다. 여러 버전에 프로그램이 설치된 경우에 어떤걸 사용할지 정할 수 있다.

우분투 서버 24.04 LTS에 설치한 워드프레스에서 avif 이미지 포맷 사용하기 with gd or imagick

php8.3-imagick 모듈 정보
처음부터 이걸 설치했으면 아무 문제 없었을 것을…

게임 스크린샷을 풀사이즈로 올리니 이미지 파일 용량이 너무 커지는게 신경 쓰였는데, 우분투 서버 버전을 올리고 워드프레스 플러그인 정리를 좀 하다 보니 워드프레스 공식으로 나온 새로운 이미지 포맷 지원 플러그인이 있길래 설치했다.
플러그인에서는 webp, avif 이미지 포맷을 지원하는데 webp 다음에 나온게 avif 포맷이고 지원하는 브라우저는 webp 보다 적다고 하는데 최신 브라우저는 전체적으로 더 좋은건 avif 라 avif 포맷으로 가기로 결정.
플러그인을 설치하고 설정에서 avif 포맷을 선택하고 썸네일 등 이미지 재생성을 하려고 우분투 콘솔에서 wp media regenerate 커맨드를 실행했다.

여기서부터 문제가 발생하는데, 일단 처음엔 php에 있는 gd 모듈이 avif 포맷을 지원하지 않았다.
우분투 서버 24.04 버전에서는 php 8.3을 설치하는데 avif 를 지원한다고 하는 gd 버전이 설치되어 있어도 워드프레스 플러그인에는 avif 지원을 하지 않는다고 표시 된다.
이래저래 알아본 결과 ppa(개인 패키지 저장소)에 있는 gd 모듈을 설치하면 문제 없다는 글을 발견해 리포지토리를 추가.

없을 경우

리포지토리 추가 후

업그레이드를 하면 php8.4도 같이 설치되더라.
php 버전이 두개가 설치되면 좀 헷갈림… php -v 해서 지금 작동하는게 어떤 버전인지 확인하도록. php 8.4가 설치되면 기본적으로 이게 우선된다.

워드프레스 관리화면에서 도구->사이트 건강->정보(탭)->미디어 처리 항목->GD 지원 파일 포맷에 AVIF가 추가 되어있을 것이다.
GD 버전은 2.3.3으로 업그레이드 이전과 같은게 함정.

우분투 콘솔에서 본 php 8.3과 8.4 버전 gd의 정보.

wp media geraerate 커맨드로 다시 avif 파일 생성을 시도해 보면 avif파일이 생성이 되긴하는데 곳곳에 경고가 뜨고, 파일이 제대로 만들어지지 않아 0byte 파일이 생성되거나 하더라.
예를 들면 gd가 팔레트 이미지를 지원하지 않아서 생기는 에러.
Warning: imageavif(): avif doesn’t support palette images

이것저것 찾아보면서 php 에서 gd 외에 이미지 처리를 하는 라이브러리가 imagick 이라고 하나 더 있는데 이걸 쓰면 된다는 이야기가 있어서 설치해 봤다.

8.3, 8.4 두 버전을 설치해야 되는 이유 → 우분투 서버 24.04 LTS PHP 버전이 여러개 설치 되어 있는 경우

그냥 깔끔하게 다 해결 된다.
avif 파일로 가고 싶으면 처음부터 imagick을 설치했으면 아무 문제가 없었을 듯.

아파치 웹컨텐츠 압축 mod_deflate 설정과 mime type 알아보기

우분투 서버 14.04 LTS 에서 설치한 아파치 Apache/2.4.7 는 웹컨텐츠를 압축하기 위해서 mod_deflate 를 사용한다. 기본적으로 활성화 되어 있고, 웹에서 사용하는 일반적인 파일들은 미리 정의가 되어 있기 때문에 그냥 쓰는 일이 많지만, 웹컨텐츠 중에서 좀 특수한 파일이 있을 경우에는 압축이 되지 않는 경우가 있다.

나 같은 경우에는 워드프레스 젯팩을 설치했는데 그 안에 Genericons.svg 라는 파일이 압축이 되고 있지 않았다. 이 파일은 텍스트 파일로 78Kb 나 되는 사이즈를 가지고 있다.
이 사실은 구글의 PageSpeed Insights 에서 알게 되었다. 운영중인 사이트/블로그의 속도를 개선하기 위해서 쓰면 좋을듯하니 이용해보자.

Genericons.svg 파일이 압축되고 있지 않다.
Genericons.svg 파일이 압축되고 있지 않다.

각설하고, svg 라는 확장자를 가진 이 파일을 아파치에서 압축하는 방법을 알아보자.

deflate.conf 파일 수정

위에서 아파치에서 압축은 mod_deflate 을 사용한다고 했다. 이 모듈의 설정 파일은 deflate.conf 이고 이 파일은 /etc/apache2/mods-enabled 에 있다. 열어서 수정하도록 하자.

파일을 열어보면

이렇게 mime type 로 압축 송신할 파일들을 정의해 둔 것을 볼 수 있다.

svg 파일의 mime type 을 알아보기 위해서는 아래 파일을 참조하자.

vi 에서 / 키로 검색 모드로 들어가서 svg 를 입력하면 아래와 같이 mime type 이 image/svg+xml 이라는 것을 확인할 수 있다.

다시 deflate.conf 파일로 돌아가서 아래와 같이 압축할 파일의 정의를 추가한다.

설정을 적용시키기 위해서는 아파치 재기동이 필요하다.

PageSpeed Insights 에서 다시 확인한 결과 압축이 적용되어 압축 사용 항목이 통과 되어 있다.

압축 사용에 문제 없음!
압축 사용에 문제 없음!

워드프레스 이미지를 자르는데 에러가 발생했습니다.

이미지 자르기 에러
이미지 자르기 에러

옛날글이라 업데이트(2025/03/10)
php8.4쯤 되면 gd를 쓰는 것보다는 imagick 모듈이 낫다.

워드프레스에서 이미지 자르기에서 발생하는 에러의 문제 해결 방법.

에러 메시지는 아래와 같다.

PHP에서 이미지 관련 처리를 하는 php gd 라이브러리가 없어서 나오는 에러이다.
우분투 서버 14.04 LTS에서는 아래와 같은 커맨드로 php gd를 설치한다.

다시 이미지 자르기를 해 보면 잘 된다!