Google AMP - Hình ảnh
Hình ảnh được sử dụng trong trang AMP của Google tương tự như cách nó được sử dụng trong trang html tiêu chuẩn, nhưng chỉ khác là cách tên thẻ được sử dụng với một số thuộc tính bổ sung. Chương này thảo luận chi tiết về những điều này.
Hãy quan sát các cú pháp được hiển thị bên dưới -
HTML chuẩn
<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>Trong trang AMP
<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>Lưu ý rằng thẻ từ img được đổi thành amp-img.
Tại sao sử dụng amp-img thay vì img?
Lý do đằng sau việc thay đổi img thành amp-img là để có nhiều quyền kiểm soát hơn đối với bố cục trang và yêu cầu mạng được thực hiện để tải hình ảnh. Amp thêm tính năng tải chậm vào tài nguyên hình ảnh và ưu tiên tải theo các tài nguyên khác có sẵn trên trang.
Thí dụ
Hãy quan sát đoạn mã sau để hiểu rõ hơn:
<!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>Đầu ra
Khi bạn thực thi đoạn mã hiển thị ở trên, bạn sẽ thấy kết quả như hình dưới đây:
Bạn cũng có thể làm cho hình ảnh phản hồi nhanh bằng cách thêm thuộc tính layout = ”responsive” vào thẻ amp-img như hình bên dưới
Thí dụ
Hãy quan sát đoạn mã sau để hiểu rõ hơn:
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
width = "246"
height = "205"
layout = "responsive">
</amp-img>Đầu ra
Khi bạn thực thi đoạn mã hiển thị ở trên, bạn sẽ thấy kết quả như hình dưới đây:
