Google AMP - รูปภาพ
รูปภาพที่ใช้ในหน้า AMP ของ Google นั้นคล้ายคลึงกับวิธีที่ใช้ในหน้า HTML มาตรฐาน แต่ความแตกต่างเพียงอย่างเดียวคือวิธีใช้ชื่อแท็กกับคุณสมบัติเพิ่มเติมบางอย่าง บทนี้จะกล่าวถึงสิ่งเหล่านี้โดยละเอียด
สังเกตไวยากรณ์ที่แสดงด้านล่าง -
HTML มาตรฐาน
<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>
ในหน้า AMP
<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>
สังเกตว่าแท็กจาก img เปลี่ยนเป็น amp-img.
ทำไมต้องใช้ amp-img แทน img?
เหตุผลที่อยู่เบื้องหลังการเปลี่ยน img เป็น amp-img คือเพื่อให้สามารถควบคุมเค้าโครงเพจได้มากขึ้นและคำขอของเครือข่ายที่สร้างขึ้นเพื่อโหลดรูปภาพ Amp เพิ่มการโหลดแบบขี้เกียจให้กับทรัพยากรรูปภาพและจัดลำดับความสำคัญของการโหลดตามทรัพยากรอื่น ๆ ที่มีอยู่ในหน้า
ตัวอย่าง
ปฏิบัติตามรหัสต่อไปนี้เพื่อความเข้าใจที่ดีขึ้น -
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href = "http://example.ampproject.org/articlemetadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initialscale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
- amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-msanimation:none;
animation:none
}
</style>
</noscript>
</head>
<body>
<h1>Google AMP - Image Example</h1>
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</body>
</html>
เอาต์พุต
เมื่อคุณรันโค้ดที่แสดงด้านบนคุณจะพบผลลัพธ์ดังที่แสดงด้านล่าง -
คุณยังสามารถทำให้รูปภาพตอบสนองได้โดยเพิ่ม property layout =” responsive” ลงในแท็กamp-imgดังที่แสดงด้านล่าง
ตัวอย่าง
ปฏิบัติตามรหัสต่อไปนี้เพื่อความเข้าใจที่ดีขึ้น -
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
width = "246"
height = "205"
layout = "responsive">
</amp-img>
เอาต์พุต
เมื่อคุณรันโค้ดที่แสดงด้านบนคุณจะพบผลลัพธ์ดังที่แสดงด้านล่าง -