plan2net/webp

How does it work?

Closed this issue · 18 comments

Can someone explain me how the changed imageformat is going online.
I have the images webp images in the folders, deleted every cache, but in the sourcecode there are still PN G's and Jpegs's.
Also the headerinformation ist still the contenttype img/png.
What to do to have the converted images online?
THX

wazum commented

@TransData that's documented for Apache and nginx webserver in the README, please limit the problem description (what did you do) in order to be able to give meaningful help.

Thank you for your fast response!
i did everything like documented in the readme, have only the supported code in the htaccess.
I do have for every image file an converted file.format.webp file.
But what is to do that the files are changing automatic to the webp format.
Cache is deleted but the sourcecode ist still png or jpeg.
Is there something else in the setup.
In the htaccess stand nothing with webp only the code from the documentation.

I encounter the same problem.
Webp images are created, but still the jpeg images are loaded.
I use Typo3 10.4.6

See the .htaccess below:

RewriteEngine On
RewriteBase /imk10

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.$3.webp -f
RewriteRule ^((fileadmin)/.+).(png|jpg|jpeg)$ $1.$3.webp [L]

RewriteCond %{HTTPS} !=on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{THE_REQUEST} /public/([^\s?]*) [NC]
RewriteRule ^ %1 [L,NE,R=302]

RewriteRule ^((?!public/).*)$ public/$1 [L,NC]

Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

wazum commented

@wimr0001 @TransData

Cache is deleted but the sourcecode ist still png or jpeg.

That's the clue, the webserver is serving another image (with another mime type), but the sourcecode keeps the same (browsers that don't support webp serve the original).
So to test if it really works, you have to check the HTTP response headers and the mime type.

Screenshot 2020-08-03 09 31 48

wazum commented

@wimr0001 the only thing I can spot in your rules is a missing escape backslash in front of the dot before the file extension in the regular expression.

Make sure you have mod_headers and mod_rewrite installed and active.

You may try another rewrite condition instead of

RewriteCond %{DOCUMENT_ROOT}/$1.$3.webp -f
RewriteCond %{REQUEST_FILENAME}.webp -f

(but that should be the same with the following rule)
I'm not using Apache that much lately (we favour nginx), so I currently have no active installation, but I tested it when I wrote the documentation ;-)

And check your browser's HTTP request headers if it contains

Accept: text/html,…,image/webp,…

hth

wazum commented

Here's another thread about webp and Apache rewrite rules:
https://gist.github.com/seeekr/2415528
I hope you find a working configuration for your setup (let me know).

Did anybody get this working, i tried all the htaccess configurations but the header is still:
content-type: image/png
It is frustrating, question to the developer - why is there no specific manual - i do find out about the header type, but one screenshot, and a lot of questions are gone!
I respekt work - a very lot - but missing informations are not helpfull for using this work.
I am hosting on an normally webserver - Apache - like the most of us, but so many ours of testing and nothing works.
In WordPress its just a minute to bring this to work, why not TYPO3?
Not wondering that so many people leaving the platform, the community needs working tools, arent?
Just my 5 cents.
Thank you for your plugin

wazum commented

@TransData

In WordPress its just a minute to bring this to work, why not TYPO3?

Any link/documentation for this? I see no way to do the same without webserver configuration and that's difficult (at least from the extension developer perspective), as I can't do that for you (so no, sorry, I documented everything I could that works (I use this on every project on different hosts without a problem)).

I cannot get the redirect in .htaccess working. The extension does its job; it creates the .webp images. However, the .webp images are never loaded.
I used your documentation for the htaccess, and also, a variety of examples I found on the internet.
Without any result.
I realize that it is difficult for you to give a solution. Perhaps there are differences in the architecture.
I installed Typo3 4.10.6 with composer.
Apache2 version 2.4.38 on Debian.
PHP 7.4

I don't want to piss off the developers here, but the description communicates that a webp format of the images is loaded instead of jpg or png.
After a long time of fumbling around, and doing further research i get that only the content type is changed, the file extension name stays as it is.
Well, an info in the description would not only have saved me many hours of fumbling.
Likewise the htaccess configuration, since it is pretended that this configuration works, now it turns out, no it doesn't, that's another long try, here too, clear instructions would have helped many who would like to use this extension to save time and to continue researching the net.
You write that you use your extension in all your projects, great, but then you should also have an Apache solution, because this is the most common server type worldwide.
I have never met nginx in my career, but I'm not a server admin either.
So if we worked on a solution together with the time that every single one has so far found out into what is actually happening, then everyone would be helped.
Maybe there is a server crack here that can explain what happens when and where, I can only guess.
I have a lot of options through now, I'm on an 0815 server type and it just won't be converted.
Which line is responsible for the exchange?
What test options would you have to slowly narrow down the error, because the conversion to webp files works very well.
I cannot believe that we do not get this working, but we do need help from the developer
Thank you again for the plugin, and i find it importend, that we get TYPO3 on the way, against Wordpress, the Community gets smaller every year.
And the Plugin Developer doing the Job to stay in the ring, i know that.
I will bring my Ideas into it how i can do it.
I can paste all the Configurations i tried, if this will help to find a solution.

wazum commented

@TransData

… but the description communicates that a webp format of the images is loaded instead of jpg or png.

That's totally true. The webserver decides (based on request HTTP headers) which format to serve. There are browsers that don't support webp, so you can't send them a .webp file obviously … If you want to clarify something in the documentation, feel free to make a pull request. I'm open to that.

As said before I wrote the Apache configuration and tested it, even if I don't actively use it right now. So the solution in the README works if the setup on the server supports webp.

I have no idea how well you know Apache and its rewrite module, I have no insight into your Apache configuration and no insight into the rest of your server setup, so I unfortunately can't provide support there (you already get this extension for free).
And you still didn't provide information on how Wordpress does it without any webserver configuration. I'm eager to read about this plug&play solution.

Here are some further suggestions for you to find a solution:
a) double check that you have not made any typos (regular expression).
b) test if the rewrite module works, insert the following into your .htaccess, this should rewrite all requests to https://example.com/

RewriteEngine on
RewriteRule ^ https://example.com/? [L,R]

c) attach what you tried so far, I'll once more take a look at it, then I'll close this conversation
d) if you have total control over your frontend setup and templates, use the picture tag like

<picture>
  <source srcset="/path/to/image.png.webp" type="image/webp">
  <img src="/path/to/image.png" alt="">
</picture>

so you don't need any server configuration at all (supported in all modern browsers, for others there may be polyfills). Mind that this does not work for background-images (and if you go that route I would be glad to get an updated README as pull request from you as alternative to the webserver rewrites).

Have a nice weekend!

wazum commented

@wimr0001 have you already tried to remove all other rewrite rules you have there (to make sure they don't interfere with the webp related rules)?

wazum commented

@TransData & @wimr0001 You can also ask on the #typo3-cms Slack channel if anyone in the community can help you. There is a much wider audience there (a higher chance of people using Apache for webp), if my suggestions don't lead to a solution …

wazum commented

No further feedback (I almost expected it), so closing this issue

I am sorry, but i do not find the time to test further out which code will work, it will be helpfull for ALL here. if you will be so gentle to give some time to answer.
Don't know why it should be now in a hurry, i am waiting in one of my first answers, for a response about two weeks. ;-)
I may have expressed myself incorrectly, there is no plugin in WordPress that has this function via plug and play, sorry for giving this impression.
I'm not a WordPress developer at all. But a lot of features are simple in WordPress and are complex in TYPO3, we all know about RealURL, arent we, ;-)
I haven't found anyone on the Slack Channel who deals with the math, but it's my turn and I will report in detail if I continue testing.
Thank you for understanding.
I do not understand complete, what you ment withe the picture Tag, to work with webp files.
Do i use your extension with?
Where to change code that webp files are shown.
Can you please explain more details.
Thank you very much.

@TransData the extension will not change your sourcecode. the trick is that if your browser can accept webp the webserver will deliver a webp file instead of the requested jpg. you can see this if you check the response-headers.

Thank you for the information, but i think you did not read the whole post.
We know that, the developer explaint this with an screenshot exactly.
Did you get it on an Apache Server?
If so, how is the configuration of your htaccess.
THX

#37 (comment)

@wimr0001 have you already tried to remove all other rewrite rules you have there (to make sure they don't interfere with the webp related rules)?

I have to leave one rewrite rule. Beneath my latest try, without success (I verified that the apache modules are enabled).

RewriteEngine On RewriteBase /imk10

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(.+).(png|jpg|jpeg)$ $1.webp [T=image/webp,E=REQUEST_image]

RewriteRule ^((?!public/).*)$ public/$1 [L,NC]


Header append Vary Accept env=REQUEST_image


AddType image/webp .webp