How To Fix Google Search Console AMP Image Size Smaller Than Recommended In WordPress

Article updated: 03 Feb 2019

Recently, AMP issues report appeared in our Google Search Console (successor of Google Webmaster Tools) with the message Image size smaller than recommended size. What this warning means and is there a way to fix it?

Google Search Console – AMP Pages Image Size Report

AMP Project Logo

AMP Project Logo

First of all, this is just a WARNING. It is NOT an AMP ERROR (at least, not yet). Your AMP pages are still indexed and (probably) displayed in Google’s search results. However, they are marked as less-than-perfect pages, because they contain images which are less than 1200 pixels wide (likewise, height of portrait images should be at least 1200 pixels and minimum product of WIDTH * HEIGHT should be at least 800 000 pixels).

Google Search Console - AMP Page Issue - Image Size Smaller Than Recommended Size

Google Search Console – AMP Page Issue – Image Size Smaller Than Recommended Size

This is, actually, nothing new – in fact, this recommendation (read: requirement) is almost a full year old. In 2018. Google raised minimum width for featured AMP images to 1200 pixels, with a grace period left for webmasters and owners to fix their amp-powered articles.

Important AMP Image rules

Below are listed most important properties of AMP article “featured” image (more in Google link posted above):

  • Only a marked-up image that directly belongs to the article should be specified.
  • Images should be at least 1200 pixels wide.
  • Every page must contain at least one image (whether or not you include markup). Google will pick the best image to display in Search results based on the aspect ratio and resolution.
  • Images must represent the marked up content.
  • Images must be in .jpg, .png, or .gif format.

However, starting this week, many users reported increased AMP-pages related issues appearing in their Search Console. It seems that Google officially stopped ignoring the image size property and now issues a warning if the requirement is not met.

Recommended Reading


Google Chrome Lighthouse Logo

Google Chrome Lighthouse – A Brief Introduction

This change is reasonable, given the fact that many sub 300$ mobile devices now come with a standard Full HD 1920×1080 pixels display, and premium flagship models come in QHD / QHD+ and even 4k display resolutions! 8k display resolution phones anyone!? Welcome to Beyond 2020 TV show…

Where is the problem? AMP article JSON format

JSON format describes your page to machines, computers, phones and other smart devices. Without looking into your actual article, they can understand what the content format essentially is like through various “meta tags” (attribute-value pairs). Given the fact that we live in early machine learning / artificial intelligence stage, it is no brainer why Google requires those meta tags, and why they affect your SEO ranking. In essence, Google is using them to train their neural networks, classify and better understand web content.

Near the end you can see that there is an image attribute, with representative photo that describes content that that particular article is all about.

{
"@context":"http://schema.org",
"@type":"BlogPosting",
"mainEntityOfPage":"https://...",
"publisher":
	{
	"@type":"Organization",
	"name":"TehnoBlog.org",
	"logo":
		{
		"@type":"ImageObject",
		"url":"https://...",
		"height":60,
		"width":600
		}
	},
"headline":"Page Title",
"datePublished":"",
"dateModified":"",
"author":
	{
	"@type":"Person",
	"name":"TehnoBlog"
	},
"image":
	{
	"@type":"ImageObject",
	"url":"https://post-image.jpg",
	"height":1200,
	"width":1200
	}
}

PROPER WAY: MANUAL FIX

All you need to do is simply edit each and every article affected and set larger featured images. This means that you have to dig through all your old stories and blog posts, and replace or upscale existing photos!

Given the most likely fact that those articles are now obsolete and probably do not drive much traffic, this kind of excursion is something you don’t really need at the beginning of the year ;)

Instead, try to prioritize important content: perform a breakdown analysis what pages are worth your time and trouble and update them by priority, and leave the rest as they are.

EASY WAY: FIX WITH ANOTHER PLUGIN

Unfortunately, this is a bit of a problem right now, because there is no quick & easy fix, that is also the proper one (e.g. the one that fully satisfies AMP standard and requirements).

For WordPress there are no existing plugins that can easily fix this issue as of this moment by resizing existing images, but they might appear eventually, depending on the interest and needs.

One idea is to either upscale or letterbox existing images to meet new requirement, but that means you need to check every post you’ve ever made and since re-compression is involved, loss of quality will be inevitable in case of JPEG and GIF, and to a lesser extent in case of PNG image file formats. Also, images will become larger, occupy more space and bandwidth (downgrading performance, ironically) and not gain any more details (generally speaking, because there are ways to upscale certain types of images with lower amount of artifacts and loss of spatial information, but that goes beyond the scope and math available in standard programming languages and image libraries) than they already have, so this practice is going to be a bit absurd in our opinion.

 


Note: following code samples are intended for use along official WordPress AMP plugin. Code is not compatible nor tested with other AMP plugins for WordPress.

 

Another idea is to use filter function present in the AMP plugin and dynamically check if the selected image meets the new requirement or not. In case it does, things will be exactly as they were before. But, in case they are smaller, you can replace them with some generic large logo. This is, technically speaking, against AMP guidelines that image must closely represent the marked-up content.

Download AMP image smaller than recommended size fix Plugin

  1. Download plugin .zip archive
  2. Extract it and follow instructions provided in readme.txt file.

Initially, our code was integrated in the (active) WordPress theme’s functions.php file and we leave below code as part of the original article legacy. However, later we converted the code into a simple plugin, in order to keep your theme’s files completely separated. Because, in the event of theme auto-update you will lose all the changes inside functions.php file, unless you use custom child theme (not 3rd party). Plugin still requires some manual work from your part, though.

 


Note: following code samples are kept for historical purposes only. Download plugin .zip file above, instead of applying modifications to your theme below!

 

STEP 1

Code Update Note: in previous code versions we used current theme‘s (template) /image/ directory, but we’ve figured it’s probably better to keep theme’s directories intact, and use generic wp-content directory instead.

1-1 Create /images/ folder inside your wp-content directory

1-2 Create a large (>= 1200 pixels wide) amp_preview_image.jpg image file using your favorite image editor (Photoshop, CorelDraw, Krita, GIMP, Paint, Paint.NET etc.) and upload it inside above wp-content/images/ directory that you’ve just created:

wordpress/wp-content/images/amp_preview_image.jpg

STEP 2

Place below code in your WordPress theme’s functions.php file (take care not to duplicate opening and closing PHP tags – they are placed below for completeness). Alternatively, you can create on your own a simple WordPress plugin (see below extra instructions):

<?php
// amp pages: metadata filter
function amp_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		// set custom article image
		// if original is missing / not found
		// or if featured image width or height dimension is smaller than 1200 pixels
		// you must place "amp_preview_image.jpg" in /wp-content/images/ sub-directory
		// also you can change image extension to .png or any other instead of .jpg defined below
		// also UPDATE IMAGE height AND width NUMBERS TO MATCH YOUR GENERIC IMAGE SIZE (in pixels)
		$countArticleImages = isset($metadata['image']) ? count($metadata['image']) : 0;
		if (
			$countArticleImages == 0
			||
			( ($metadata['image']['width'] >= $metadata['image']['height']) && ($metadata['image']['width'] < 1200) )
			||
			( ($metadata['image']['width'] < $metadata['image']['height']) && ($metadata['image']['height'] < 1200) )
		) {
			$metadata['image'] = array(
				'@type'  => 'ImageObject',
				'url'    => WP_CONTENT_URL.'/images/amp_preview_image.jpg',
				'height' => 1200, // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
				'width'  => 1200  // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
			);
		}
	}
	return $metadata; 
}
add_filter('amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2);
?>

With above filter warning should disappear within couple of days. However, this is not an ideal solution right now, and you should use it only temporarily, until more acceptable fix becomes available.


Alternatively, you can completely remove AMP featured image with below code (but this will also affect your perfectly valid AMP pages and degrade rich snippet appearance @ search results – use it with caution!):

<?php
// amp pages: metadata filter
function amp_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		unset($metadata['image']);
	}
	return $metadata;
}
add_filter('amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2);
?>

Another alternative is to remove featured image only in case it does not satisfy current requirement. However, you will probably receive a warning that image attribute is missing, because it is required by Google:

<?php
// amp pages: metadata filter
function amp_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		if (
			isset($metadata['image'])
			&&
			(
				( ($metadata['image']['width'] >= $metadata['image']['height']) && ($metadata['image']['width'] < 1200) )
				||
				( ($metadata['image']['width'] < $metadata['image']['height']) && ($metadata['image']['height'] < 1200) )
			)
		) {
			unset($metadata['image']);
		}
	}
	return $metadata;
}
add_filter('amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2);
?>

If you wish to use plugin format instead, and keep away from modifying your theme’s functions.php file, you should use following instructions:

PLUGIN STEP #1
Go to your WordPress install directory => wp-content/plugins/ and create a new directory amp-plugin-filter

PLUGIN STEP #2
Create an empty file named amp-plugin-filter.php inside the above created plugin’s dir

PLUGIN STEP #3
Copy/Paste below code and re-save:

<?php
/*
Plugin Name: AMP Plugin Filter
Plugin URI: https://tehnoblog.org/how-to-fix-google-search-console-amp-image-size-smaller-than-recommended-in-wordpress/
Description: Simple plugin to replace small or missing featured images in AMP plugin and avoid Google Search Console AMP pages warnings
Author: TehnoBlog.org
Author URI: https://tehnoblog.org/
Version: 0.0.1
*/

if ( !defined('ABSPATH') ) {
    exit;
}

// amp pages: metadata filter
function amp_plugin_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		// set custom article image
		// if original is missing / not found
		// or if featured image width or height dimension is smaller than 1200 pixels
		// you must place "amp_preview_image.jpg" in /wp-content/images/ sub-directory
		// also you can change image extension to .png or any other instead of .jpg defined below
		// also UPDATE IMAGE height AND width NUMBERS TO MATCH YOUR GENERIC IMAGE SIZE (in pixels)
		$countArticleImages = isset($metadata['image']) ? count($metadata['image']) : 0;
		if (
			$countArticleImages == 0
			||
			( ($metadata['image']['width'] >= $metadata['image']['height']) && ($metadata['image']['width'] < 1200) )
			||
			( ($metadata['image']['width'] < $metadata['image']['height']) && ($metadata['image']['height'] < 1200) )
		) {
			$metadata['image'] = array(
				'@type'  => 'ImageObject',
				'url'    => WP_CONTENT_URL.'/images/amp_preview_image.jpg',
				'height' => 1200, // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
				'width'  => 1200  // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
			);
		}
	}
	return $metadata; 
}
add_filter('amp_post_template_metadata', 'amp_plugin_modify_json_metadata', 10, 2);
?>

Install plugin from WordPress Admin Dashboard and you are done! Don’t forget to upload your generic image manually inside wp-content/images/ folder! Also, plugin is very simple, it does not have any options, settings menus etc.


STEP 3

Once you complete above modification, visit Google Search Console > AMP section and click on VALIDATE FIX button. It will usually take couple of days to validate and you should receive email notification once the process is (hopefully successfully) completed.

Free Tip
If you use static caching plugin, don’t forget to clear cache, otherwise Google will not see above changes!

Comments


  1. comments

    26 Comments

    Add Your Comment
  2. 1. Allan Burgess

    If, as you suggest, we leave some pages as they are, won’t those amp pages eventually be excluded from search by Google? I have a 20-year-old site and search console is already saying I have over 500 pages/posts affected by this. For many posts, I would have no means of obtaining higher resolution images replacements, not to mention the massive amount of work involved.

  3. 2. TehnoBlog (In reply to Allan Burgess)

    No, this is taken directly from Google’s Help:

    These AMP pages have issues that should be addressed, but can still be shown as AMP in Search results. Issues include non-optimal pages, or use of deprecated AMP features that may become errors in the future.

    This means that at Google’s sole discretion it may still show your page(s) in search results, but they might not have ‘rich snippet’ appearance (e.g. there will be no image shown next to the article title/content).

    This is true until Google decides to treat them as errors, in which case they will (probably) not be shown in search results at all. However, I doubt Google will do that anytime soon, because, in a year or two 1200 will be replaced with 2400 pixels, and then with 4800, 9600 pixels… (ad infinitum).

  4. 3. Francis

    The quick and easy fix worked. I’ll take time out to figure out my most important pages and work on increasing their featured images one by one. I just wish a permanent and stress free solution to this would pop up soon

  5. 4. Havi

    Thank you for the article!

    I found this: If your image is 1200px tall, verification will succeed.

    The worst impact is on the desktop and responsive versions of WordPress sites that use a resized version of the featured image.

    I am testing a compression plugin for those but some themes resize on the fly and the image does not get compressed.

    Do you know if there is a way for AMP to get the featured image from a new custom field for each article/blog post?

    Cheers!

  6. 5. TehnoBlog (In reply to Havi)

    Hi, thanks!

    AMP will first get a featured image if it’s present in a standard post already.
    In case that you use a custom featured image, you need to retrieve it with get_post_meta()
    $customFeatImgUrl = get_post_meta( $post->ID, 'featured_image_meta_key', true );

    $post object is already passed as a second parameter in our function above, so you’re allready set:
    amp_modify_json_metadata($metadata, $post)

    Depending on what you need/want, you can also combine above with official WP helper get_the_post_thumbnail_url()
    $featImgUrl = get_the_post_thumbnail_url( $post, $size = 'full' );
    and then create a fallback in case your custom field is empty.

  7. 6. TehnoBlog

    We’ve updated the code to use /wp-content/images/ upload folder instead of the current theme’s one, and added optional instructions to convert this code into a simple WP plugin, and completely avoid theme modifications and dependency (great for future care-free theme automatic updates).

  8. 7. O'phil

    Crazy requirement! Totally against the very reason for creating amp pages in the first place !
    Or have I and a lot of other people completely misunderstood what AMP is all about?

    I *thought* the whole purpose of AMP was to provide the lightest possible pages for serving on slow or low-capacity networks, which (though this may come as a surprise to some geeks working with state of the art 5G and ultrafast fiberoptic connexions ) still provide Internet services to billions of users worldwide, in rural areas, developing countries, and many city locations too.
    For this reason, I slimmed down major content pages, *reducing* the size of images for AMP versions, removing images to increase load speed, and now have a bunch of AMP pages that load ultrafast on normal networks, and quite fast on slow networks. I thought that this was the object of AMP.
    But if the purpose of AMP pages is *not* to provide the lightest possible pages for serving on slow networks, just what *is* its purpose ?
    And if the purpose of AMP *is* to provide the lightest possible pages for serving on slow networks, then it seems completely counterproductive to ask owners to voluntarily slow down their sites by including high-res images.
    60% of our visitors view on mobile devices, with a res of less than 750 px across. 1200 px images are a pointless waste of bandwith for them. I guess there’s a bit of a reality gap between the guys who work in Google, and Joe Public worldwide
    Mystified !

  9. 8. TehnoBlog (In reply to O'phil)

    Hi, I understand your concern regarding loading speed and performance. However, if your AMP pages use srcset attribute (works exactly the same as in HTML), then browser will load appropriate lower resolution on smaller screens automatically, saving bandwidth and achieving better performance / speed.

    Also, while this is still in early stages in WP, using source we can combine next-gen formats (WebP, HEIC) that achieve higher compression ratios, while keeping or outperforming traditional image formats (JPEG, PNG, GIF) quality.

    Bottom line, AMP is not lacking nor restrictive about that in this case.

  10. 9. Kartika

    Hi, I have created a new /images/ folder inside wp-content directory, but I do not understand about:

    Create a large (>= 1200 pixels wide) amp_preview_image.jpg image file and upload it inside above wp-content/images/

    I have just created a file with name “amp_preview_image.jpg”. Is this ok or not.

    Please clear that we need to upload all images with >=1200 px or only create a file with name “amp_preview_image.jpg”

  11. 10. TehnoBlog (In reply to Kartika)

    Hi, only one ‘universal’ image is required.

    First, you need to use any kind of image editor (e.g. Photoshop, Microsoft Paint, GIMP, Paint.NET, Chasys Draw IES etc.) to create an image with at least 1200 px width (for example: 1200 x 1200 if you wish to be square). Then, save it as .jpg file on your local computer. You can also use other image formats (“extensions”): .gif or .png (other formats are not accepted by AMP standard), but don’t forget to reference it properly in the above code e.g. don’t save the file in .png format and leave .jpg reference in the image path – it will not be found later on your server!

    Also, you don’t have to call your image file “amp_preview_image.jpg” (or .png, or .gif), you can call it whatever you wish — e.g. “myampimage.jpg”, but don’t forget to properly reference it and update above line of code later.

    In particular, this is the line of code that defines path to your image + file extension:
    'url' => WP_CONTENT_URL.'/images/amp_preview_image.jpg',

    Finally, upload that file to your wp-content/images/ folder.

  12. 11. Kartika (In reply to TehnoBlog)

    Hi, Thank you for your help, but the problem is still persist.

  13. 12. TehnoBlog (In reply to Kartika)

    Can you please explain what is the exact issue here? How did you implement the code? Inside your currently active theme’s functions.php file or through a mini-plugin version (both codes should work the same, but plugin version must be installed/activated in WP Admin dashboard, otherwise it will not work on its own). Or did you forget to put the code entirely? Because, it is not enough just to create /images/ folder and design your generic image “place holder”. If you do not put the code, then, nothing will work.

    Also, please verify that you are using official AMP plugin for WordPress. As stated in the article, this fix is intended for that plugin only, not other 3rd party AMP plugins (they work differently, and provided hooks/filters are not applicable in those cases).

    We have verified this method on our own website (the one you are reading here right now :)) and it is definitely working. GSC returns 0 AMP page issues after the fix.

    Please, clear cache and request new validation in your Google Search Console again. To do that, click on DONE FIXING button in your GSC > AMP Pages > Details reports section, where your WARNING issue(s) are listed. Initial validation must pass and you will instantly know if it works or not, complete validation might take up to several days or weeks to finish.

  14. 13. TehnoBlog (In reply to Kartika)

    Hi, try with our simple plugin version (.zip download link is posted in the article). You can remove modifications in your theme’s functions.php file if you made them earlier. It is a simple plugin, it does not have any options page etc. and you will still need /wp-content/images/amp_preview_image.jpg file created and uploaded manually.

  15. 14. Bob

    I tried the manual fix and Google still gives me the warning. I wish it would tell me exactly what it wants from the image, because my image is at least 1200px wide and 800,000px length x width.

  16. 15. TehnoBlog (In reply to Bob)

    Hi Bob, try with larger images e.g. 1201 px or 1300 px.

  17. 16. Bob (In reply to TehnoBlog)

    Hi, my image is a little larger than the requirements, 1241×645, and I still get the warning. Does it have to be a specific aspect ratio, ex. 16×9? I can try to upscale it again to 1300px width but not sure that would do anything.

  18. 17. TehnoBlog (In reply to Bob)

    Not sure at the moment, really. According to official requirements (link is already posted in article), particular aspect ratio is not specifically required, but 16:9, 4:3 and 1:1 are recommended. Some users at WordPress.org forum reported that increasing to 1201 px width fixed their warnings, but at least in our case, 1200 px and 16:9 or 4:3 works just fine. Your image also satisfies 800k total pixels rule, so it is really puzzling. Increasing it further is only idea left for now.

  19. 18. Bob (In reply to TehnoBlog)

    Hi, I think I figured out what the problem was. I used a script to automatically upscale the images on my WP site. After this the images did not validate, BUT after I manually uploaded the same image that was automatically generated by the script then the image does validate. I think it’s something in the upload process that needs to happen for WP to properly render the image for google to validate it.

  20. 19. Himanshu Maurya

    Really appreciate you!!! osm work bro it help me lot!!! keep growing Up!

  21. 20. TehnoBlog (In reply to Himanshu Maurya)

    Thanks!

  22. 21. Pat

    But what about the slow load times? This would be especially true for pages with multiple images. I have read in the past not to make my images too large due to slower load times.

    Thanks!

    Pat

  23. 22. TehnoBlog (In reply to Pat)

    srcset and deferred lazyload are used for devices with small screen resolution and slow connection, see this article: https://tehnoblog.org/wordpress-theme-image-lazyload-tutorial-with-adaptive-height-placeholders/

  24. 23. Pat (In reply to TehnoBlog)

    Thanks!

  25. 24. Srikanth

    I faced the same issue..I replaced all the images resizing to 1200px width and updated the content,but after submitting validate fix in GSC again it is showing the same error. What should I do now?

  26. 25. Elia

    you are amazing wuaooo thank you!

  27. 26. vignesh

    Please create this method video presentation

    I don’t understand this method
    Please help me

Post A Comment

I have read and consent to Privacy Policy and Terms and Conditions