雅各布的回答解决了一半的问题。对于另一半：

GT Metrix警报并不意味着您需要在html中指定宽度和高度。它的意思是，你必须保留适当的空间，当图像加载时，浏览器不必回流和重新绘制页面。

此外，如果对维度进行硬编码，则会破坏响应行为。如果您的布局没有响应性，那也没关系，但是如果您想保持一定的响应性，您可以只使用CSS来实现结果。

大多数情况下，使用宽度和max-width:100 将完成工作，但是this post Smashing Magazine提供了一个有趣的技巧：不使用最大宽度：100%，您可以使用Padding-Bottom-Hack：

使用该技术，我们将高度定义为相对于宽度的度量。Padding和margin有这样的内在属性，我们可以使用它们为其中没有任何内容的元素创建纵横比。因为padding具有此功能，所以我们可以将padding bottom设置为相对于元素的宽度。如果我们也将height设置为0，我们将得到想要的。[…]

下一步是在容器内放置一个图像，并确保它填满容器。为此，我们需要将图像绝对放置在容器内，如下所示：

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

对于任何其他寻求自动化解决方案的人，以确保整个WordPress站点中的所有图像都具有适当的width 和height 属性集，以下插件将为您处理它：Specify Image Dimensions.

您可以查看源代码并将其添加到自己的源代码中functions.php 另一种选择是：

add_action( \'plugins_loaded\', \'factmaven_spcimg_buffer\', 10, 1 );

function factmaven_spcimg_buffer() { // Enable output buffering for our function
    ob_start( \'factmaven_spcimg_specify_image_dimensions\' );
}

function factmaven_spcimg_specify_image_dimensions( $content ) { // Automatically insert width and height attributes
    if ( is_admin() && ( ! defined( \'DOING_AJAX\' ) || ! DOING_AJAX ) ) { // Don\'t run the function in the admin panel
        return $content;
    }

    preg_match_all( \'/<img[^>]+>/i\', $content, $images );
    if ( count( $images ) < 1 ) { // Don\'t change content if there are no images
        return $content;
    }

    foreach ( $images[0] as $image ) {
        preg_match_all( \'/(src|alt|title|class|id|width|height)=("[^"]*")/i\', $image, $img );
        if ( !in_array( \'src\', $img[1] ) ) {
            continue;
        }
        if ( !in_array( \'width\', $img[1] ) || !in_array( \'height\', $img[1] ) ) {
            $src = $img[2][array_search( \'src\', $img[1] )];
            $alt = in_array( \'alt\', $img[1] ) ? \' alt=\' . $img[2][array_search( \'alt\', $img[1] )] : \'\';
            $title = in_array( \'title\', $img[1] ) ? \' title=\' . $img[2][array_search( \'title\', $img[1] )] : \'\';
            $class = in_array( \'class\', $img[1] ) ? \' class=\' . $img[2][array_search( \'class\', $img[1] )] : \'\';
            $id = in_array( \'id\', $img[1] ) ? \' id=\' . $img[2][array_search( \'id\', $img[1] )] : \'\';
            list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\\"", "" , $src ) );

            $image_tag = sprintf( \'<img src=%s%s%s%s%s width="%d" height="%d" />\', $src, $alt, $title, $class, $id, $width, $height );
            $content = str_replace( $image, $image_tag, $content );
        }
    }
    return $content;
}