Learning AMP: Setting up SRCSET and Sizes for AMP-IMG

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Useful links:

An example of AMP-IMG with SRCSET and Sizes

<amp-img 
class="cover"
layout="fill"
src="<?php echo $image[0]; ?>"
srcset="<?php echo $image_small[0]; ?> 375w,
<?php echo $image_medium[0]; ?> 768w,
<?php echo $image_large[0]; ?> 1024w,
<?php echo $image[0]; ?> 1920w"
alt="<?php echo $alt;?>"
sizes="(min-width: 1024px) 25vw, 100vw"
</amp-img>

Explanation of AMP-IMG SRCSET

<amp-img 
class="cover"
layout="fill"
src="<?php echo $image[0]; ?>"
srcset="<?php echo $image_small[0]; ?> 375w,
<?php echo $image_medium[0]; ?> 768w,
<?php echo $image_large[0]; ?> 1024w,
<?php echo $image[0]; ?> 1920w"
alt="<?php echo $alt;?>">
</amp-img>

Explanation of AMP-IMG Sizes

<amp-img 
class="cover"
layout="fill"
src="<?php echo $image[0]; ?>"
srcset="<?php echo $image_small[0]; ?> 375w,
<?php echo $image_medium[0]; ?> 768w,
<?php echo $image_large[0]; ?> 1024w,
<?php echo $image[0]; ?> 1920w"
alt="<?php echo $alt;?>"
sizes="25vw">
</amp-img>
= <screen-width> / 100 * 25
Image for post
Image for post
centrumhotels.com on 1920px desktop screen
Image for post
Image for post
centrumhotels.com on 960px desktop screen
sizes="(min-width: 1024px) 25vw, 100vw"
Image for post
Image for post
centrumhotels.com on 960px desktop screen

Adding a Breakpoint to AMP-IMG Sizes

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store