Image Compression

Forgot to ask. Does this plugin fully support lazy loading of images? Thanks.

Hello, there,

If you are using AIW you still need JPEG because this is the image compression algorithm that the plugin uses to resize images. It is impossible to simply resize and save them without using a compression algorithm.

Which level of compression works best is up to you, really. Levels of 70-80 are usually pretty much OK.

Now if, you are delivering your images directly from your WordPress installation and not via a CDN then all kinds of images will be delivered by our plugin, even the “lazy” ones.

Let me know if I can help any further!

Cheers,
Takis

Thanks for the speedy reply Takis. This seems like an excellent plugin and i look forward to testing it out!

You are very welcome, hope it works for you!

Hi, I’m disappointed to report this plugin is not working for me ?? It shows i have 0 images in cache so looks like it’s not caching anything. I am using GoDaddy managed hosting which has caching built in, i guess you would call this external caching. I have enabled the CDN support option but still no joy.

Is there anything i can do to get this plugin working for me? Here is my debug and diagnostic info:

Debug info
? PHP GD library is installed.
? Image cache directory has been created.
/home/content/a2pnexwpnas01_data02/13/3487013/html/wp-content/cache/adaptive-images => drwx---r-x
? Installation .htaccess file is setup OK.
/home/content/a2pnexwpnas01_data02/13/3487013/html/.htaccess => -rw----r--
? Adaptive images settings dump:
array(12) {
  ["resolutions"]=>
  array(5) {
    [0]=>
    int(1405)
    [1]=>
    int(1100)
    [2]=>
    int(980)
    [3]=>
    int(768)
    [4]=>
    int(480)
  }
  ["landscape"]=>
  bool(true)
  ["hidpi"]=>
  bool(true)
  ["cdn-support"]=>
  bool(true)
  ["cache-directory"]=>
  string(21) "cache/adaptive-images"
  ["watched-directories"]=>
  array(2) {
    [0]=>
    string(18) "wp-content/uploads"
    [1]=>
    string(17) "wp-content/themes"
  }
  ["jpeg-quality"]=>
  int(80)
  ["sharpen-images"]=>
  bool(true)
  ["watch-cache"]=>
  bool(true)
  ["browser-cache"]=>
  float(180)
  ["version"]=>
  string(6) "0.6.51"
  ["sanitized"]=>
  bool(true)
}

System information
Web Server
Apache
Document Root
/var/chroot/home/content/a2pnexwpnas01_data02/13/3487013/html
PHP
5.4.42
PHP Time Limit
30
PHP Memory Limit
256M
PHP Post Max Size
65M
PHP Upload Max Size
64M
PHP Max Input Vars
1000
PHP Display Errors
Yes
PHP Error Log
MySQL
5.5.43-37.2-log
MySQL Ext/mysqli
No
MySQL Table Prefix
wp_6jb8d24rsj_
MySQL DB Charset
utf8
WP
4.5.3
WP Multisite
No
WP Debug Mode
No
WP Site url
https://www.celebrityhealthcritic.com
WP WP Home url
https://www.celebrityhealthcritic.com
WP Permalinks
/%postname%/
WP home path
/home/content/a2pnexwpnas01_data02/13/3487013/html/
WP content dir
/home/content/a2pnexwpnas01_data02/13/3487013/html/wp-content
WP plugin dir
/home/content/a2pnexwpnas01_data02/13/3487013/html/wp-content/plugins
WP content url
https://www.celebrityhealthcritic.com/wp-content
WP plugin url
https://www.celebrityhealthcritic.com/wp-content/plugins
WP Locale
en_GB
WP Memory Limit
40M
WP Max Upload Size
64mb
WP Active plugins
Shield v.5.4.2 by iControlWP
Adaptive Images for WordPress v.0.6.51 by Nevma
WP MU plugins
System Plugin v.2.0.0 by

Does it works correctly with TinyJPG plugin(official)?

@martychc23, thank you for sending you debug information!

First of all, it seems that the plugin is working properly. Check out these urls:

• An original image: https://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-950×640.jpg?debug=original
• The debugging output of requesting that image: https://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-950×640.jpg?debug=true
• The image requested by a device with a width of 320px and a pixel density of 1: https://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-950×640.jpg?resolution=320,1

Did you notice the parameters at the end of the url and how the output is affected?

Now, I must admit that normal images are -more or less- handled by the plugin in CDN support mode, however, CSS background images are missed. You should view a page heavy with images and from a small device (or responsive browser mode) to actually notice the difference.

And then it all depends on the combination of your plugin settings (your resolution breakpoints, etc).

Cheers,
Takis

@makarkinpro, the plugin is agnostic of whether you used a tool like TinyPNG or anything else of this sort to edit your images. It takes the images in the formats supported and it actually resizes (and compresses them).

Resizing each image for each device size is what makes the big difference (along with compressing).

Hi Takis,

After your post i noticed 2 images in the cache, in folder 480, so it does look like this is working. But i’m confused as why there are only 2 images in cache?

I have a chrome extension called “window resizer beta” which resizes my window to different screen sizes. But when i browse my website in iphone6 mode and view all pages, no images are cached. I also browsed all my pages using chrome developer tools and browsing all pages as iphone 6, but no images are cached either.

It wasn’t until i did what you did, as shown below, did that the image become cached, and i now have 3 cached images. So viewing my website in a responsive size (e.g., iphone6) doesn’t cache any images, but it does cache when i do the debug mode:

https://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/5.jpg?debug=original

https://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/5.jpg?debug=true

https://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/5.jpg?resolution=320,1

I’m wondering why images don’t cache when i browse in responsive browser mode?

Hi Takis, just wanted to post a quick update.

I have used the device mode in google chrome, webpagespeedtest, gt metrix to try get images added to my cache. The only one that did this was gt metrix, although it seemed to do so inconsistently as not all the pages i tested resulted in images being added to cache.

So i thought the best way to test this out would be on another device. I used a laptop with a small screen that was within my breakpoints and this again did not add any images to cache.

So my experience so far is that images are not being cached for different device sizes, or if cache is happening, it inconsistent and not very predictable.

Perhaps this is due to some issue with godaddy cache? I’m quite disappointed about this as this plugin seemed like the ideal solution for me, but unfortunately it doesn’t seem to work for me in real world usage.

If it would be somehow possible to get this plugin working for me predictably on different screen sizes, i would be happy to pay for support if you offer such a service?

Hi, @martychc23,

It is indeed kind of tricky, once you try to get to the internals and details of how our plugin actually works. I will try give a more in-depth analysis.

First of, as I mentioned before our CDN support is sadly still a bit experimental and does not work 100% of the time. However it works most of the time and it does not break anything when it doesn’t work.

One thing that might go wrong there is that the original image size might be downloaded before the browser requests the smaller image size. If you have, for example, 10 images in your page, there is a good chance that perhaps 1 or 2 of them will have that issue. Unfortunately, this is just the way our technique works with a CDN works so far. But we are working on a new technique in the next version.

The second thing is CSS background images. Our technique cannot yet cover them at all, in CDN support mode. This is the reason we have called this “still experimental”!

Now, apart from any possible issues that might rise from working with a CDN, as explained above, there is only one other case where an image will not be resized. And this when it does not need to be resized at all! For instance, if you have an image of 800px, but it has not yet been requested by a device with a width smaller than the closest upper resolution breakpoint to the image width, then the image will not be resized and the original image will be delivered to the browser. This means -in layman’s terms- that images who are already small enough for the requesting devices do not need to be resized anyway.

And, of course this is a totally legitimate case. Whether a request for an image falls into such a case or not, depends on the joint combination of factors like:

• The resolution breakpoints of the plugin settings
• The pixel density of the device and the corresponding plugin setting
• Whether the setting for taking into account the device bigger dimension is active or not
• The actual width of the device requesting the image
• The actual width of the requested image

So it is quite a wide range of factors and settings that lead to images being -or not being- resized. It requires some getting used to in order for one to completely understand all of them together. This is where the debugging URLs we have created come in handy.

Also, I have found that all modern browsers, like Firefox and Chrome, were totally OK for testing our plugin in device mode. This is how I do it in Chrome https://www.youtube.com/watch?v=hCAC1XUUOvw and it is the exact same process in Firefox.

Now, about your last question about paid support I can tell you that a) we cannot yet support the CDN feature in any way 100% b) we will always support this version of our plugin here for free of course and c) should you wish to contact us for anything else with an email, then you should feel free to do so.

Cheers,
Takis

Hi Takis,

I’m suspecting this may be CDN issue. But just to be sure could i check something with you?

On my test page (https://www.celebrityhealthcritic.com/test-post-6/), underneath the title “Test Post 6” the actual image size is 950×640. I would expect this image to be resized when viewing in iPhone6 mode using Chrome developer tools. Am i correct to think that? The breakpoints i have set in the plugin are 1405, 1100, 980, 768, 480.

I don’t see any images added to the cache though, which makes me suspect that something isn’t working quite right. I do get the images added to the cache when i add the debug strings on the image url as mentioned previously, which suggests the plugin is functioning properly.

So it seems that although the plugin is working in debug mode, it’s not working when browsing my pages.

Hello, again,

When browsing your pages via the CDN the plugin is still working alright! However, there is the case, which I explained in my previous answers, where 1-2 images might unfortunately be missed.

There is one -not so obvious setting that affects the plugin behaviour. This is the “bigger dimension” setting. When this is active, the plugin takes into account the landscape orientation as the device width, so a device of 320×640 will seem to be 640 pixels wide and not 320!

Lastly, you should take into account the CDN cache as well. When you clear the plugin cache and expect it to be populated anew, there is a good chance that the CDN has cached the resized version of the images from previous requests and, as a result, does not request them anew from your WordPress installation.

I am afraid this is as far as I can go to “guess” what might be wrong under the hood of the CDN!

Cheers,
Takis

There is one -not so obvious setting that affects the plugin behaviour. This is the “bigger dimension” setting. When this is active, the plugin takes into account the landscape orientation as the device width, so a device of 320×640 will seem to be 640 pixels wide and not 320!

Looks like my issue is something to do with the settings. I disabled bigger dimension, HiDPI support, and CDN support. I now have 31 cached images whereas before i could only get 2!

Could i just clarify. If i set a breakpoint of 480, does that mean the minimum device width? So any device size below that will not be included? e.g., 375 iphone6? Or does it mean anything under that breakpoint is included? And is this viewport size or resolution? Sorry, bit confused by that.

Yes, I understand. It is actually not so complicated once you grasp the general idea. But we have tried to incorporate all the parameters that affect the desired image resizing.

You said you disabled the CDN support and more images were got cached? Do you really have a CDN active in front of your website at this moment then? Perhaps it has been disabled?

If you have a breakpoint of 480, then the plugin will try to group all devices from 0 to 480 pixels width to this breakpoint and serve them resized images of 480 pixels. If the next breakpoint is 640, then all devices between 481 and 640 will be grouped there and so on. (The “bigger dimension” setting here defines whether the with of a device will be calculated in its portrait or landscape orientation.)

The default breakpoints are generally quite sufficient, but you are free to set your own if you know which devices you are targeting.

Is this any clearer now?

Cheers,
Takis