search

jafaircl / gatsby-plugin-amp

Gatsby plugin for creating AMP pages
34 stars 32 forks source link

Remove Gatsby image blur-up background for AMP compatibility #30

Closed mukul-rathi closed 5 years ago

mukul-rathi commented 5 years ago

The Issue

The Gatsby Remark Images plugin takes an image in markdown, and then generates a 20px by 20px blur-up background image that is displayed as a placeholder whilst the image is fetched.

This is done in the CSS of <span> element that serves as the background. For example: 

<span class="gatsby-resp-image-background-image" style="padding-bottom: 75%;
 position: relative; bottom: 0px; left: 0px; 
background-image: url(&quot;data:image/png;base64,iVBORw0KG......lFTkSuQmCC&quot;); 
background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>

The Fix

All blur-up background <span> tags have same CSS classname - gatsby-resp-image-background-image, so this is just a matter of removing the background-image CSS property for each tag.

So now we'd have 

<span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; 
position: relative; bottom: 0px; left: 0px; background-size: cover; background-image: ""; 
display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>