Fix AMP error 'Image size is smaller than Recommended size'

Yesterday, January 15, 2019, I got an email notification from Google Search Console. In the e-mail, Google sent a report related to the latest error issue on my Blog AMP page.

What's worse, one error caused almost half of my blog articles to be affected by the latest AMP error warning. There are around 72 articles that get the problem.

This error occurred because the image I uploaded was an image that was not in accordance with Google AMP's image guidelines. Yes, the image that I uploaded in the article is too small than the minimum size.

In the AMP report dashboard in the Google Search Console, there are around 72 articles that have errors warning "Image size smaller than recommended size" due to images that are too small, with sizes less than 1200 pixels which are the minimum size recommended by the AMP data structure.

But it seems we don't need to worry too much, because based on what was explained by Search Console that the error does not make our AMP page invalid. 

This means that web pages are still valid AMP and can still be crawled by Google properly. However, repairs still need to be done if necessary. 

According to Google's support page, Error warning: Image size smaller than recommended size can cause your blog page to not appear with all the features of Google AMP.

And the possibility will not appear on the Discover AMP Card or Google AMP Carousel. According to Google it can also cause a decrease in traffic on your website.

Read: How to view AMP Page Performance Report Through Google Analytics

Sumber: https://support.google.com/webmasters/answer/7478053

Fix Error AMP: Image size smaller than recommended size 

To fix this error, inevitably you have to re-upload the image that caused the error, with a larger size and in accordance with Google AMP's data structure guidelines. 

I will describe the image in accordance with Google AMP guidelines.

• Image width at least 1200 pixels
• A URL to an image representing an AMP article or story and each page must contain at least one image
• Images must be in .jpg, .png, or .gif format.
• To get the best results, give a few high-resolution images (minimum 800,000 pixels, the results of the width and height multiplication) with the following high-width ratios: 16x9, 4x3 and 1x1

This method might be applied to overcome the error warning Image size smaller than the recommended size in the Search Console. I got this method from Kompi Ajaib blog. and the results were successfully validated by the Searc Console

Go to Edit HTML and find <b:includable id='post' var='post'>

Find below code

<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='resizeImage(data:post.firstImageUrl,800,&quot;1:1&quot;)' itemprop='url'/>
  <meta content='800' itemprop='width'/>
  <meta content='800' itemprop='height'/>
  </div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Fpviaq8clzWt47nqTaMywlN8pHTs3MG5Mt7FjFqwY99XHtz31ahkx2wR8BIfTAWjOfsjc5s_P2uNr1ar_WV6Jf1HykRL5R4TP4ZebOx25AbOnbDOE4g7x5zF-1BNcGhZNkwGcbvlv0w/s800-c/no-thumbnail.jpg' itemprop='url'/>
  <meta content='800' itemprop='width'/>
  <meta content='800' itemprop='height'/>
  </div>
    </b:if>

And replace with this one:

<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='resizeImage(data:post.firstImageUrl,1280,&quot;16:9&quot;)' itemprop='url'/>
  <meta content='1280' itemprop='width'/>
  <meta content='720' itemprop='height'/>
  </div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RTbuM-RyGEksZWCgLxv-IeN46oQKCH_7PZuicyhPKzg4i1jZt1FyTK3lQkbv_bfiDd8ptY0ILlxswNejeY4S8w1ohQ_rJn4Rera8wjTVpVXexYRDU7rAvINA_RQhhCHZRKfQxm0K2pI/s1280/no-thumbnail.jpg' itemprop='url'/>
  <meta content='1280' itemprop='width'/>
  <meta content='720' itemprop='height'/>
  </div>
    </b:if>

When done, click SAVE. Don't forget to validate improvements in Search Console.

So many articles about Explanation of AMP Error 'Image size smaller than recommended size', hopefully useful