AMP, in a nutshell, is a method for optimizing websites to be faster and more performant.
AMP stands for "Accelerated Mobile Pages", and while the stated focus is performance on mobile devices, the speed gains it can bring are just as helpful on non-mobile devices. AMP contains a suite of optimization methods that offer various types of perks, but the power to make sites faster is arguably most significant on image and video-heavy sites.
Given faster sites make for more engaged visitors, potentially higher search engine rankings (and hence greater exposure), it's definitely worth thinking about AMP when you create the next web-based showcase of your work.
AMP is an open source project with Google behind it, and has now been in development since around September 2015, with AMP versions of sites appearing in Google search results since February 24th this year. We've been covering AMP since its public launch earlier this year, so it's a great idea to have a read of "AMP Project: Will it Make Your Sites Faster" if you'd like some background before we move on.
In that article you'll find a lot of information on the overall value of working with AMP, but we're going to look a bit more directly at the two most relevant aspects to working with images and video: AMP's custom <amp-img> and <amp-video> elements.
What Are <amp-img> and <amp-video>?
When you create a page according to AMP requirements you'll use a series of custom elements instead of some of the default HTML elements you might be used to.
- Instead of using a regular
<img>element you'll use<amp-img> - Instead of using a
<video>element you'll use<amp-video>
When you use these custom elements you'll automatically tap into some of the benefits inherent to AMP. Let's look at what they are and why they're worthy of your consideration.
Why Use <amp-img> and <amp-video>?
You already know that AMP is supposed to help make your sites faster, but what specifically do the <amp-img> and <amp-video> elements have to offer? The benefits that are most pertinent are as follows.
Lazy Loading
By default, if you have a page with several images on it, every single image has to be loaded in one hit. This can very easily drag your site's overall load time out to quite a duration. The higher your initial load time the more likely you are to have visitors abandon your site, and the worse you may do in search engines.
However with a technique called a "Lazy Loading", you can instead have just the first few images loaded with the rest to come later. Enough content is loaded for the visitor to start viewing the page, and the remaining images are "lazy loaded" when the visitor scrolls down. This can make considerable improvements to your load speed.
For example, in the tests I ran as part of my article "AMP Project: Will it Make Your Sites Faster", I found that on a simulated mobile connection it took 26 seconds to load a page with five 500Kb images. With an AMP version of the same site the load time was pared down to 16 seconds.
No Layout Reflow
One of the major perks of using AMP is it avoids the issue of having the page layout "reflow" multiple times.
While a page is being served, the elements of unloaded media initially have no height or width. Hence the browser lays things out as though said media was not a part of the page. Then when an image finishes loading the layout has to be recalculated, with other elements moved and resized to fit around the image—something called reflowing. If other media is also yet to load the page has to reflow again and again for each item.
On mobile devices in particular, visitors can face frustration if they are already engaged and what they're focused on suddenly jumps out of sight due to reflow. This can very easily lead to reduced visitor attention or site abandonment, especially if it happens multiple times.
With AMP, reflow never occurs. This is because every piece of media has a correctly sized placeholder added into the layout from word go. Once the media is loaded it replaces the placeholder, no reflow necessary.
Free CDN Access
Storage and bandwidth for large amounts of media can become expensive fairly quickly, and choosing a host who can deliver quickly to viewers all over the world is not always easy.
When you use AMP however, you get access to a CDN provided by Google free of charge. As long as you create a page that passes AMP validation, Google will automatically cache your HTML documents, JS files and images in the AMP CDN.
Relatively Hands Free
The truth is most of the things AMP does for you can also be done in other ways via various scripts and methodologies. However one of the huge upsides to using AMP is you don't need to get intimately acquainted with the technicalities that go into setting up equivalent optimizations.
By using AMP you can avoid manually choosing, configuring and maintaining multiple scripts and processes. Instead you just use AMP as prescribed and everything happens in the background without needing your hands-on involvement.
Getting Started with AMP
Before we get into the specifics of using <amp-img> and <amp-video> you'll need to know how to create an AMP page with the required boilerplate code. We covered how to do this in another tutorial so to get the ball rolling you can head over to "How to Make a Basic AMP Page From Scratch".
There's no need to do the full tutorial, so if you just work through until the end of the section titled "Dealing with Inline CSS" you'll be all set to come back and pick up again here.
How to Use <amp-img>
On an AMP page you'll be using <amp-img> to load every single image. Let's go through how to use its code correctly and what each of its associated attributes do.
(You can find the full documentation for <amp-img> at the AMP project reference website).
Essential Inclusions
When adding an <amp-img> element there are a few essential attributes you'll need to include. As with a regular <img> element you'll need to use a src attribute to specify the location of your image, and an alt attribute to set a text fallback.
It is also a requirement in AMP that you specify height and width each time. This is because AMP uses the height and width attributes to set the size of placeholders before the image is loaded.
If you're concerned about how to make images behave responsively given you're setting fixed dimensions, don't worry because AMP has functionality included to handle responsive adjustments, which we'll touch on later.
A basic example of the <amp-img> element with these essential inclusions is:
1 |
<amp-img src="/img/amp.jpg" width="1080" height="610" alt="an image"></amp-img> |
Using srcset
The <amp-img> element provides a srcset attribute that can be used to specify alternate images to be displayed either at different widths or pixel densities.
It's used the same way as in a regular <img> element, so you can get a full run down on the attribute at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
For example, to provide different images at different pixel densities you might use:
1 |
<amp-img src="/img/amp.jpg" srcset="amp@1x.jpg 1x, img/amp@2x.jpg 2x" width="1080" height="610" alt="an image"></amp-img> |
Or to load different images depending on viewport width you might use:
1 |
<amp-img src="/img/amp.jpg" srcset="/img/amp.jpg 1080w, /img/amp-600.jpg 600w, /img/amp-300.jpg 300w" width="1080" height="610" alt="an image"></amp-img> |
Note, if you are using values containing w the src attribute will be ignored in browsers that support srcset.
Adding Attribution
If you need to give credit for to an image you can use attribution, for example:
1 |
<amp-img src="/img/amp.jpg" width="1080" height="610" attribution="CC courtesy of Cats on Flicker" alt="an image"></amp-img> |
Styling Placeholders
If you'd like to control the appearance of the placeholders that appear in your page while images are loading you can do so with CSS targeted at the amp-img element, for example:
1 |
amp-img { background-color: grey;} |
How to Use <amp-video>
In an AMP page you'll use <amp-video> whenever you want to embed a video from your own source. If you're looking to embed third party video, such as from YouTube or via an iFrame, you can instead use other elements like <amp-youtube> or <amp-iframe>.
(Again, you can find the full documentation for <amp-video> at the AMP project reference website).
Essential Inclusions
As with <amp-img>, there are a few essential inclusions when using <amp-video>. Once again src is required to specify the location of the video, and both height and width are required so AMP can correctly lay out the page while loading.
A basic example with required attributes might be:
1 |
<amp-video src="/video/tokyo.mp4" width="480" height="270"></amp-video> |
Adding a Fallback
In case the video doesn't load or display for one reason or another, it's possible to setup a fallback by nesting a <div> inside the <amp-video> element. The <div> should include the attribute fallback.
For example:
1 |
<amp-video src="/video/tokyo.mp4" width="480" height="270"> <div fallback> <p>Video could not be loaded. Please check that your browser supports HTML5 video.</p> </div></amp-video> |
Adding Multiple Sources
The <source> element can be nested inside the <amp-video> element to provide multiple file formats and maximize the probability of compatibility in various browsers.
This works in the same way it does in a regular HTML5 <video> element so for full details check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
As an example:
1 |
<amp-video src="/video/tokyo.mp4" width="480" height="270"> <div fallback> <p>Video could not be loaded. Please check that your browser supports HTML5 video.</p> </div> <source type="video/webm" src="/video/tokyo.webm"> <source type="video/ogg" src="/video/tokyo.ogg"></amp-video> |
Setting a "Poster"
Before playback on a video has started the first frame of the video will be displayed by default. However if you want to customize what is shown you can specify an image using the attribute poster.
For example:
1 |
<amp-video src="/video/tokyo.mp4" poster="/img/tokyo.jpg" width="480" height="270"></amp-video> |
Extra Attributes
As well as what we've discussed above, there are a few extra attributes you can use with the <amp-video> element. They are as follows.
Autoplay
By default videos won't play automatically. To override this include the attribute autoplay:
1 |
<amp-video src="/video/tokyo.mp4" autoplay width="480" height="270"></amp-video> |
Controls
Controls on a video won't appear unless you add the attribute controls:
1 |
<amp-video src="/video/tokyo.mp4" controls width="480" height="270"></amp-video> |
Loop
To make a video repeat infinitely include the attribute loop:
1 |
<amp-video src="/video/tokyo.mp4" loop width="480" height="270"></amp-video> |
Muted
To turn off the sound on a video add the attribute muted:
1 |
<amp-video src="/video/tokyo.mp4" muted width="480" height="270"></amp-video> |
The "layout" Attribute
AMP's <amp-img> and <amp-video> elements can have the attribute layout set to one of six values, each of which makes the element behave differently:
- responsive
- fill
- fixed
- fixed-height
- flex-item
- nodisplay
Let's take a quick look at what each one does.
(Find the complete layout docs here: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)
responsive
Your "go to" layout setting should be responsive in most cases - use this if you're not sure what to choose. It will cause the element to expand to the maximum width of its parent element while maintaining its aspect ratio.
The ability to add this attribute is why you don't have to worry about ensuring responsiveness despite setting explicit height and width values on elements.
fill
The fill setting is almost the same as responsive, however the element will expand to both the maximum width and height of its parent, regardless of aspect ratio.
fixed
Using a fixed layout will keep the element at its specified height and width with no ability to resize.
fixed-height
With the fixed-height setting an element will stretch its width to fit the parent element but keep its height the same.
flex-item
If you've applied the CSS display: flex; to an element's parent, you can use the flex-item layout value to make it fill all available space inside the parent element. If multiple children of the same parent use the flex-item layout they will share space equally.
nodisplay
The nodisplay setting is used to hide an element. It's purpose is to allow content to be shown upon a user's action, such as in conjunction with the <amp-lightbox> element.
Wrapping Up
That covers all the essentials of working with AMP's custom <amp-img> and <amp-video> elements, from why you should use them through to how.
AMP provides a consolidated, hands free way to optimize media heavy sites that makes for a much better mobile experience, while improving the desktop experience at the same time.
For more information check out the links below.
Related Links:
-
AMP Project: Will it Make Your Sites Faster
-
How to Make a Basic AMP Page From Scratch
- AMP in 60 Seconds
-
Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP
- Introducing the Accelerated Mobile Pages Project Google official blog
- www.ampproject.org
- AMP Project on Github
- AMP WordPress plugin
- Accelerated Mobile Pages ( AMP ) for WordPress on Envato Market
