AMP와 비 AMP와의 가장 분명한 차이점은
amp-img 태그를 사용하여 이미지 코드를 작성하는 것입니다. 페이지가
유효성 검사를 통과하려면 모든 img 이미지 태그가
amp-img로 바뀌었는지 확인합니다.
다음은 AMP에서 올바른 이미지 코드 작성 예시입니다.
<div>
<amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
</div>
참고: 원본 이미지를 가져 오지 않고도 가로 세로 비율을 알 수 있도록 width 및 height 속성을 작성하는 것이 중요합니다.
fill, fixed, fixed-height,
nodisplay, responsive 및 intrinsic를
포함한 여러 레이아웃 옵션이 지원됩니다. 가장 일반적으로 사용되는 것은
responsive 및 intrinsic이며 이미지를 화면 크기에
맞게 조정할 수 있습니다.
여기에서 amp-img의 전체 설명과 예제를 볼 수 있습니다.
noscript 태그 사용의 중요성
이 태그의 사용법은 사용자의 브라우저에서 자바스크립트가 비활성화된 경우 콘텐츠를 표시하는 것입니다.
Blogger의 경우, 이 태그는 홈페이지나 PopularPosts 및 Related Posts와 같은 다른 위젯에 게시물의 썸네일 이미지를 표시하는 데 필요합니다. 예를 들면 다음과 같습니다.
<div>
<amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
<noscript><img alt='image_title_here' src='image_url_here'/></noscript>
</div>