Photon: images with width="100%" converted to width="100"

[htdat]

Steps to reproduce the issue

1. Enable Photon for Jetpack
2. Create a post and add an image like this

<img src="https://my-domain.com/wp-content/uploads/2018/06/image.png" width="100%" />

3. Publish the post.

What I expected

My image looks good.

What happened instead

The output HTML looks like this:

<img src="https://i1.wp.com/my-domain.com/wp-content/uploads/2018/06/image.png?zoom=2&amp;w=100%25&amp;ssl=1" width="100" height="561" src-orig="https://i1.wp.com/my-domain.com/wp-content/uploads/2018/06/image.png?w=100%25&amp;ssl=1" scale="2">

---

From 1193726-zen

[StefMattana]

Another potential similar issue in here: https://wordpress.org/support/topic/cannot-get-big-image-size/

[StefMattana]

@htdat can you have a look at this for me?
The user of the forum thread above has replied sending the following original code:
<img class="wp-image-1010 alignnone" src="https://stenclimbing.com/wp-content/uploads/2018/06/ola-klatter-fontan-2018.jpg" alt="" />

When checking the page source, here's the output for the original file:
<img data-attachment-id="1010" data-permalink="https://stenclimbing.com/?attachment_id=1010" data-orig-file="https://i0.wp.com/stenclimbing.com/wp-content/uploads/2018/06/ola-klatter-fontan-2018.jpg?fit=1800%2C1350&amp;ssl=1" data-orig-size="1800,1350">

I'm sure I'm missing something. Can you help me out with that? Thanks a lot!

[olind]

(I'm the user from the forum thread)

Are there any workaround for this other than disabling photon?
Any ETA for when it can be fixed?

[olind]

I just disabled photon for now. I ran into another issue with images not loading that also were solved by disabling photon.

Disabling it on this site was ok since I don't have much media there.
Unfortunately I've just run into it on another site where I have much much more media so I would like not to disable photon. Any news or ideas?

[jeherve]

@olind We have not made progress on this yet.

Is there any reason you need to use percentages instead of pixel values? Percentages are not valid HTML5 anymore, so this may not be something we'll support soon.

[olind]

@jeherve Thanks.

I don't think I have set any pixel or percentage widths on my side (Gutenberg). The HTML on my side in Gutenberg looks like this:

<figure class="wp-block-image"><img src="https://XXXXXXXXXX/wp-content/uploads/2018/09/1_P8300002.jpg" alt="" class="wp-image-10026"/></figure>

That gets transformed to:

<img data-attachment-id="10026" data-permalink="https:/XXXX/XXX/1_p8300002/" data-orig-file="https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?fit=900%2C675&amp;ssl=1" data-orig-size="900,675" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="1_P8300002" data-image-description="" data-medium-file="https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?fit=500%2C375&amp;ssl=1" data-large-file="https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?fit=740%2C555&amp;ssl=1" src="https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?w=740&amp;ssl=1" alt="" class="wp-image-10026 jetpack-lazy-image jetpack-lazy-image--handled" data-recalc-dims="1" data-lazy-loaded="1" srcset="https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?w=900&amp;ssl=1 900w, https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?resize=500%2C375&amp;ssl=1 500w, https://i1.wp.com/XXXX.XXX/wp-content/uploads/2018/09/1_P8300002.jpg?resize=768%2C576&amp;ssl=1 768w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px">

I'm not sure it's a photon issue though... Or related to the issue above... Sorry...

I can send you the URL to the page in PM but it's not official yet so I'll rather not post here.

[jeherve]

Yes, that's a known issue with Gutenberg at the moment. The width and height attributes will be added back (and use pixels) in this PR:
WordPress/gutenberg#9421

[andfinally]

We're seeing the same issue with an imported site, where a post with image tag like

<img class="aligncenter" width="100%" src="https://xxxxx.jpg">

is translated to

<img class="aligncenter" src="https://i0.wp.com/xxxxx.com/wp-content/uploads/2017/12/xxxxx.jpg?zoom=2&amp;w=100%25&amp;ssl=1" width="100" height="150">

p1539159844000100-slack-calypso-importers

[kraftbj]

For imported posts, my gut tells me it is this line not accounting for % in the width. https://github.com/Automattic/jetpack/blob/6.6.1/class.photon.php#L295

We'd need to likely not specific width/height args when a % is present, then likewise make sure we don't modify the width/height attributes in the img tag.

For a change like this, I would require unit testing given the testing coverage already in Photon and how any future changes could easily introduce a regression unintentionally.

[hyperfive]

Having the same issue. Created a custom post type and in the import template utilized width=100% for the hero image. When enabling Jetpack Site Accelerator those are the only images that have issues as the image displayed is 100px width. Is there a workaround for this issue?

[jeherve]

Is there a workaround for this issue?

As a workaround, I would recommend against using percentages for the width parameter. It is not valid HTML5, so it is best to steer away from it if you can.

[rumoradvertising]

Here's my workaround.

PHP:

 //Filter to remove width and height attributes
 //and re-assign them as new attributes
 //to be fixed in javascript after the page loads
 //so Jetpack doesn't break all the images all over the site

function my_content_image_filter($content){

	$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
	$document = new DOMDocument();
	libxml_use_internal_errors(true);
	$document->loadHTML(utf8_decode($content));

	$imgs = $document->getElementsByTagName('img');
	foreach ($imgs as $img) {
		//get the width and height attributes
		$width = $img->getAttribute('width');
		$height = $img->getAttribute('height');

		//if there is a percentage symbol in the width or height attributes Jetpack Photon will break these images
		if(strpos($width, '%') !== -1 || strpos($height, '%') !== -1) {
			//Remove the width and height attributes so Jetpack Photon doesn't resize them
			//There is a bug in Jetpack Photon involving percentage image size attributes
			//Source: https://github.com/Automattic/jetpack/issues/9833
			$img->removeAttribute( 'width' );
			$img->removeAttribute( 'height' );

			//save the width and height to new attributes that don't cause Jetpack Photon bug
			//Once the page loads fix the size with Javascript
			//don't use the word 'width' or 'height' in the attribute name
			$img->setAttribute( 'data-image-w' , $width );
			$img->setAttribute( 'data-image-h' , $height );
			$img->setAttribute( 'class', $img->getAttribute('class') . ' jetpack-broken-image');
		}
	}

	$html = $document->saveHTML();
	return $html;
}
add_filter('the_content', 'my_content_image_filter');

Javascript:

jQuery(window).load(function() {
    fix_jetpack_image_bug();
});

function fix_jetpack_image_bug() {

    //If there are images broken by Jetpack Photon fix them
    if(jQuery(".jetpack-broken-image").length) {
        jQuery(".jetpack-broken-image").each(function () {

            //find the width (data-image-w)
            var width  = jQuery(this).attr("data-image-w");
            var height = jQuery(this).attr("data-image-h");

            //Only apply these styles if the attribute values were percent values
            if(width.indexOf("%") != -1 || height.indexOf("%") != -1) {
                jQuery(this).css( { "width" : width, "max-width" : width, "height" : "auto", "max-height" : height } );
            }
        });
    }
}

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[tmmbecker]

2698815-zen

[mdrovdahl]

Noting we ran into this today on a Team 51 project. We implemented the workaround suggested in #9833 (comment)

[anomiex]

After looking into this, we've determined that this has probably been broken since 2016.

Given that it has been broken so long with little outcry, and that people entering <img width="100%"> are probably expecting HTML4 semantics rather than the former "percentage of the image's native size" semantics (cf. the JS in an earlier comment that implements the HTML4 semantics), that the block editor doesn't even support entering percentages for image width/height, and that specifying pixel dimensions (both width and height) instead of native-size-percentages will likely result in better-performing output HTML, we think the best course of action at this point is to treat percentages as any other unrecognized value, i.e. displaying the image as if the width or height were not specified in the <img> tag in first place.

If anyone really wants us to consider alternatives such as restoring the former "percentage of the image's native size" behavior, we'd be happy to hear about your use case and why it couldn't be worked around by specifying pixel dimensions.

[kraftbj]

Added the wontfix label, but removed it. :) We won't restore the functionality (since I concur that I don't think it ever really did what was expected), but still need to gracefully handle when the value is present.