Convert images to .webp

kuopassa · 2024-02-17 02:26:49

Thanks to phiw13, the kuo_webp plugin is now available as a .zip package. I got that with the Textpattern 4.9-dev export tool. :-)

Myusername · 2024-02-17 04:49:27

Knowing which hooks to use seems easy to do this:

register_callback('convert_to_webp', 'image_uploaded', 'image');
register_callback('delete_image', 'image_deleted', 'image');

function convert_to_webp($evt, $stp, $id = '')
{
    $image = safe_row(
      '*',
      'txp_image',
      "id = '$id'",
      false
    );

    // Base path where images are stored
    $basePath = IMPATH;

    // File extension of the image
    $fileExtension = $image['ext'];

    // Constructs the full path of the original image
    $originalImagePath = $basePath . $id . $fileExtension;

    // Checks if the image exists
    if (!file_exists($originalImagePath)) {
        return;
    }

    // Depending on the file extension, loads the image
    switch ($fileExtension) {
        case '.jpg':
        case '.jpeg':
            $image = imagecreatefromjpeg($originalImagePath);
            break;
        case '.png':
            $image = imagecreatefrompng($originalImagePath);
            break;
        default:
            echo "File format not supported.";
            return;
    }

    // Path where the WebP converted image will be saved
    $webpImagePath = $basePath . $id . '.webp';

    // Converts and saves the image as WebP
    $result = imagewebp($image, $webpImagePath);

    imagedestroy($image);
}

function delete_image($evt, $stp, $id = '')
{
    $basePath = IMPATH;

    $webpImagePath = $basePath . $id . '.webp';

    // Checks if the WebP version of the image exists
    if (file_exists($webpImagePath)) {
        // Attempts to remove the WebP image
        if (unlink($webpImagePath)) {
          return "The WebP image was successfully removed.";
        } else {
          return "There was an error trying to remove the WebP image.";
        }
    } else {
      return "The WebP image does not exist or has already been removed.";
    }
}

In this way, we have {id}.jpg and {id}.webp. Simple, but it seems functional. I didn’t think about how the webp image would be accessed on the frontend, but it has the same URL, what changes is just the image extension, so it shouldn’t be a problem. However, the problem seems to be about the thumbnails, since looking at the URL that Jakob mentioned, I didn’t find any hook that is triggered when creating a thumbnail, only when the thumbnail is deleted. The same logic should work, and we would have {id}t.jpg and {id}t.webp.

jakob · 2024-02-17 22:11:14

Bloke wrote #336678:

That is indeed a good workaround for now. I like that idea, albeit loading the web server with work, which means we’d need to maintain Nginx and others somehow. I’d still prefer a core solution one day. One day…

phiw13 wrote #336690:

Interesting… If I understand it correctly, this checks (1) if the browser supports .webp, then (2) checks if there is an image in that format for with the same name as the requested .jpg and then (3) replace the latter with the former. Hmm, is it not a little wasteful? the action would happen on every image request…

Yes, the author does caution that it add server load and is more responsibly solved using the source tag or similar.

And an nginx equivalent would be great.

kuopassa wrote #336691:

Thanks to phiw13, the kuo_webp plugin is now available as a .zip package. I got that with the Textpattern 4.9-dev export tool. :-)

Cool, thank you! (BTW: there’s now this command-line too which will make a txt-installer from the /textpattern/plugins/plugin_name folder).

Myusername wrote #336692:

Simple, but it seems functional. I didn’t think about how the webp image would be accessed on the frontend, but it has the same URL, what changes is just the image extension, so it shouldn’t be a problem. However, the problem seems to be about the thumbnails, since looking at the URL that Jakob mentioned, I didn’t find any hook that is triggered when creating a thumbnail, only when the thumbnail is deleted. The same logic should work, and we would have {id}t.jpg and {id}t.webp.

Also cool! This was more along the lines of what I was thinking.

You’re right, there’s not a thumbnail_uploaded callback, but in your convert_to_webp{…} function, which is run when the image_uploaded callback is triggered, you could always check if there are values for $image['thumb_w'] and/or $image['thumb_h'], and if so resize your image accordingly and create a corresponding webp file with a t in the filename.

The only situation that’s then not covered is the exclusive creation of a thumbnail independently of the main image.

Might this last situation be addressed by adding a corresponding callback just after this line ?

bici · 2024-02-18 03:31:50

whoa!
Parse error: syntax error, unexpected ‘IjtzOjEwOiJhdXRob3JfdXJpIjtzOj’ (T_STRING) in /home/bici/apps/bicilogic_app/textpattern/plugins/kuo_webp_v0.1/kuo_webp_v0.1.php on line 16

I managed to login and delete plugin. !

Pat64 · 2024-02-18 04:53:05

Hi Petri.

I’m very interested in your kuo_webp plugin. I definitively adopted the webp images format.

Unfortunately, I can’t get any webp copies from my images (png or jpg) when I click on the floppy disc icon. There are no \webp folder on my server.

jakob · 2024-02-18 06:41:47

bici wrote #336696:

Parse error: syntax error, unexpected ‘IjtzOjEwOiJhdXRob3JfdXJpIjtzOj’ (T_STRING) in /home/bici/apps/bicilogic_app/textpattern/plugins/kuo_webp_v0.1/kuo_webp_v0.1.php on line 16

bici, you have the kuo_webp_v0.1.php as well as the kuo_webp.php in your /textpattern/plugins/kuo_webp/ folder and that’s causing the problem. Just remove kuo_webp_v0.1.php from inside that folder so you are left with:

/kuo_webp
    manifest.json
    kuo_webp.php
    help.textile

and it should work again (pending comments in next post).

If you are reinstalling, you can either

visit “Pete’s GitHub page”.
Click on “Download raw file” button – the icon next to “raw” at the top of the code block.
Visit Admin › Plugins on your textpattern site and click the “Upload” button next to “Upload plugin”.
Select the php file you just downloaded.

Or, use this txt-installer (this includes the fix I made in the next post) – see below for a v0.02 update.

# kuo_webp v0.1
# Create WebP versions of images.
# Pete
# https://textpattern.fi/

# ----------------------------------------------------------------------------
# This is a plugin for Textpattern built using ais_txpplugin_packager.php
# To install: textpattern > admin > plugins
# Paste the following text into the 'Install plugin' box:
# ----------------------------------------------------------------------------

H4sIAAAAAAAAE7VY3W7bNhS+z1OwTODKg+HIaZofBd5QFEkXoG1yEWAXmSFQEiVxlSWBpJNmbV5iF7
vdiwx7pj3CDqk/6seJHWC5cKzDcw4/fjx/FnFmM+ebcI4dfEe5YFmKz4TzxsH2dKa+HTmYrGSccfVw
6OBrKqn6OrOrBXfFmZIcgFEsZS6c/X1Jv8qcSEl5Og3ZvjaYOTigwucsl9UuIHrPKZEU/UK9a1QCEC
gLEVuSiIqpUnvr4IwHFBAw57RAIR9yqh7fFMthQiKhnu1iOSVLDfLEwV9WmXtPvbyE72eBXjk8OYAD
7OxwGjEBMF2fJIlH/C9WbeH6kuAJwhqJu2LNdxowicdnT1snZJX6MaB+2kUIWooPZG5rjXe+7SD4i5
LMIwnaY8vIDRgHfSXd41SsEonm6HZRibRbkAgSUpdn9xb+Qe0mv+auXtJbB6CA0RSxVN6RxNpzP5zf
3IIYL8YTFJJE0HHpj4XIEpL7y9wqXN9iuFK8AC9TTecYvZoje4wKnAaq2wVsEnMaWvWK+sP//vXHP/
qa8aS98BO9o6mc611GwGY+bygasWCuABtI4QmPiOZsrpG03b2WTCZ0jke7M/vg4PgMlQGWccSpbwRb
yBIq8OvaGE6u/j2WfCrXiuB6HYerJMFo/iO6/HT97uZnhapkpoI17eDBMl4tvZSwZ+ykabgwbkBhdO
lXiDFhaUS3BYrFeCvi//wbXYAZEux32qGLxasCkI4vBWYfb3CygmnCIyrn2E3pPQZ2kznOYXsq/Xgt
r2tO1RC1/dFuatsXHU0+f7Z1h6F+nEGhyhMoKhYepZ7Iz8xPyLnyAGD3OJTrVZGoE/7/yOMaPROCyk
q7SCGwQKNRrVGlfFsFtixzfg45b+q/ostcPpQlYqzFresT2Yr7tIpaQL0uB1pF5qxxAPQ31q0rqj0p
MsGMpqp3uH5M0ggIfcp/RY7eQbUSAKa8FHVHCawO8rEBiYl3vk9zSYMbw1S4pJSWDtSnudEuep/lDy
yNkIxVOWIRS6G06z2nzRXBfXV2MAlVf3Xw5DzzqRAZLzabdOmetOgzjvC409qvDIuSITMV4arRgFyF
wawLq968pfhE0cPrr725+paz1roZA72FjWJiAMIwSbvoSs8s0OQfkG/cYo1uOkRo9wCTQY7GPSKfiU
jTtkPZC0Nzw8BbE3w9nfoQk+GlgYOs0ewy2NPqEPC4LsRfxZTABClcAaOG1aO8WLXwx8wn6qIdtOVQ
0oqb4rNb742rhCqrImhPNcKxg4rHqgHUsx3G3dkOOlIxFkMftwpro8y303jJYAQebKbgqK10NqABmG
SWZPcqa+oWZhDLqVzxtDLod7de0FVn1rHnIC/Lkt6JdecqTyQk3ISP9iov7VlM498ndyw0x61C6i3z
vjAa0vwtj4aEdECapwNCGZGBoY2lLuGcPNRVuTrCBEm+omuuRC1txXC/vJlhNUHVU62nQqpo492QUz
+XYBV+sMUsDTOr9KBq6+Xniyv34vLj+ed3n86raKugaTs1HepsqDdaM+s0FcOMhQZo1RIbCaT/JqHS
mnGqCabwbQZKf3qpMFbDaKFd/EgIebYszPpTTZWPA+pWfYwqXxAFpM9DVFG7PUJttTFAT+36QnzRix
iMtiIw2oy/boLdmuncSuNFmXLbQNaGm2NW6i8mVVWV7UnVVhsDBO0X41MFbnt82mpjfKDdxzfc1fQ8
ChIXyoCeIWr59++Vf5ZC50h9moXo1w/BpV5WMJroUaKcJFRKKjMVHj40umo4NMciLSBJHhMvoWnAFJ
FaVkZVV1WQu0L9aTVVDGsNVeMmaGbbrd8kdZnTWgGFy8keGoQGRf0uUb73Ui+63GXwVr9nO3AwPbKP
D46ODskb+9QOjm1qn4Te4fGpdwqzj39ol2YxTXKXk3v1eDxz8M5V64eKfmuCSBo0o69+WSeRT1LkUT
UdM2jWLC1fsmR8SeQUQD3+B9QgXnBpFAAA

jakob · 2024-02-18 06:47:05

Pat64 wrote #336697:

Unfortunately, I can’t get any webp copies from my images (png or jpg) when I click on the floppy disc icon. There are no \webp folder on my server.

The plugin doesn’t create a \webp subfolder, it just creates the files alongside the existing image files.

However, I initially also couldn’t get it to work on PHP 8+, I tracked down the problem to this check where is_resource() is giving me no response and hindering the creation of the webp files.

Apparently the check for GD image has changed since PHP 8, so this resolved it for me:

        if (
                (isset($image))
                &&
                (is_resource($image) || $image instanceof \GdImage))
        ) {

Now the image creation works for me. See the post above for a txt-installer with this fix included.

Pat64 · 2024-02-18 07:52:16

It’s perfect! 👌

Thank you very much, Petri and Jacob. 👏

(Okay: the plugin creates a link to display a copy of the current image in webp format, from a new icon)

phiw13 · 2024-02-18 09:19:05

Ok, yeah, after reinstalling the plugin with Jakobs fixes (using the txt installer above, that kinda work: a .webp image is created along with a thumbnail. The quality is OK.

The issue though, as with much of GD generated images is file size: the original .jpg 1000×750px mildly optimised urban landscape is 208kb on disc. The generated .webp balloons to 455kb. Doing the conversion with Acorn image editor (File > Export, webp quality slider to 75%) yields a more reasonable 175kb.

jakob · 2024-02-18 10:25:56

phiw13 wrote #336701:

The issue though, as with much of GD generated images is file size: the original .jpg 1000×750px mildly optimised urban landscape is 208kb on disc. The generated .webp balloons to 455kb. Doing the conversion with Acorn image editor (File > Export, webp quality slider to 75%) yields a more reasonable 175kb.

That’s probably because it’s currently set to generate webp images at 100% quality – see this line and imagewebp on php.net. Play with that value to get better results.

jakob · 2024-02-18 12:55:36

jakob wrote #336702:

That’s probably because it’s currently set to generate webp images at 100% quality – see this line and imagewebp on php.net. Play with that value to get better results.

phiw13 wrote #336689:

based on your screengrab only, might it not be better inserting your widget after the main image – and just before the thumbnail generating area?

Here’s a mini-update to the earlier version with one UI modification and two additions:

Positioning of the button to generate the image and links to the corresponding images show in the sidebar above the “save”, “delete” and “go back” buttons. (Philippe, there’s not a good placement between the main image and the thumbnail, and the other placements cause one to have replace a piece of the UI).
A prefs setting under Admin › Preferences › WebP settings for setting a user-defined quality setting. The default is 80.
Textpack strings in English, German and French. Improvements/corrections welcome.

myusername’s variant is still desirable as this is more a proof of concept for creating webp images on a one-by-one basis. Ideally you’d want a generic setting that creates them as a rule as part of the image_save routine. A bulk conversion for existing sites would also be good.

# kuo_webp v0.2
# Create WebP versions of images.
# Pete
# https://textpattern.fi/

# ----------------------------------------------------------------------------
# This is a plugin for Textpattern built using ais_txpplugin_packager.php
# To install: textpattern > admin > plugins
# Paste the following text into the 'Install plugin' box:
# ----------------------------------------------------------------------------

H4sIAAAAAAAAE9VazXLbOBK+6ykQxhVKLlnyT3488iiTbCrJuiqT8aa8k0PWxYJIkMKEIjkEaMfJuG
peY2972EteYa95k3mS7QYIEvyRLXt3D6tKOSLQvx+6Gw1CdLa3P/siZk9mzjnLBU8T50jMDmbO7mQf
vz2eObSQyzTHh4cz54RJhl/3ds2EV+QcR/aBaSllJmbTqWSfZEalZHkyCflUMezNnIAJP+eZNFpg6E
XOqGTkPVuckNIAQdKQ8BWNmJgg2aOZk+YBAwv47DtthbzMGD4e6OkwppEwzzCd0JUy8nDmfCxS74It
stJ8Pw3UzJP9Q1A+GAx4SIbyU8YTsDWkPiPz+Zy4NFjxxB2RL4MBgU/OIi6AwPNpHC+o/3FYyfV8SZ
0xcZS9XsHxOzjPksALmKQ89sI0XzmjoxsFxbRI/CW42ZKmv7OAS5SixEyn5DgREmSQKchcpeeMZDkL
xRolbq2Eh8y/9GPmjombxUXEk3psYshcS9EJyiUZTZgaoUHgZTk/F0NHaax40NS98f74YPzQeGvTal
U3slxne6oCR2ghXg6I5MyXliNN6ejE1WAQAqrIR+wVG44GX5S+KE4XNCZbfBV5IK90eytnooglmZMP
Z2ZILQOMCBoyL08vhs422g+x46kptVQBEDhkQiCczmk83PJevzz9AMPO2WhMQhoLZpDdQlNQgXrCjx
MWceyQ+VNy/OPJ89M/gxitVAuAR2eiUatZ5LJYLRKIsuv5pM3Y9MhjnwBwAZaEPDZPQ2XdB23RWbk0
W0rZtfS1OWfGT8wvIXN/lQ2NVZAeztnYeDMi9+Zkt0o1pWkhEw9THLQMm2b+9lvTjhH5gbgQBqqKuG
RG3PLrkSUOFtxbFFJCEMzJEoJkWM3hx/1eQHgTP6ZCzJ2C73AfKMv/dyJGc+fp91OkeepOrufUWjQj
TPnMeUr6WaPTT1LHtjup/J24OkLh2R2NG/Q0z+ll025lATtniXSrZ4gCVwHmjru0kFhZTVrTquLSx8
AD134GBiuie+ipyjTXondVJjYoIRPWOaOAdBUf5FWJZp9hkksoYUhY46gXvgLQk2kaSw5loKm9eirD
+qqO00aoYUQa0rIefDi7Q/wk7OKCJ/+zCNKL3QoWvix0FVBFDSvA1NmgnOBn3dJImkdM6rXxwKe+Vc
lZrAmwEDPpL93NoW8m9f8F9FW1uyP88j/CfyNocyaLPCFRTi3g7Ho4IUH6PqdQnDXOsJmiw7ip2l5p
q9r5qdNdlBm2brs1fU215/63t1KMn8pSLgSThlobCBzkwYOKwuxGTRJQWW5H0P/t2vT32CqTl2VxKF
21A1SkRe4zs1mC1eu24cb+d1QLgNWsuRvLWklCMFVXif2x5y9pEgGg18kf2RtguZeiFF3icGDYsnxk
mcTFc99nmWTBqcUqPFqOlgLwr63oPnmRZpc8iYhcMpLmHLoy6K6UzjqDdKltaLABxU8VPFme+kyINN
fKxm24xw34LBeuBg19ZViUCNl9Ciw16RnHMNhrm1UpbxBe03c565e9XvqGsE7mG+GdiY1ioseEfpDu
k59Uew1t9yXxrVWsrJv0Adp2YNyL0agD5A0R2WwkG5x3DM0NA29N8HVoKie626Ca6nFkDWUbwQ5VC4
CrdSF+b8konJKFJ6AjHHYg17ND503qU1zoGflB9Y5zhf8D7A3ndTf4gAdzFTlW2bXjRv9t13trKaHK
YgRt4SlhNCP60WwA1fHKcdrHK9jk9NGff4ZVVNxWmW+m8YrDMb8ZXLXoJtFRDwXYJNM4vcCs0YO9m2
c5193dOkFnfFaxNyMLaEA7Hqudq/QITvCS+2TLSGkeB5X9U3rOQ/vEp0cXq6w7GPVR/pJFfYOsZzRL
egZlRFvnRrUOiadbAlOVjQtjIvOCrVkSnLoVwt3yZofVmJinig5DSm/j7ZDDV0Iwm1G55EmYDksJWF
uP3776yXt1/Obl2+c/vjTRZkxTfNgrq2yoFK3pdeqKYcdCbajZEusRSP9NQqXR45gORsu2A6XbvRgb
zUldU+uzUpinK83W7WpMPvaQDys3TL4QBpbebCJG7e0tVFwbG7hArXe0L7oTgtGtAIw2w6+dYB/sdG
6k8VmZcrcxWTFubjOS3xlUrCq3B1VxbWwgUN/ZPixwt7dPcW1sH1B37evf1VQ/CiMelAHVQ1Tj+OpL
y+f47jfxWRqSv70OjtV04wWaIstozKRkMsXw8GGjM82h3RapARpnS7qIWRJwBFKNlVHVJhX0XJOvJZ
tOcQ8nvxY05vJSvZZmOQNra5QCFlIocZ6hmRP3cNe1tuh6AkSp17r1a2A4mrYFWJ0JaJdwnCUxX3Ep
mh1reZA0TOR7soegdsafkr3d3U7HWtvUVt9/6EB00N4KKCz14462xjmtKv2KJWAQsOllvWqWipt2zu
bL/uGWavWwOYc2rwqVrZWIEPwSerNH1lCbPuWCS38JvbPhNgb7VDDisASDJ3BmnWb7Hi5dlULWLgmj
JQBOp1FVGs2yr2GC7D3chb92VJy8e/nKO3nz19fHb2EigYaa5TC82+qfLcf1a5zy8qDIAsjWwDVvJ9
0vCMeVetuhkBmtbcTxs4Bk/3jUQibgog+aXlquL3Q6xH22VrSbW9tvH4MS0dGoL5Q0/gmcqwHs6sam
fRrrMa4UeifTWtEN0lVoT7e3B2SbvGM7eVpIRlx9VhUu5HnykUDMnyjd+p4qJjIlz/EGj/zx+7/UBZ
auQOU0iIJ/056E6b9hql5cdY9QPAnYp0m2zMqzlGK8r9kjsDXzbOSuBuWlJN5CeqvgkboE3Z85j54E
Bw/3Dx6Hh+xwn4V7Dw8PwpDtUcr8J8w/pCWbvlX1P+Ljd493Z879Z+lFwvLKgcH9ZzH0yQVuEiyBJ1
U5Bj1vx3Ex7KtXXdwVpblNadC+Kwc71GveuiPPawa2IU+aEyOU+GkONStL1V5D1CWYfe0L3bnQ4glN
gvrlA/iiLziNq6hA2QKlQoKoeqZRKSoyLdOMxrBcMRnu7mClt1EL2E2oKXE7f+IxhAJsT+Aix+haD5
1Nn7CizXMNgIrzZ5pzmsCxg5xDqAacCbYiKI4UANDPaS7gbFQscIDln1kRqYVfA5YyA6sHi+MiiUoT
1qKmzNZj3/4p+/AK85uj7NtX8Bw2szJslOTrI20tx3XR9u1r8u1rzj6TtFDhBkI+w0KLOr7eIxR1AC
Kqgnz7B/GxTyojBFoXQQnUDk6hBrFeKMvqU5vVC+BfNG5fwRES//H737V8tQwGyDKvlyzOvJxeqN9b
PMGfUexN6pwebJtEEq3sUbLw5wVUGqSqX05As5tCAYMKpd7iwd5GF1DzJ9uDwSk861qNN/SCUFJeBk
DZRFrvZcAlUW2lVxbUiyWHBuCCx7EO324mW3VB5zEQFECQSKL2f6TRCNSGnVq/EhkMXqgjvuI0KJrc
xgqvLOuv6vjcqAWeKh5VzUFW2z4qYO7XAop7MNFwmIm8Mk+X/viS0DgFiTzQYipf4CA2JnDuwOIGZz
ojAZAEmOQSQH2mrneeqXtyUr04AIXeCw1MfDnW9a5cjKha5gaYsErwh+0sLnfgPwKryMWEvCowPOvY
XlEwtZBwQlcOA4k3GAzeppLNiNqRzfvcUlmQguwklXpSO6fhCogy3OjH84uaVX4IloPKiXN09W/X4a
yaOSQAAA==

phiw13 · 2024-02-19 05:41:57

jakob wrote #336702:

That’s probably because it’s currently set to generate webp images at 100% quality

Thanks for that… I did not realise that the “best” quality was hard coded. Testing with a 75% setting yields something better – 200kb for the .webp vs 208kb for the .jpg and 175kb when generated with Acorn.

Textpattern CMS

Textpattern CMS support forum

#13 2024-02-17 02:26:49

Re: Convert images to .webp

#14 2024-02-17 04:49:27

Re: Convert images to .webp

#15 2024-02-17 22:11:14

Re: Convert images to .webp

Bloke wrote #336678:

phiw13 wrote #336690:

kuopassa wrote #336691:

Myusername wrote #336692:

#16 2024-02-18 03:31:50

Re: Convert images to .webp

#17 2024-02-18 04:53:05

Re: Convert images to .webp

#18 2024-02-18 06:41:47

Re: Convert images to .webp

bici wrote #336696:

#19 2024-02-18 06:47:05

Re: Convert images to .webp

Pat64 wrote #336697:

#20 2024-02-18 07:52:16

Re: Convert images to .webp

#21 2024-02-18 09:19:05

Re: Convert images to .webp

#22 2024-02-18 10:25:56

Re: Convert images to .webp

phiw13 wrote #336701:

#23 2024-02-18 12:55:36

Re: Convert images to .webp

jakob wrote #336702:

phiw13 wrote #336689:

#24 2024-02-19 05:41:57

Re: Convert images to .webp

jakob wrote #336702:

Board footer