diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php
index 2c681fc29..756fc16e6 100644
--- wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php
+++ wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php
@@ -78,7 +78,15 @@
 
 			<div class="theme-info">
 				<?php if ( $theme->screenshot_url ) { ?>
-					<div class="screenshot"><img src="<?php echo esc_url( $theme->screenshot_url ); ?>?w=1142&strip=all" alt=""/></div>
+					<div class="screenshot">
+						<picture>
+							<source media="(min-width: 782px)" srcset="{{ data.screenshot_url }}?w=576&strip=all, {{ data.screenshot_url }}?w=1152&strip=all 2x">
+							<source media="(min-width: 481px) and (max-width: 782px)" srcset="{{ data.screenshot_url }}?w=700&strip=all, {{ data.screenshot_url }}?w=1400&strip=all 2x">
+							<source media="(min-width: 401px) and (max-width: 480px)" srcset="{{ data.screenshot_url }}?w=420&strip=all, {{ data.screenshot_url }}?w=840&strip=all 2x">
+							<source media="(max-width: 400px)" srcset="{{ data.screenshot_url }}?w=344&strip=all, {{ data.screenshot_url }}?w=688&strip=all 2x">
+							<img src="{{ data.screenshot_url }}?w=1200&strip=all" srcset="{{ data.screenshot_url }}?w=2400&strip=all 2x" alt="">
+						</picture>
+					</div>
 				<?php } else { ?>
 					<div class="screenshot blank"></div>
 				<?php } ?>
diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php
index 69d98f010..d933005b6 100644
--- wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php
+++ wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php
@@ -57,7 +57,15 @@
 
 			<div class="theme-info">
 				<# if ( data.screenshot_url ) { #>
-				<div class="screenshot"><img src="{{ data.screenshot_url }}?w=1142&strip=all" alt=""/></div>
+				<div class="screenshot">
+					<picture>
+						<source media="(min-width: 782px)" srcset="{{ data.screenshot_url }}?w=576&strip=all, {{ data.screenshot_url }}?w=1152&strip=all 2x">
+						<source media="(min-width: 481px) and (max-width: 782px)" srcset="{{ data.screenshot_url }}?w=700&strip=all, {{ data.screenshot_url }}?w=1400&strip=all 2x">
+						<source media="(min-width: 401px) and (max-width: 480px)" srcset="{{ data.screenshot_url }}?w=420&strip=all, {{ data.screenshot_url }}?w=840&strip=all 2x">
+						<source media="(max-width: 400px)" srcset="{{ data.screenshot_url }}?w=344&strip=all, {{ data.screenshot_url }}?w=688&strip=all 2x">
+						<img src="{{ data.screenshot_url }}?w=1200&strip=all" srcset="{{ data.screenshot_url }}?w=2400&strip=all 2x" alt="">
+					</picture>
+				</div>
 				<# } else { #>
 				<div class="screenshot blank"></div>
 				<# } #>