Last active
July 24, 2018 14:10
-
-
Save hellofromtonya/80fb06b9a1140f73a2339b7952d36d24 to your computer and use it in GitHub Desktop.
<amp-img> Wide Image HTML Comparison - classic image vs. Gutenberg image block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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,<svg height="300px" width="580px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>"> | |
</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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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,<svg height="300px" width="580px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>"> | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here is the post content for the Gutenberg image:
Here's the post content for the Classic image: