您需要在WP 4.4中使用响应图像。虽然还没有太多文档,但请参阅这篇WP核心文章Responsive Images in WordPress 4.4.
下面是他们给出的例子。
<?php
$img_src = wp_get_attachment_image_url( $attachment_id, \'medium\' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, \'medium\' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">
如果您选择延迟加载路线,请查看
lazySizes -
bgset plugin /
DEMO. 这将使您的代码减少到:
<?php
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, \'medium\' );
?>
<div class="lazyload" data-bgset="<?php echo $img_srcset; ?>" data-sizes="auto">
这种方法可以确保较小的屏幕大小不需要完整的图像,从而减少页面负载和网站速度。