구글 AMP - 이미지

구글 AMP 페이지에서 사용되는 이미지는 표준 html 페이지에서 사용되는 방식과 비슷하지만 몇 가지 추가 속성과 함께 태그 이름이 사용되는 방식만 다릅니다. 이 글에서는 이에 대해 자세히 설명합니다.

아래 표시된 구문을 준수하십시오.

표준 HTML

<img src="example.jpg"
     width="300"
     height="250"
     alt="Example"/>

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 ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Image</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-img.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{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;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom> </style>
</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 태그에 layout ="responsive" 속성을 추가하여 이미지를 반응형으로 만들 수도 있습니다.

예제

더 나은 이해를 위해 다음 코드를 관찰하십시오.

<amp-img
  alt="Beautiful Flower"
  src="images/flower.jpg"
  width="246"
  height="205"
  layout="responsive"
>
</amp-img>

결과

위에 표시된 코드를 실행하면 아래와 같은 결과를 찾을 수 있습니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기