AVIF images and MAMP local server

The CMS Questions
1

I’m trying to use modern image formats AVIF falling back to WEBP and JPG. On my live server everything works as it should. But on my local server, on my Mac, set up with MAMP (lite), instead of the image being displayed I just get the broken/missing image icon.

MAMP is using PHP 8.3.9. I’ve looked at the phpinfo.info information on my local server. I can see the GD info, but there is no mention of AVIF. Nor is there any mention of ImageMagick.

Does this mean that MAMP can not generate AVIF images?

If it can not generate AVIF images why is the fallback WEBP image not being displayed? This is the point of using <source>?

It makes developing a website locally almost impossible if all the images are broken

2

The browser displays the first image in the <source> that it is capable of deisplaying. So if you list AVIF first, then WebP and then a jpeg fallback on the third line down, if the browser cant handle AVIF files it will move on and display the WebP file. If it cant read that, it will display they jpeg fallback.

It looks to me that the browser you are using can display Avif files, but the the images are broken. Its possibly down to an older version of GD in your MAMP. Its still strill trying to display the AVIF becuase it can understand it, but the image itself is broken.

According to the MAMP website, Mamp 7.0.7 includes gd 2.3.3 and ImageMagick 7.1.0-23.

Try setting kirby thumb driver to IM and see it generates the AVIF files.

3

Thanks.

I can’t get IM to work. Still get the broken/missing image icon.

<?php

return [
	'debug'  => false,


	'smartypants' => true,


	'thumbs' => [
		'driver' => 'im',
		'bin' => 'convert',
		'presets' => [
			'avif' => ['width' => 788, 'height' => 788, 'quality' => 70, 'format' => 'avif'],
			'webp' => ['width' => 788, 'height' => 788, 'quality' => 80, 'format' => 'webp'],
			'default' => ['width' => 788, 'height' => 788, 'quality' => 80],
		]
	]
];

<picture>
	<source 
		srcset="<?= $image->thumb('avif')->url() ?>" 
		type="image/avif">

	<source 
		srcset="<?= $image->thumb('webp')->url() ?>" 
		type="image/webp">

	<img 
		src="<?= $image->thumb()->url() ?>" 
		alt="<?= $image->alt() ?>" 
		width="788" 
		height="788" 
		loading="lazy">
</picture>
4

That might not be the right path or it could be displable in PHP ini. Have a look into mamps php.ini and look for this line

;extension=imagick.so

Take the semicolon out of the first line and restart the server.

If its not commented out, then its likkely the convert binary path is wrong.

Typing which convert in terminal will tell you where the convert binary is located. Put that path in ‘bin’ => ‘PATH HERE’ in the config.php file.

However, i have a feeling that imagmagick is built into MAMPs folder structure rather then installed on your system. If thats the case then youll have to find where the convert binary is in mamps folder structure and put that path in instead.

5

Hey, thank you so much.

I’ve found the MAMP support info, so I’ve contacted them as well.

I have a feeling this is well outside my comfort zone!

6

Maybe you should try your luck with Laravel HERD if you’re having so much trouble with MAMP.

7

Yeah, I think you’re right.

Before I spend hours trying to instal it, does Herd support/generate (whatever the word is) AVIF images?

8

Laravel Herd is a local development environment for PHP. The processing of AVIF image data is possible with PHP from version 8.1, provided that the GD extension has been compiled with libavif, which provides the underlying AVIF codecs.

9

I’ve installed Laravel Herd and got my site working on it. But AVIF images are not being created (WebP images do get created) in the Media folder and I still get the broken/missing image icon. It’s using PHP version 8.3, so I was hoping AVIF would simply work.

Using phpinfo.php there is no mention of AVIF support

Screenshot 2024-09-16 at 9.20.44 AM
Screenshot 2024-09-16 at 9.20.44 AM1974×858 73.5 KB

I don’t have the faintest idea how to:

Compile GD with AVIF Support

So I think I’ll give up

10

I’ve given up trying to get MAMP and Laravel Herd to process AVIF images on my local server.

I’ve tried a different approach.

The live server is creating the AVIF images. So I’ve copied and replaced the local Media folder, with the live Media folder. I know my browser is capable of displaying AVIF images, so I was expecting the browser to display the already created AVIF images from the Media folder. But I still get the broken/missing image icon.

Why would that be? The files are already created, so there is no need for the local server to try (and fail) to create them.

I’ve tested the live site and the AVIF images are working. And I’ve tested it on a very old browser and the fallback JPG images are working. So the problem is somewhere on the local server.