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>

산출

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