rosell-dk / webp-express

Wordpress plugin for serving autogenerated WebP images instead of jpeg/png to browsers that supports WebP
GNU General Public License v3.0
227 stars 64 forks source link

Questions #51

Closed robots4life closed 5 years ago

robots4life commented 6 years ago

My goal is to have something that will automatically create webp versions of images upon/after upload to the uploads folder. The source is already in place, e.g. in this format. (ref)

<picture>
    <source
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.webp 200w,
                opera-400.webp 400w,
                opera-800.webp 800w,
                opera-1200.webp 1200w"
        type="image/webp">
    <img
        src="opera-400.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.jpg 200w,
                opera-400.jpg 400w,
                opera-800.jpg 800w,
                opera-1200.jpg 1200w">
</picture>

1. Does this plugin send uploaded images to a/your converting server? If so, does it do this over an encrypted protocol? What happens to the files that were sent to the converting system?

2. Does this plugin add JS to the source to create code that handles the webp images?

3. During webp creating, can I give particular command arguments or only set the quality setting? cwebp -q 75 -m 6 -af -f 50 -sharpness 0 -mt -v -progress $img.FullName -o $outputName

4. If the plugin does not use an external converting cwep lib where then in the repo are the files that handle the encoding?

The sites I make are highly optimized, 100% performant and fast. Hence I would prefer not to have JS added in the source for any reason and also not "outsource" encoding to another host/server. Have not tried this locally and also had a good look at https://github.com/rosell-dk/webp-convert, I guess that looks more like something I am after, however if this plugin handles the above points fine.. well then I am going to use it of course. Would you mind letting me know what/how the workflow of this plugin is?

p.s. I had a look at your personal site and found a small typo, expertise is written with s and not c. ;)

rosell-dk commented 6 years ago

Hi,

  1. With this plugin, you do not have to add any special HTML. Image requests are handled on the server such that the jpeg images will be redirected to the converted webp images automatically. It does so with rewrite rules placed in the .htaccess and the webp-convert library. It is basically the solution described here: https://github.com/rosell-dk/webp-convert/blob/master/docs/webp-on-demand/webp-on-demand.md

  2. This plugin is able to use several methods for converting. There are both local conversion methods (cwebp, gd and imagick) and cloud converters (wpc and ewww). You decide which to use in the configuration. The wpc converter encrypts the image using sha-1 and a secret (and further, if the cloud converter is on https). The ewww converter is on https, but has no further encryption. You can read more about the converters here: https://github.com/rosell-dk/webp-convert/blob/master/docs/converters.md

  3. No

  4. Somewhere in-between. In the upcoming version, more cwebp parameters will be available (see this issue: https://github.com/rosell-dk/webp-express/issues/49). If there is any you specifically want, please tell me :)

  5. The converter classes are in the webp-convert repo, in src/Converters: https://github.com/rosell-dk/webp-convert/tree/master/src/Converters

  6. Thanks :)

rosell-dk commented 6 years ago

Btw: You are aware that the plugin is also on the codex, right? (better write it in the readme.md) https://wordpress.org/plugins/webp-express/

robots4life commented 6 years ago
  1. Image requests are handled on the server such that the jpeg images will be redirected to the converted webp images automatically. It does so with rewrite rules placed in the .htaccess and the webp-convert library.

Do the rewrite rules in the .htaccess not affect performance? What happens if in the future a browser that previously did not support the image format decides to support it? I assume you base the rewrite rule on getting the accept header response for supported types and can then do the rewrite. (ref) What about Nginx hosted WP sites that do not read .htaccess files at all? Regarding this ref I understand though that the type="image/webp" attribute takes care of browser support, so for me this means instead of adding rewrite rules have the browser parse the HTML and let the browser decide, this would mean not having to worry about having an .htaccess file or not.

  1. This plugin is able to use several methods for converting. There are both local conversion methods (cwebp, gd and imagick) and cloud converters (wpc and ewww).

Great feature. Since I don't see the local libs I assume you pull those form the webp-convert repo when the plugin is installed? How do you make sure the libs have the latest stable version in the plugin?

  1. Somewhere in-between. In the upcoming version, more cwebp parameters will be available (see this issue: #49). If there is any you specifically want, please tell me :)

Well it would be best if all parameters can be passed to the lib, in a simple way, perhaps as a string that gets added with a string concatenationafter theexec` command? Like this you don't have to specifically code/support the parameters but just pass them to the lib, no?

  1. The converter classes are in the webp-convert repo, in src/Converters: https://github.com/rosell-dk/webp-convert/tree/master/src/Converters

So in addition to this plugin repo you also add the according classes from the webp-convert repo?

I will for sure give this a try on the local install and see what happens.

However I also like to try and make a minimal local webp converter running with PHP that replies on the HTML source for responsive images with different mime types being present as well as being able to execute the local lib on the server with any given parameter.

This always after new uploads have been made through the media library, or better if new files are added to the uploads folder in WP. Just to learn this and see what can happen and I guess to train a bit in PHP.

Ideally I like something the creates all the next-gen formats on the server (ref 2) and relies on the HTML source being correctly implemented by the developer as opposed to having check and rewrite for that with .htaccess rules. Kind of decoupling the image format from the server and relying on the HTML source to be present.

rosell-dk commented 6 years ago

Q: Do the rewrite rules in the .htaccess not affect performance? A: Yes, a bit. And thus it will be faster if you reference them in picture tags. I haven't measured the cost of having rewrite rules. It would be interesting to know. Perhaps it is negligible. Perhaps not.

Q: What happens if in the future a browser that previously did not support the image format decides to support it? A: As you said, the browser will add 'webp' to their "accept" request header. The upcoming version of webp-express allows you to optionally add a cache-control header. But even if you set that aggressively, it should be ok, since the "Vary" header has been set to "Accept", instructing browsers that the response depends on their "accept" header.

Q: What about Nginx hosted WP sites that do not read .htaccess files at all? A: Nginx setups usually doesn't allow dynamic server configuration, meaning that the admin has to insert the redirect rules manually. In a future version, perhaps the next, I will display the rules that the admin has to insert on the plugin page. The rules will be something like the rules stated here and here. Btw, I just discovered here, that it is possible to add .htaccess support for Nginx with this PECL extension

Q: I assume you pull from the webp-convert repo when the plugin is installed? A: Yes. From 0.6.0 and on, I have a composer.json in the root of the plugin instructing to get the latest dev version from github. Wordpress does however not integrate with composer (on most setups). So I will add the vendor folder containing the library to the svn repo, when I submit to Wordpress. I do not use the svn library for version control, or development - only for publishing to Wordpress. As it is I who does the composer update to get the latest dev version of webp-convert, before publishing webp-express to Wordpress, and also I who maintains webp-convert, I consider it safe that I use the dev rather than the stable. If new great features or fixes gets available in webp-convert, I will make sure to push a new version of webp-express as well.

Q: Perhaps add cweb options as a string that gets added with a string concatenation after the exec command? A: It would certainly be more flexible. I however don't expect that many will be using it. And I would then have to take measures so it would not become a security problem. Perhaps a bit much work for something that will rarely be needed. I would prefer to add specific options per request.

I'd also like to support the other "Next Generation" formats. I created an issue for it here. However, I have not started digging into what it takes to generate JPEG XR and JPEG 2000 images.

Nice image comparison slider, on one of the links you mentioned, btw!

rosell-dk commented 6 years ago

Oh, and yes, you can of course use the picture approach along with this library. Pointing directly to the webp from html will be faster, albeit probably only marginally.

However, webp-express saves all its webp images in a separate folder rather than placing them next to the source files. I did it this way, because it will make the plugin work even on theme images and other images, that might be in write protected folders. It will however make it a bit cumbersome, when adding sources in the picture elements. It would be possible to add an option to save the webp images next to the source images...

rosell-dk commented 6 years ago

I'm close to releasing next versions of webp-convert and webp-express... Wondering if there are any cwebp options that we should add. Had a look at your example: cwebp -q 75 -m 6 -af -f 50 -sharpness 0 -mt -v -progress $img.FullName -o $outputName

-q option can be set using quality option -m option can be set using method option -af option can be set using autofilter option -f option can not currently be set, and would be a candidate -sharpness option can not currently be set, and would be a candidate -mt option can not currently be set, and would be a candidate -progress option does not affect the conversion -v option does not affect the conversion

https://developers.google.com/speed/webp/docs/cwebp

rosell-dk commented 6 years ago

You are probably right, it would be nice to be able to set all options in a straight-forward way

rosell-dk commented 6 years ago

https://github.com/rosell-dk/webp-convert/issues/74 https://github.com/rosell-dk/webp-express/issues/68

rosell-dk commented 6 years ago

I have now implemented custom command-line options string, ie "-q 75 -m 6 -af -f 50 -sharpness 0" (#68). Will be available in 0.6.0. I'm probably releasing tomorrow. I'm done with new features, just need testing

rosell-dk commented 5 years ago

Closed due to inactivity. Feel free to reopen :)

robots4life commented 5 years ago

Thank you indeed for all your work. No need to re-open from my side as I am still exploring various options. Thank you very much.

rosell-dk commented 5 years ago

In version 0.10 it is possible to have webp files placed "next to" original files. In the upcoming 0.11 it will be possible to have the HTML altered to point to webp (either with tag or by pointing directly to the webp (optionally only for browsers that accepts webp)). In 0.12 I plan to add webp-js

robots4life commented 5 years ago

I have recently been exploring various options where I am trying to create webp versions on a shared host with often a minimal PHP setup regarding allowed/enabled modules.

For example webp-express does not run on the shared host one of my clients uses. GD ist enabled, but it possibly has been compiled without webp support. I can show you the phpinfo output, host support confirmed it, "get in touch with plugin author" etc. so they are not doing anything about it.

To be independent of such shared hosts I am trying to run webp-convert with the supplied linux binary, cwebp-linux. So I have installed webp-convert into the theme root with composer and used this to test some conversions.

<?php

// Initialise your autoloader (this example is using Composer)
require get_template_directory() . '/vendor/autoload.php';

use WebPConvert\WebPConvert;

use WebPConvert\Loggers\EchoLogger;

$upload_dir = wp_upload_dir()['basedir'];

$path = realpath($upload_dir);

$objects = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path), RecursiveIteratorIterator::SELF_FIRST);

$images = array();
foreach ($objects as $name => $object) {
    $image = stripos($name, 'jpg');
    if ($image !== false) {
        array_push($images, array(
            'name' => $name,
        ));
    }
}

foreach ($images as $key) {

    var_export($key['name']);
    echo '</br></br></br>';
    $source = $key['name'];
    $destination = $source . '.webp';
    var_export($destination);
    echo '</br></br></br>';

    // how do I queue the conversion ?
    $success = WebPConvert::convert($source, $destination, [
        'quality'     => 'auto',
        'max-quality' => 80,
        'converters'  => ['cwebp', 'gd'],
    ], new EchoLogger());
}

That worked on local PHP compiled by devilbox.
Just starting out with PHP, if there is better ways, thanks for any help.
How can I queue the conversions in the foreach?
When I have many images to go over the local setup times out PHP, so it might as well on a shared host especially.
However, of course, when I try on the shared host I also get this.

Trying:cwebp cwebp options:-metadata none -q 80 -m 6 '/images/jpg/image-1920x1200.jpg' -o '/images/jpg/image-1920x1200.jpg.webp' 2>&1 Failed in 45 ms Found no cwebp binaries in any common system locations. Tried executing supplied binary for Linux, but that failed too (same error)

Trying:gd Failed in 1 ms Required imagewebp() function is not available. It seems Gd has been compiled without webp support.

Conversion failed. None of the tried converters are operational

I am wondering, the Linux binary is in /vendor/rosell-dk/webp-convert/src/Converters/Binaries/, cwebp-linux, so why can webp-convert not take that one instead of searching in "common system locations"? I mean if it can take the supplied Linux binary there should not be in issue with running it, even oh a shared Linux host no?

Since I am working with various CMS I am trying to have the webp conversion process independent of the CMS I use. For now my strategy is to be able to supply a conversion service that runs on the same shared host as the CMS and the project/website, watch the "images" or "uploads" folder inside the CMS and then have PHP do the conversion into those folders. I thought something like this would be possible when supplying the cwebp-linux file on a shared host that runs on Linux. Is there something I can do to get this working?

If this cannot be done, I guess it would be good to learn how to make something like this https://webp-converter.com/ and run it as a separate private service on a managed VPS where one can install everything needed and then from there hook into the various projects on other hosts and do the conversions via an API. This so one does not have to pay (except for the VPS), images are not going external and any projects/clients can handle their images themselves, meaning if they delete the jpg versions via their CMS, the webp versions will also be deleted of the CMS as well as the service host. Sure, one has to pay for the VPS and conversions but that can be included in a maintenance plan of some sort. For some this seems the most stable approach since one does not need to worry about what shared host the project/client might be and one can offer private conversions.

Bottom line, I am trying to supply a ready out of the box solution for clients on shared hosting, either using WordPress or any other CMS really. Something that is portable, watches the images/uploads/data folder and does conversions without going external, paid services, etc.

I mean it is either all that or simply upgrade the project to a better shared host or a basic managed VPS where PHP can be compiled with what is needed. Am I understanding this right?

robots4life commented 5 years ago

https://github.com/rosell-dk/webp-convert-cloud-service

OMG. I think that is what I am looking for.. because maybe this https://github.com/rosell-dk/webp-convert/issues/12 or this https://github.com/rosell-dk/webp-convert/issues/50 applies?

rosell-dk commented 5 years ago

The "Found no cwebp binaries in any common system locations. Tried executing supplied binary for Linux, but that failed too (same error)" message is misleading. What does "same error" mean? I have already created an issue for that in the webp-convert library, but haven't digged into it yet.

However, the cwebp converter is built to first try common system location and - if that fails - try the one bundled with the library.

And yes, if you manage to set the cloud service up on one server, you can use that in all other setups.

Btw: WebP Express has webp-convert-cloud-service integrated. It is probably easier to install the web service that way around. For that, all you need is WebP Express working on one server. You can then enable the web service on the settings screen (last option)

robots4life commented 5 years ago

And yes, if you manage to set the cloud service up on one server, you can use that in all other setups.

Going to try this. What PHP modules will I need to have installed on the cloud service server?
On the cloud service I do not need WP, so won't have a settings screen. Do I still install webp-express there?

The way I understand it is install https://github.com/rosell-dk/webp-convert-cloud-service on a remote server, that will be the cloud service.
Then in either a WP project I can install webp-express and then in the settings screen call my private cloud service, right?
And similar for any other CMS, I guess just install webp-convert as opposed to webp-express and again, in the options defined in the $options array inside the PHP file that will trigger the conversion just pick my cloud service and hopefully it will work.

Is that the way to go about it without having to run WP on the cloud service?

rosell-dk commented 5 years ago

You can run webp-convert-cloud-service without WP. I suggested WP + WebP Express because that is easier to set up. You mentioned that you were new to PHP. So you might be new to Composer as well. The install process is through composer. Anyway, learning how to use composer is a well spent efford! Once you know your composer, installing webp-convert-cloud-service should not be too hard. I have however not done much work on making it easy to identify installation problems (such as if there is permission problems)