search

wildlyinaccurate / jekyll-responsive-image

An unopinionated Jekyll plugin for generating and using responsive images
MIT License
332 stars 48 forks source link

issue with <amp-img> template inject unwanted <img> code #79

Closed kalwalt closed 5 years ago

kalwalt commented 5 years ago

Hi to all, I am using the jekyll-responsive-image plugin for my website with AMP feature. My template responsive-image.html is like this:

{% capture srcset %}
{% for i in resized %}
    /{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}

<amp-img width="{{ original.width }}px" height="{{ original.height }}px" 
   src="/{{ original.path }}" alt="{{ alt }}" title="{{ title }}" 
   srcset="{{ srcset | strip_newlines }}" layout="responsive" 
   sizes="(min-width: 1200px) 720px, 90vw"></amp-img>

if i add in one of my page this code:

{% responsive_image path: assets/icons/icon-72x72.png %}

is builded by jekyll in this way:

  <amp-img width="72px" height="72px"
     src="/assets/icons/icon-72x72.png" alt="" title="" 
     srcset="" layout="responsive" sizes="(min-width: 1200px) 720px, 90vw"></amp-img>

but in the browser instead became:

<amp-img width="72px" height="72px" 
src="/assets/icons/icon-72x72.png" alt="" title="" 
srcset="" layout="responsive" sizes="(min-width: 1200px) 720px, 90vw" 
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" style="width: 720px;"><i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
<img decoding="async" alt="" title="" srcset="" 
src="/assets/icons/icon-72x72.png" sizes="(min-width: 1200px) 720px, 90vw"
 class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>

Why i found the <img decoding=aync"......> code inside? The problem is that the tag is not allowed with AMP so i would avoid this. Have you ever encountered this kind of issue? my website is here www.kalwaltart.it and my repo github: kalwalt.github.io Thank you for your attention. Walter

wildlyinaccurate commented 5 years ago

Hi, it's actually AMP that is adding decoding="async". It's nothing to do with this plugin :)

wildlyinaccurate commented 5 years ago

More information about the decoding attribute on the <img> tag: https://github.com/whatwg/html/issues/1920

Documentation for the <amp-img> component (if you inspect the example images you can see the decoding="async" attribute on all of them: https://ampbyexample.com/components/amp-img/

kalwalt commented 5 years ago

Many thanks @wildlyinaccurate! i can see in ampbyexample page the <img decoding="async"....> is added between all the <amp-img>....</amp-img> tags. I received an error in my website in my search.google.com/search-console/amp

The tag 'img' should be replaced with an equivalent 'amp-img' tag.

in more than one my pages but if i run https://www.kalwaltart.it/#development=1 my page is validated without any error. Maybe was a glitch with AMP or maybe the reason was in another part of my code and after was solved. I'm happy with this, so this means my code was ok. Do you think it can be optimized in some way? Could be added to the list of your examples template?