Home
AMP
Component

구글 AMP - 이미지

1 min read

구글 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>

결과

위에 표시된 코드를 실행하면 아래와 같은 결과를 찾을 수 있습니다.
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • AMP 페이지 성능 측정 - 폭포형 차트(Waterfall Charts)
    폭포형 차트(Waterfall charts)는 브라우저가 웹 페이지 리소스를 다운로드하고 처리하는 과정을 타임 라인에 표시합니다. 항목이 다운로드 되는 순서 또는 성능 저하 지점이 어딘지 등을 시각적으로 명확하게 표현합니다. 이것은 사용자에게 좋은 웹 성능을 제공하기 위해 없어서는 안 될 필수 요소입니다.…
  • AMP 페이지 성능 측정 - 구글 페이지스피드 인사이트(Google PageSpeed Insights)
    구글 페이지스피드 인사이트(Google PageSpeed Insights)는 사용하기 쉬운 웹 성능 테스트 도구입니다. Google에서 운영하는 무료 서비스이며 사이트에 점수를 매겨 웹 페이지에 대한 빠르고 간단한 분석을 제공합니다. 입력창에 URL주소를 입력하면 테스트가 진행되며, 페이지 내 콘텐츠…
  • AMP 모바일 웹 성능 측정 - 크롬 개발자 도구 디버깅
    최신 Chrome 브라우저는 훌륭한 소프트웨어입니다. 무엇보다 프로파일링을 제공하여 웹 페이지에 대한 심층적인 분석과 성능 데이터를 제공합니다. 요즘은 Chrome 브라우저뿐만 아니라 대부분의 최신 웹 브라우저에서 개발자 도구를 사용할 수 있습니다. 이 개발자 도구를 사용하면 USB를 통해 모바일 기기를 …
  • AMP 사전 렌더링 - pre-rendering
    Pre-rendering은 사용자가 방문을 결정하기도 전에 이미 숨겨진 iframe을 사용하여 백그라운드에서 AMP를 다운로드하고 렌더링 하는 방식입니다. 가능하면 AMP는 백그라운드에서 사전에 미리 로드됩니다. Pre-rendering은 AMP 캐시에서 페이지 로드 시간을 향상시키는데 사용됩니다. …
  • AMP CSS 스타일 제한 사항
    HTML에서와 마찬가지로 CSS는 AMP에서 레이아웃 및 디자인의 핵심입니다. AMP 페이지의 사용자 지정 CSS 스타일을 추가하는 경우 일부 작업에 대한 제한 사항이 있습니다. 다음과 같은 사항을 주의해야 합니다. 모든 스타일은 문서의 head에 정의되어야 합니다. 최대 75KB의 CSS가 허용…
  • AMP 상용구 코드 - ⟨style amp-boilerplate⟩
    왜 모든 AMP 페이지에 <style amp-boilerplate> 코드를 포함해야 하는지에 대해 궁금할 수 있습니다. 이것은 AMP 페이지가 로드되는 동안 스타일이 정해지지 않은 콘텐츠가 페이지에 미치는 악영향을 방지하기 위해 AMP 프로젝트 팀이 개발한 방법으로 페이지 렌더링에 꼭 필요한…

댓글 쓰기