Google AMP-이미지
Google AMP 페이지에서 사용되는 이미지는 표준 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.
img 대신 amp-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>
산출
위에 표시된 코드를 실행하면 아래와 같은 결과를 찾을 수 있습니다.
또한 아래와 같이 amp-img 태그에 속성 레이아웃 = "반응 형"을 추가하여 이미지를 반응 형으로 만들 수 있습니다.
예
더 나은 이해를 위해 다음 코드를 관찰하십시오.
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
width = "246"
height = "205"
layout = "responsive">
</amp-img>
산출
위에 표시된 코드를 실행하면 아래와 같은 결과를 찾을 수 있습니다.