How to Set Up Images of AMP HTML Blog Post

How to Set Up Images of AMP HTML Blog Post - Actually save the image for Blogger post is very easy, just click the icon upload image then select the picture on the computer then the image will appear in the blog post. But the pictures are of course we must set the location and size to look good and neat and not too burdens loading blog.

For that in adding image post do not carelessly with only limited to upload images in the post and left alone.

However, make it a habit to correct the HTML post code, such as deleting inline-style styles like <div style = "text-align: center;"> and others. That's because inline style can contribute to blog loading.

The best way is to use CSS style from HTML editing, for example <div style = "text-align: center;"> we change to <div class = "center"> with CSS which is saved in edit HTML as follows:

.center {
   text-align: center;
}

So also for left, right, and justify.

Likewise for posting images, especially for images of AMP HTML blog post (actually this applies to all types of blogs), the location and size of images should be set with CSS of HTML editing.

Please save the following CSS code in HTML edit for post page style (for AMP blog save for syle page post desktop view and mobile view).

.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}

Remember! width and height of the image must be in accordance with the width and height of the actual image of both AMP HTML blog and non AMP HTML blog.

1. For images with width equal to or greater than the width of the post page, we simply add the layout = "responsive" code in the amp-img tag as follows:

<amp-img src="/img/amp.jpg"
      width="1000"
      height="564"
      layout="responsive"
      alt="an image"></amp-img>

2. For an image with a width smaller than the width of the post page, for example with a width of 300px, 400px, 500px, or 600px (we assume that the post width is 700px).

If without added layout = "responsive", then by default the image will be on the left but will be cut off on the device screen smaller than the width of the image.

Meanwhile, if added layout = "responsive" on the picture then the image will be blurred.

The solution is to use the class in the CSS earlier. please replace the code

<div class="separator" style="clear: both; text-align: center;">

with

<div class="img-width-300 img-center">

then the HTML code will be as follows:

<div class="img-width-300 img-center">
<amp-img src="/img/amp.jpg"
      width="300"
      height="169"
      layout="responsive"
      alt="an image"></amp-img>
</div>

If the image wants to be on the left or right side, then we just replace the img-center code with img-left or img-right.

So even with img-width-300, if the image width is 400px (or width below 500px) then please change to img-width-400. So even for a 500px width (or width below 600px) or 600px (or width below 700px) (we assume that the width of the post is 700px), please replace it with img-width-500 or img-width-600.

How easy is not it? Hopefully this post can be understood so that your blog post is always valid AMP HTML. Good luck and good luck.

Share :