PNG images are distorted – hazing – bad quality

Hello, there,

Thank you very much for using our plugin!

You are absolutely right in your observations and I am very sad to say that we have spotted the issue ourselves and that we have been unable to find a solution to it so far. So we are indeed trying to find a way to work around it.

We are considering the following alternatives:

1. In our upcoming version we will have an option for the user to choose which image formats they want to allow the plugin to handle, so that they can exclude PNGs.

2. We are trying to find a way to programmatically detect whether a PNG image has alpha transparency and, if it does, then simply leave it be, because we cannot improve its size much anyway. But we are afraid that this method will be too computationally intensive to run on PHP.

So sorry we failed you on this, but we will do our best to overcome it in the near future!

However, if you really need a solution right here and now, I could give you a PHP patch that applies the above solution number 1, so that you do not have to wait for the next version, if you wish…

Cheers,
Takis

Hello Takis,

Thanks for getting back to us quickly. I understand your points and here some suggestions…

Item # 1 – I don′t think excluding PNGs is the answer. Most of the time that images that are causing heavier pages are backgrounds / transparencies. The beauty of AI is that gives the images you need for each size that you tell it to.

So to keep Ais great functionality and to help solve this issue you could process all the images as you are currently and then provide a simple list / tool to manually replace the corrupted PNG files.

We are doing this by hand right now. I mean we are literally going to the server via FTP and replacing all the corrupted PNG files in every size folder.

I am sure that you could speed this process up by allowing the user to bulk upload their own “optimized” PNG versions of the AI′s by Image width.

For example…

Click here to upload all 1280px width Optimized PNG images – Remember that the files must have the exact same filename as the original.

Item #2 — Do you know about TinyPNG? I think that they could solve your problem of process any and all PNGs. We use it a lot and our Alpha transparent images have NO hazing.

https://tinypng.com/developers

Please let me know what you think is possible.

Thanks,

Netivity

Hello, again,

First of all, let me say that it is very relieving to be able to discuss these matters with experienced users, who go into such detail in the plugin. It honestly helps us understand the real cases a lot better.

About #1:

You are right that excluding PNGs is not the answer. It is simply a temporary workaround. I am so sorry to admit to that!

Now, in cases like yours it will be a lot easier and faster to just empty the image cache and then exclude PNGs by tampering with the plugin code. In file adaptive-images-script.php, after line 828, you could add these lines:

// Exclude PNGs to protect transparent PNGs.

$extension = adaptive_images_script_get_file_extension( $settings['source_file'] );

if ( $extension == 'png' ) {

    adaptive_images_script_send_image( $settings['source_file'], $settings['browser_cache'] );
    exit();

}

As I said, this would be a mere temporary workaround, but it would be so much faster than uploading the PNGs anew! You see, the original images have not been harmed after all.

Let me also note that transparent PNGs are indeed a pain! I am not sure whether we can actually profit by trying to shrink them for all cases. PNGs are meant to be not lossy, so trying to reduce them sort of conflicts with their purpose after all. I mean, in real cases even TinyPNG reduces transparent PNGs at a ~50% ratio, which is good of course, but it does not change the order of magnitude. On the other hand JPEGs can be reduced to even 5 or 10% -or even more- of their original size!

However, PNGs remain one of our top priorities!

About #2

So, of course we are aware of the TinyPNG service, but we do have some drawbacks if we try to incorporate it: i) the host server needs to be able to make remote HTTP requests ii) there is a monthly limit of 500 free requests iii) we fear that performance might be decreased if remote HTTP requests are necessary for PNG images to be resized.

We will definitely try to work out a solution, either by using a service like TinyPNG or -and this would be the best way- try to find a core PHP solution to reduce PNGs.

Let me know if my proposal in #1 works for you for the time being!

Cheers,
Takis

Hello, once again,

Sorry for the many updates, but all the above conversation got me thinking and experimenting and I did find some interesting combinations in the way that we produce PNGs and I believe I can provide a better solution quickly.

Also, I found that we erroneously use sharpening on PNGs as well as JPEGs. Our current tests show that much of the haze and jitter produced was enhanced due to the sharpening!

Now, I am going to make some more tests and come up with a next version promptly. The current version is 0.6.51.

Cheers,
Takis

Hello Takis,

Glad that I can help you all weigh out options to solve this problem. One thing I would like to point out that didn′t see mentioned in your reply is that by AI processing PNG′s where accomplishing two great things…

1. We resize the images to the exact width of the browser / viewport which makes designing for different pixels widths a much more clear process. Responsive images are great of course, but css and browsers can mess up the focal point or need extra rules to look good.

2. We save bandwidth with the new image sizes thus the page is faster than its responsive cousin.

That said we would like your product to resize gifs, pngs, and jpgs.

This is great news about the “issues” and “sharpening”. If you need us to beta test just let me know.

We look forward to your update.

Thanks

Netivity

Hello, again,

Well the 2 points you mention are at the core of our plugin’s functionality for all types of images. And we do try to support JPGs, PNGs and GIFs already as well as possible with the PHP libraries we have at hand. Of course, with PNGs, this has been a bit of a problem obviously!

Now, after all the tests we made it seems impossible to achieve good levels of PNG8 compression and also keep an acceptable quality of transparency in PHP. We just can’t seem to find a good balance! So we are going to have to pass on this one for now, but we are definitely going to revisit the issue in the future!

So, now we have reached the following strategy: 1) ditch the PNG8 and keep 32bit PNGs, which would make the PNG compression a bit less effective, but it wouldn’t ruin the resized images 2) in the future put an option for the user to decide whether they need PNG8 or not.

I’d love to hear your opinion on this!

Cheers,
Takis

Hello Takis,

Taking this down to the essentials…

AI helps sites improve download speed for different size browsers.

Therefore I propose that you look at this problem in the following manner. 8bit PNG transparencies is probably the least amount of images processed by AI when someone uses the plugin on their site. If fact, many sites probably don′t even process 1 PNG transparency. The main gain is processing larger jpg images that are used in feature images, headers, banners, etc…

Therefore, weighing worth of effort vs actual benefit to you the plugin provider and to the web site admin, I would suggest that you look towards processing all the images as you have to date, but provide an easy and quick way to update images with the admin′s choice should it be required.

This approach helps keep your valuable time on security, WP updates, patches, etc… that are always the case with all plugins instead of countless hours of PNG transparency testing, etc…

Furthermore, you could even align yourself with TinyPNG, Smush It, Imagery, EWCC, etc… or any other image optimization provider to allow the admin to further enhance images. With TinyPNG you could even bolt on a reseller license or process the images under free accounts (up to 500) and then resell TinyPNG licenses.

The core of the plugin is finding, sorting and creating all the images to the designated browser width sizes and then more importantly, serving those images up when the page is loaded. You have this and it works great.

Let optimizing images, whatever the type, be external, but provide a fast and easy to use admin tool to do it. As you already have code that finds, and creates news images, listing them in the admin panel and providing the ability to replace them one by one or in bulk should not be that hard.

This solution makes your plugin scale beyond any issues that may arise from image transformation / resizing and provide both novice and expert admins the tools to further enhance images if desired.

Please think about this as a possible direction of the plugin.

Food for thought… As of WP 4.4 responsive images are part of WP and an admin can implement other plugins to specify other media sizes and code to call on the right images at the right time. However my test have shown that they don′t do well with background images and that it is not as easy to implement as your solution.

By focusing AI on what it does best and opening it up to other options to enhanced already AI processed images you are making your plugin more competitive with other solutions, both internally to WP and externally.

Let us know what you think when you can.

Thanks,

Netivty

Hello, again,

Well, firstly, our plugin indeed tries to decrease download times based on different device sizes, knowing that smaller devices usually connect from mobile networks, etc.

And, indeed, JPEG images are our foremost concern. They do have the best results in compression, especially if you weigh in the effort this compression takes. There we have the biggest benefits!

However, as I explained earlier, using services like TinyPNG poses some difficulties concerning efficiency and speed and, also, the limit that each of these services have in their free version.

I am not sure I totally understood what exactly by:

Let optimizing images, whatever the type, be external, but provide a fast and easy to use admin tool to do it. As you already have code that finds, and creates news images, listing them in the admin panel and providing the ability to replace them one by one or in bulk should not be that hard.

I believe that there already are lots of plugins that do this, that is optimizing one’s images. Our difference is that we do not optimize images in a general way, but we resize them in a device-aware way. What’s more, our plugin is totally agnostic of any other solution one might want to use in combination. For instance, one could just as well use TinyPNG or EWWW for image optimization and use our plugin at the same time for device-aware image resizing! And this also makes sense for responsive images, whatever the implementation is (picture element, img/srcset, etc).

That last part is the reason why you see our plugin having good results even in comparison to the responsive images which are now part of WordPress core.

Thank you very much for all your thoughts. They have been very helpful.

For now we will not be focusing on PNG8 anymore. We still get great results with 32bit PNG as far as image resizing is concerned and we keep good image quality. We do need to focus on another aspect, though, right now, which we have not discussed in this thread. This is how the plugin can work nicely with a CDN, where the images are not served via the WordPress installation itself! We do get a lot of requests and support threads on this subject. We have an experimental way to support this feature, but we are working on making it more solid.

Cheers,
Takis

Hello Takis,

One clarification as you said it better than I could…

device-aware image resizing

This is what I meant about using an external service like, TinyPNG, etc… that the external service could the device-aware image resizing and optimization while AI controls the process.

We use Imagery and EWWWW on our sites. They optimize all our images but do not do device-aware image resizing.

Combine the two would be great.

—

Using the PNG 32 image resizing sounds good. We look forward to testing it out. Please let us know when it is ready.

—

As to the roadmap for CDN support I totally agree. We use CF and KeyCDN a lot. To have images served from the CDN cache would be great.

Ok Takis thank you for this prosperous conversation. We are glad that we were able to help you focus AI even more and deal with the image hazing issues.

If you need us to test just let us know.

Take care,

Netivity

It was great having this conversation with you, too!

Cheers,
Takis