Skip to content

Instantly share code, notes, and snippets.

@hellofromtonya
Last active July 24, 2018 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hellofromtonya/80fb06b9a1140f73a2339b7952d36d24 to your computer and use it in GitHub Desktop.
Save hellofromtonya/80fb06b9a1140f73a2339b7952d36d24 to your computer and use it in GitHub Desktop.
<amp-img> Wide Image HTML Comparison - classic image vs. Gutenberg image block
<figure class="aligncenter amp-wp-b50f343">
<amp-img src="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg" alt="Image Alignment 580x300" width="580" height="300" class="size-full wp-image-967 amp-wp-enforced-sizes amp-wp-c5a25c2 i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" srcset="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg 580w, https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px" layout="intrinsic" style="width: 580px;">
<i-amphtml-sizer class="i-amphtml-sizer">
<img class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,&lt;svg height=&quot;300px&quot; width=&quot;580px&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/&gt;">
</i-amphtml-sizer>
<img decoding="async" alt="Image Alignment 580x300" srcset="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg 580w, https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300-300x155.jpg 300w" src="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg" sizes="(max-width: 580px) 100vw, 580px" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>
</figure>
<figure class="wp-block-image aligncenter">
<amp-img src="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg" alt="Image Alignment 580x300" class="wp-image-967 amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" srcset="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg 580w, https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px" width="580" height="300" layout="intrinsic" style="width: 580px;">
<i-amphtml-sizer class="i-amphtml-sizer">
<img class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,&lt;svg height=&quot;300px&quot; width=&quot;580px&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/&gt;">
</i-amphtml-sizer>
<img decoding="async" alt="Image Alignment 580x300" srcset="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg 580w, https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300-300x155.jpg 300w" src="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg" sizes="(max-width: 580px) 100vw, 580px" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>
</figure>
@hellofromtonya
Copy link
Author

Here is the post content for the Gutenberg image:

<!-- wp:image {"id":967,"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg" alt="Image Alignment 580x300" class="wp-image-967"/></figure>
<!-- /wp:image -->

Here's the post content for the Classic image:

<p style="text-align:center;"><img src="https://amp-wp.test/wp-content/uploads/2013/03/image-alignment-580x300.jpg" alt="Image Alignment 580x300" width="580" height="300" class="aligncenter size-full wp-image-967" style="width: 580px;" /></p>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment