Address: Lipsum Street Lorem
Way PO 60009 Dolor/ALASKA

Phone: +1 234 56 78

Fax: +1 876 54 32

E-Mail: amp@mobius.studio

How to Insert Image on AMP HTML Blogger

amp-img AMP HTML


For the image, not required special JavaScript, is enough with JS AMPHTML in General. There is a difference in the way of writing the image than usual. The code for the image:

  <amp-img src="url-image-here"
width="1080"
height="610"
layout="responsive"
alt="AMP HTML"></amp-img>

Layouts that support: fill, fixed, fixed-height, flex-item, nodisplay, responsive
Use srcset to determine the appropriate size of the screen image. Code like this

  <amp-img src="https://ampbyexample.com/img/amp.jpg"
srcset="https://ampbyexample.com/img/amp.jpg 1080w, https://ampbyexample.com/img/amp-900.jpg 900w, https://ampbyexample.com/img/amp-800.jpg 800w,
https://ampbyexample.com/img/amp-700.jpg 700w, https://ampbyexample.com/img/amp-600.jpg 600w, https://ampbyexample.com/img/amp-500.jpg 500w, https://ampbyexample.com/img/amp-400.jpg 400w,
https://ampbyexample.com/img/amp-300.jpg 300w, https://ampbyexample.com/img/amp-200.jpg 200w, https://ampbyexample.com/img/amp-100.jpg 100w"
width="1080"
height="610"
layout="responsive"
alt="AMP HTML"></amp-img>

To see the effect, please resize the browser.


Disqus Comments