4

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>
1
  • What have you tried so far with coding? Paste your code please and detail your research. Nov 15 '14 at 12:30
5

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

1

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.

1

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;
}
2
  • this code and specify image size plugin does not work in my theme . can i do it manually ? and how ? Regards Sep 1 '20 at 2:09
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
    – bueltge
    Sep 1 '20 at 8:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.