When working with images in AMP you need to be aware of some do's and dont's. These are covered in this manual. Making sure your visitors on your AMP pages get the ultimate user experience.
When adding an image to your website, use the responsive image element from the Webanizr library. The correct element from the library is highlighted in the screen shot.
In AMP mode all images on a Webanizr website are responsive by default. By using the responsive image element you ensure that the lay-out is the same, whether you publish the page in AMP or non AMP mode. Making it easier to reuse the lay-out you've created to be reused / redesigned om pages that are to complex to show in AMP mode.
In most cases Webanizr can calculate how wide and high an image should be, based on the available space and the dimensions of the original images. There are situations however where this isn't possible. For example when using svg images that don't have a fixed width or height. In those cases you need to specify the width and/or height yourself.
In AMP the width and height should always be available as information. This helps the browser to reverse the correct amount of screen size for the image even before downloading it. If this information is not available the image will not appear.
You might be tempted to create images that are ideal for mobile use. Resizing them to a mobile format (around 600px) to make sure they are small in size and don't slow down the page.
The downside of this that the image appear blurry on desktop and tablet. And you don't need to scale down yourself. Webanizr creates optimal images for each situation calculating the maximum size that is needed and scales minimizes the size. Webanizr can take in account more factors you are aware of, ensuring optimal images on each device. So just upload your original images and let Webanizr do the rest.
Especially on mobile image are often used as a full screen background. By using the image as background you can start telling the story in the first second, without wasting screen space for a header image.
If you choose to use images as a background, make sure there is enough contrast between the image and the text over it. Not only on the exact position of the text. When viewed on a phone with other screen dimensions, the text may shift. Wheb that happens it should still be on a part of the image that has enough contrast.
Currently it is not possible to use animated gifs when the page is set to AMP mode. Those images may not appear or display incorrect. When you want to add animation to the website use video or website animations instead.
Do you want to get started with AMP? Or just a bit more information about what it can do for you? Please contact us.