Add logic to reduce image size in bytes

bobbingwide commented 3 years ago

In order to improve the performance rating of my websites, I want to find a way to at least semi automate the conversion of .jpg or .png files to .webp format, with a quality of 62 or 50 percent.

Background

This plugin already includes a couple of routines for converting .jpg files to .png files and vice-versa; j2p.php and p2j.php. When investigating image size reduction for performance improvements recommended for Core Web Vitals I wrote a couple of new routines:

j45.php takes all the plugin banners in C:/apache/htdocs/oik-plugins/banners/ and creates reduced quality versions in C:/apache/htdocs/oik-plugins/banners-quality/, appending the quality percentage in the new file name. Target qualities are: 75, 62, 50 and 25.

w45.php does a similar job converting the original .jpg files to .webp format in the banners-webp folder. Target qualities in banners-webp were the same.

I also tried many more versions for the oik-types banner image. I wrote a blog post entitled Image size reduction by quality

Requirement

Improve website speed performance rating by reducing image size in bytes using .webp files.

Proposed solution

[x] Incremental approach tackling each file one by one
[x] Semi automate the conversion from .jpg/.png to .webp
[ ] Implementable on all sorts of WordPress website
[ ] Use WordPress core functionality when available.
[ ] Polyfill solution required for browsers which don't support .webp

Implementable on all sorts of WordPress website

In WordPress adds webp support we see that WordPress 5.8 provides support for .webp files.

I understand that it supports choosing the compression quality settings.

https://github.com/adamsilverstein/modern-images-wp

Polyfill solution

... from WordPress adds webp support

If your audience includes a significant number of users on an unsupported browser (IE11 for example), either avoid using WebP images, or enqueue a browser polyfill. - https://github.com/chase-moskal/webp-hero

References

bobbingwide commented 3 years ago

I copied and cobbled g45.php to support .jpg and .png files. Then changed the data to upload the replacement .webp file. The problem with this method is that there's no fall back to the original file for browsers that don't support it. But we want to be able to measure the improvement first.

Going through the process one by one was a bit slow. So I decided to determine which files to copy by copying and pasting the output from the Apache access log. I wrote get45.php to do this, then ran g45.php. It ran out of memory.

The conversion to webp shouldn't be necessary if the file's already present with a new date.

bobbingwide commented 3 years ago

Rather than develop my own solution to the probem I'm going to revisit the WebP Express plugin to see what it does. It's 8 months since I first tried it. The plugin's been updated and I have a better idea of what I'm looking for. I'll do the investigation on s.b/cwiccer since it doesn't really matter what happens there.

bobbingwide commented 3 years ago

OK, it appears to work on s.b/cwiccer contrary to the messages displayed in the admin page.

bobbingwide commented 3 years ago

OK, it appears to work on s.b/cwiccer contrary to the messages displayed in the admin page.

I found a problem with the .htaccess file and raised an issue in https://github.com/rosell-dk/webp-express/issues/512 I also implemented the plugin in s.b/hm, but I don't get these warnings in this environment!

bobbingwide commented 3 years ago

In both instances ( s.b/hm and s.b/cwiccer ) the WebP-express plugin is symlinked from s.b/wordpress's installation. The System info button on s.b/cwiccer reports the following tests as could not be determined.

Live tests of .htaccess capabilities / system configuration:
Unless noted otherwise, the tests are run in wp-content/webp-express/htaccess-capability-tester.
WebPExpress currently treats the results as they neccessarily applies to all scopes (upload, themes, etc),
but note that a server might be configured to have mod_rewrite disallowed in some folders and allowed in others.
- .htaccess files enabled?: could not be determined
- mod_rewrite working?: could not be determined
- mod_headers loaded?: could not be determined
- mod_headers working (header set): could not be determined
- passing variables from .htaccess to PHP script through environment variable working?: could not be determined
- Can run php test file in plugins/webp-express/wod/ ?: could not be determined
- Can run php test file in plugins/webp-express/wod2/ ?: could not be determined
- Directives for granting access like its done in wod/.htaccess allowed?: could not be determined

bobbingwide commented 3 years ago

As expected the problem is associated with SSL certificate errors. In s.b/hm the wp_remote_get() requests works since ssl_verify is set to false. In s.b/cwiccer I get "cURL error 60: SSL certificate problem: unable to get local issuer certificate".

Explanation

s.b/hm uses oik-clone.
oik-clone implements a filter function for http_request_args
this sets sslverify to false

Workaround

activate oik-clone on s.b/cwiccer

Longer term solution

See all the other issues associated with SSL certificate errors!

bobbingwide commented 3 years ago

Broken images in Chrome Incognito when WebP express is activated.

bobbingwide / txt2md