HTML AMP Image Generator
AMP pages do images their own way with the <amp-img> tag. It needs a width, a height and a layout, and gives you fast, lazy-loaded images by default. Fill in the fields and copy valid AMP HTML markup, no spec-reading required.
Why amp-img instead of img?
AMP HTML swaps the regular img tag for <amp-img> so the AMP runtime can manage loading and sizing for you. It lazy loads by default, reserves space to avoid layout shift, and keeps pages fast and predictable, which is the whole point of AMP.
<amp-img src="photo.jpg" width="300" height="180" layout="responsive" alt="A photo"></amp-img>
The layout modes
| Layout | What it does |
|---|---|
responsive | Scales with the container while keeping the width-to-height ratio. The most common choice. |
fixed | Exact width and height in pixels. The image does not resize. |
fixed-height | Fixed height, flexible width. Handy for horizontal strips. |
fill | Stretches to fill the parent element, which needs its own set size. |
intrinsic | Scales responsively but never past the image's natural size. |
How to use the generator
- Add the basics. Enter the src, alt text, and the width and height in pixels.
- Pick a layout. Start with
responsiveunless you have a reason to use another mode. - Copy the tag. Paste the generated
amp-imginto your AMP page.
Good to know
- AMP needs its boilerplate. The
amp-imgtag only works inside a valid AMP HTML document with the AMP runtime loaded. - Always include alt. Just like a normal image, describe what it shows for accessibility and SEO.
- Optimize the source. AMP rewards small files. Compress your image before you ship it.
Frequently asked questions
What is the amp-img tag?
It is the AMP HTML replacement for the standard img tag. It requires explicit dimensions and a layout, lazy loads by default, and helps AMP pages load quickly and predictably.
What does the layout attribute do?
It controls how the image sizes itself. responsive scales with the container, fixed uses exact pixels, fill stretches to the parent, and intrinsic scales up to the natural size.
Do I still need width and height?
Yes. Most layouts require width and height so AMP can reserve space and work out the aspect ratio before the image loads, preventing layout shift.
Is AMP still worth using?
It depends on your goals. AMP is no longer required for Google's Top Stories, but some publishers still use it for guaranteed speed. If you use it, amp-img is how you add images.
Further reading: the official amp-img component docs, Wikipedia on Accelerated Mobile Pages, and Google's web.dev overview of AMP.
AMP loves lightweight images. Shrink yours before you publish.
Open the Image Optimizer→