Enable webp avif and heic/heif support for WordPress

WAIT WAIT WAIT!

this is a very experimental implementation to extend wordpress images format handling. You are warned to do it so if you know what you are doing and if you are aware that for now avif doesn’t work on apple devices. And also the article isn’t complete so please wait because I’m doing it 🙂
This guide is related to ubuntu but the procedure with other distros is more or less the same

if you need only imageMagick and webp support:

sudo apt install imagemagick webp

if you need only imageMagick-7.x and webp, avif and heic support:

First of all, you may want to remove the original imagemagick, since there is no need to keep the old bundled version.

sudo apt remove imagemagick 
sudo apt purge --force 
sudo autoclean && sudo autoremove

Install the needed packages many of them are already installed. Ref. https://www.linuxfromscratch.org/blfs/view/svn/general/imagemagick.html

sudo apt-get install autoconf automake autopoint autotools-dev build-essential chrpath cm-super-minimal debhelper dh-autoreconf dh-exec dh-strip-nondeterminism doxygen doxygen-latex dpkg-dev fonts-lmodern g++ g++-7 gcc gcc-7 gir1.2-harfbuzz-0.0 graphviz icu-devtools libann0 libasan4 libatomic1 libbz2-dev libc-dev-bin libc6-dev libcairo-script-interpreter2 libcairo2-dev libcdt5 libcgraph6 libcilkrts5 libclang1-6.0 libdjvulibre-dev libexif-dev libexpat1-dev libfftw3-bin libfftw3-dev libfftw3-long3 libfftw3-quad3 libfile-stripnondeterminism-perl libfontconfig1-dev libfreetype6-dev libgcc-7-dev libgdk-pixbuf2.0-dev libglib2.0-dev libglib2.0-dev-bin libgraphite2-dev libgts-0.7-5 libgvc6 libgvpr2 libharfbuzz-dev libharfbuzz-gobject0 libice-dev libicu-dev libicu-le-hb-dev libicu-le-hb0 libiculx60 libilmbase-dev libitm1 libjbig-dev libjpeg-dev libjpeg-turbo8-dev libjpeg8-dev liblab-gamut1 liblcms2-dev liblqr-1-0-dev liblsan0 libltdl-dev liblzma-dev libmime-charset-perl libmpx2 libopenexr-dev libpango1.0-dev libpathplan4 libpcre16-3 libpcre3-dev libpcre32-3 libpcrecpp0v5 libperl-dev libpixman-1-dev libpng-dev libpotrace0 libptexenc1 libpthread-stubs0-dev libpython-stdlib libquadmath0 librsvg2-bin librsvg2-dev libsigsegv2 libsm-dev libsombok3 libstdc++-7-dev libsynctex1 libtexlua52 libtexluajit2 libtiff-dev libtiff5-dev libtiffxx5 libtool libtool-bin libtsan0 libubsan0 libunicode-linebreak-perl libwmf-dev libx11-dev libxau-dev libxcb-render0-dev libxcb-shm0-dev libxcb1-dev libxdmcp-dev libxext-dev libxft-dev libxml2-dev libxml2-utils libxrender-dev libxt-dev libzzip-0-13 linux-libc-dev m4 make pkg-config pkg-kde-tools po-debconf preview-latex-style python python-minimal python2.7 python2.7-minimal python3-distutils python3-lib2to3 tex-common texlive-base texlive-binaries texlive-extra-utils texlive-font-utils texlive-fonts-recommended texlive-latex-base texlive-latex-extra texlive-latex-recommended texlive-pictures x11proto-core-dev x11proto-dev x11proto-xext-dev xorg-sgml-doctools xsltproc xtrans-dev zlib1g-dev checkinstall libwebp-dev libopenjp2-7-dev librsvg2-dev libde265-dev libheif-dev php7.4-imagick pecl php-pear

Download imageMagick 7.1

cd ~
mkdir imageMagick
sudo apt-get install build-essential autoconf git-core
wget http://www.imagemagick.org/download/ImageMagick.tar.gz
tar -xvf ImageMagick.tar.gz -C imageMagick/

Build

cd imageMagick/ && sudo ./configure --with-heic=yes --with-webp=yes --with-avif=yes --with-jbig=yes --with-jpeg=yes --with-png=yes --with-xml=yes --with-tiff=yes --with-lcms=yes --with-gslib=yes --with-x=true --with-gslib --enable-shared --disable-static --with-modules

Install

cd ~
make
sudo make install
sudo ldconfig /usr/local/lib

customize php-imagick

wget https://pecl.php.net/get/imagick-3.7.0.tgz
tar xvzf imagick-3.7.0.tgz
cd imagick-3.7.0
phpize
./configure
make install
sudo pecl install imagick

Will prompt a question like:
Please provide the prefix of Imagemagick installation [autodetect] :

To continue simply press [enter] and the install script will auto-locate the installation imagemagick folder

then to complete the installation enable imagick and restart php / apache

sudo phpenmod imagick
sudo service php7.4-fpm restart 
sudo service nginx restart

Test the imagemagick capabilities

the imagemagick config convert -list configure
enabled encoding types convert -list delegate
format list convert -list format
convert to webp via commandlineconvert abc.jpg abc.webp
convert to webp lossless via commandlineconvert abc.png webp:lossless=true abc.webp
convert to avif via commandlineconvert abc.jpg abc.avif
convert to heif to jpg via commandlineconvert abc.heif abc.jpg
convert to pdf to jpg via commandlineconvert abc.pdf abc.png


In order to enable avif support for WordPress:

add_filter( 'upload_mimes', 'perf_mime_types' );
function perf_mime_types( $mime_types ) {
    $mime_types['avif']  = 'image/avif';
    $mime_types['heic']  = 'image/heic';
    $mime_types['heif']  = 'image/heif';
    $mime_types['avifs'] = 'image/avif-sequence';
    $mime_types['heics'] = 'image/heic-sequence';
    $mime_types['heifs'] = 'image/heif-sequence';

    return $mime_types;
}

add_filter( 'wp_check_filetype_and_ext', 'perf_add_custom_mime', 10, 4 );
function perf_add_custom_mime( $types, $file, $filename, $mimes ) {
    if ( false !== strpos( $filename, '.avif' ) ) {
        $types['ext']  = 'avif';
        $types['type'] = 'image/avif';
    }

    return $types;
}


Post navigation

You might be interested in...

No comments yet, be the first!

Comments

Your email address will not be published.