Specify image dimensions

Question

I ran a performance report for my website (using GTmetrix) and I realized the image dimensions are not set, and I missed specifying the height and width attributes. The theme already had some images, but they are not specified by default. How can I specify them and more importantly, where do I specify the attributes height and width?

<div class="thumb">
    <a class="clip-link" data-id="1" title="Hello world!" href="http://example.com/hello-world/">
    <span class="clip">
        <img src="http://example.com/wp-content/themes/beetube/images/nothumb.png" alt="Hello world!" />
        <span class="vertical-align"></span>
    </span>

Answer 1

In your theme's functions.php file you can add

add_image_size( 'thumb', 600, 350, true );
add_image_size( 'thumbnil', 600, 350, true );
add_image_size( 'medium', 600, 350, true );
add_image_size( 'large', 600, 350, true );
add_image_size( 'post-thumbnail', 600, 350, true );

add_image_size( '{custom-image-type}', 600, 350, true );

For more information have a look at http://codex.wordpress.org/Function_Reference/add_image_size

Answer 2

Jacob's answers address half the question. For the other half:

the GT Metrix alert doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.

Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.

Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :

With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them. Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]

The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:

.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%;
}

Hope it helps.

Answer 3

For anyone else looking for an automated solution to ensure all images throughout your WordPress site have the appropriate width and height attributes set, the following plugin will take care of it for you: Specify Image Dimensions.

You can take a look at the source code and add it in your own functions.php as an alternative, like so:

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;
}