Hotlinked Images Frequently Get Stretched To Unnatural Dimensions

Jay
(@jwbats)

6 years, 2 months ago

Dear support,

I run an Amazon affiliate website where I load images from Amazon’s API, for multiple product reviews on the same page.

I have pages with dozens of such image loads.

On the AMP pages, some images get stretched to unnatural 1000 pixel widths.

Observations:

1. This only happens when my site is running on its production server, but not when the site is running on my localhost.

2. All images have similar img tag code. Upon AMP page reload, it’s always the same images that get stretched, and the same ones that don’t. It seems to be deterministic, even though you’d expect it to be random (since all images have similar html).

My suspicion is that it has something to do with deferred image loading. Your AMP pages are unable to correctly determine a hotlinked image’s width, and therefore go for the default of 1000px.

Hardcoding an image width on my images in my HTML pages did not resolve this problem. It gave the image the right width, but not the right height. And I do not know the correct height upfront, since the image is hotlinked. So the AMP page computes an aspect-ratio incorrect height, and the image appears too small.

In SEO, it’s custom to keep your websites to yourself, so I am hesitant to share my problematic AMP page here.

Can you (support) give me an email so that I can send an example of image widths going wrong?

Sincerely,

Jay

Viewing 15 replies - 1 through 15 (of 25 total)

1 2 →

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I just tried reproducing this issue in a test page on test website on a throwaway server I have.

Could not reproduce the issue. Gonna have to be able to send my website’s url somewhere…

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I have found out what the problem is:

Smaller hotlinked images get stretched because AMP4WP calculates incorrect dimensions.

For bigger hotlinked images, the dimensions are calculated correctly.

Since smaller images are faster to download, this bug has to be related to some event or timer that’s keeping an eye on a hotlinked image’s dimensions.

In order to find out, I took a page with 13 products on it and downloaded the hotlinked product images.

I labelled them as ‘correct’ or ‘incorrect’, based on whether they were being displayed correctly.

When I had all 13 images in a folder, I sorted by size.

The result shows that this issue is undeniably linked to image size:

AMP For WP Hotlinked Images Aspect Ratio Bug

In my case, the cut-off point is around 15kb.

As my previous post points out, not all servers will be able to reproduce the problem.

Other servers might have another cut-off point for this bug to successfully reproduce.

I’m willing to work with support in order to resolve this issue and make AMP4WP better.

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I was able to create an example of incorrect image display:

AMP4WP – Aspect Ratio Incorrect Image Display

Plugin Author Ahmed Kaludi
(@ahmedkaludi)

6 years, 2 months ago

Hi @jwbats

Can you send me the URL of the page where you have a stretched image?

It won’t take me much time to resolve it for you.
Thread Starter Jay
(@jwbats)

6 years, 2 months ago
I’ve sent the link through the contact form on your site.
- This reply was modified 6 years, 2 months ago by Jay.
- This reply was modified 6 years, 2 months ago by Jay.
Plugin Author Ahmed Kaludi
(@ahmedkaludi)

6 years, 2 months ago

Hi @jwbats

Yea, one of my team mates just got it, he’s debugging it for you.

It’s a very strange one since all image markup looks fine.

Let’s hope we find out this one.

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

My host’s support also can’t figure it out.

Sure, the markup itself is fine. It’s just that your plugin calculates a 1000px (default?) width for <=15kb hotlinked images.

If only it were able to correctly see the images’ dimensions, it would be fine.

It’s got to do something with the image dimension calculation event that fires upon receiving the images…

Thanks for putting your time into this. I’m very curious what could possibly cause this.

If you can’t replicate it on any other server, I’d be willing to set up a copy of my site on the same server, and give you access to it.

Let me know what you need from me. And good luck.

Plugin Author Ahmed Kaludi
(@ahmedkaludi)

6 years, 2 months ago

Hi @jwbats

Yes, that width is automatically applying by amphtml js but we need to still troubleshoot.

I assure you that we will find the root cause of this problem and solve it for you.

Will let you know if we need staging.

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I really appreciate that you’re putting your time into solving this.

I’m having my webhost looking into it as well. They are having a tough time finding the root cause.

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

Any update on this?

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

Ahmed,

You guys still looking into this?

You need a site staged?

Sincerely,

Jay

Plugin Author Ahmed Kaludi
(@ahmedkaludi)

6 years, 2 months ago

Hi @jwbats

Yes, that would be really helpful!

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I have staged an amp4wptest site and sent it to your support team via your contact form.

Let me know how it goes!

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I’m debugging along to help you guys out.

On stretched images, the amp-wp-unknown-size class is set. I gets this class when the image dimensions could not be determined.

This class is found in class-amp-img-sanitizer.php, as well as various style.php files.

The style.php files all have object-fit set to ‘contain’. This option should make it so that the image will display in its natural aspect ratio:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Except it doesn’t.

There are 2 ways to fix this:

1. Make it so that the object-fit property behaves as expected, displaying the image in its own aspect ratio within the parent box, which has a different aspect ratio.

2. Find out what’s causing amp4wp to not be able to find the image dimensions, and make sure it does find them every single time.

Ofcourse, fixing both would make it extra robust.

I’m gonna see if I can find out what’s causing amp4wp to not be able to find the image dimensions correctly.

You guys still debugging this as well?

Thread Starter Jay
(@jwbats)

6 years, 2 months ago

I just found this interesting bit of code in your class-amp-image-dimension-extractor.php:

private static function fetch_images( $urls_to_fetch, &$images, $mode ) {
// Use FasterImage when for compatible PHP versions
if ( ‘synchronous’ === $mode ||
false === function_exists( ‘curl_multi_exec’ ) ||
version_compare( PHP_VERSION, ‘5.4.0’ ) < 0
) {
self::fetch_images_via_fast_image( $urls_to_fetch, $images );
} else {
self::fetch_images_via_faster_image( $urls_to_fetch, $images );
}
}

In this code, the $mode is always set to ‘concurrent’.

My server has the function curl_multi_exec.

My server has php version 7.0.23.

So it looks like, in my case, the images are retrieved by using the faster_images client.

The code for curling the images is in FasterImage.php. Plenty of settings to play around with.

However, something has caught my eye:

use WillWashburn\Stream\Exception\StreamBufferTooSmallException;
use WillWashburn\Stream\Stream;

Will Washburn is the author of the FasterImages code. But folder called WillWashburn exists in amp4wp. Is this causing unintended behavior somehow? Are these exceptions related to FasterImage not being able to find dimensions for small images?

Any feedback would be appreciated.