Photon images lack width/height when cropped/resized, interferes with Lazy Images and scrolling

[gravityrail]

When an image has its dimensions changed via Photon, it cautiously strips the width/height from the tag in order to not display a warped image.

This results in images having a size of 0x0 when they are being first loaded, which in turn causes:

(a) hella page jank as they pop in
(b) lazy load to fire the load event for many more images, since in some degenerate cases you can end up with tons of these 1x1 images in the viewport

Steps to reproduce the issue

• Enable photon
• Enable lazy images
• Create a post with a bunch of different-sized images set to resize to, say "Medium: 320x200"
• Example post

(Photon URLs should end up looking something like https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49-300x200.jpg?resize=300%2C200&ssl=1 )

What I expected

• Images lazy loaded (images offscreen should not be loaded until scroll)

What happened instead

• All images loaded

Suggested solution

• Set the width/height attributes of the <img> tag to be the expected width/height of the image.

More info:

Photon images were rendered without width and height, like this.

<img data-attachment-id="150" data-permalink="https://testcdn.mystagingwebsite.com/2016/11/aperiam-consequatur-odio-aut-nihil/attachment/150/" data-orig-file="https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49.jpg?fit=800%2C534&amp;ssl=1" data-orig-size="800,534" data-comments-opened="1" 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;1&quot;}" data-image-title data-image-description data-medium-file="https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49.jpg?fit=300%2C200&amp;ssl=1" data-large-file="https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49.jpg?fit=525%2C350&amp;ssl=1" class="alignnone size-medium wp-image-150" src="https://i2.wp.com/testcdn.mystagingwebsite.com/wp-content/plugins/jetpack-custom/modules/lazy-images/images/1x1.trans.gif?ssl=1" alt data-lazy-src="https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49-300x200.jpg?resize=300%2C200&#038;ssl=1" data-lazy-srcset="https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49.jpg?resize=300%2C200&amp;ssl=1 300w, https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49.jpg?resize=768%2C513&amp;ssl=1 768w, https://i0.wp.com/testcdn.mystagingwebsite.com/wp-content/uploads/2017/11/c31682d9-3bfd-3c81-adac-e484ac368c49.jpg?w=800&amp;ssl=1 800w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-recalc-dims="1">

[jeherve]

Adding in some old issues for reference and easy finding later on, since Lazy Load and Photon have caused us some headaches in the past:
#529
#530
#1638

[gravityrail]

Thanks @jeherve - I left some comments on those threads in case people discover them.