web-dev-qa-db-fra.com

Spécifier les dimensions de l'image

J'ai exécuté un rapport de performances pour mon site Web (à l'aide de GTmetrix ) et j'ai réalisé que les dimensions de l'image ne sont pas définies. J'ai également omis de spécifier les attributs hauteur et largeur. Le thème avait déjà quelques images, mais elles ne sont pas spécifiées par défaut. Comment puis-je les spécifier et, plus important encore, où dois-je spécifier les attributs hauteur et largeur?

<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>
theme-developmentimagesimage-size
2
user4153112

Dans le fichier functions.php de votre thème, vous pouvez ajouter

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

Pour plus d'informations, consultez http://codex.wordpress.org/Function_Reference/add_image_size

3
jacobwarduk

Pour tous ceux qui recherchent une solution automatisée pour s’assurer que toutes les images de votre site WordPress ont les attributs width et height appropriés, le plug-in suivant s’occupe de cela pour vous: Spécifier les dimensions de l’image .

Vous pouvez consulter le code source et l’ajouter dans votre propre functions.php comme alternative:

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;
}
0
Ethan Jinks O'Sullivan

Les réponses de Jacob répondent à la moitié de la question. Pour l'autre moitié:

l'alerte GT Metrix ne signifie pas vraiment que vous devez spécifier la largeur et la hauteur dans le code HTML. Cela signifie que vous devez réserver l'espace approprié et que, lorsque l'image est chargée, le navigateur ne doit pas rediffuser et repeindre la page.

En outre, si vous codez en dur les dimensions, cela annule le comportement réactif. Si votre mise en page n'est pas réactive, c'est correct, mais si vous souhaitez conserver une certaine réactivité, vous pouvez utiliser uniquement le CSS pour obtenir les résultats.

La plupart du temps, utiliser à la fois largeur et max-width:100 fera l'affaire, mais cet article de Smashing Magazine a une technique intéressante: au lieu d'utiliser max-width: 100%, vous pouvez utiliser The Padding-Bottom Hack :

Avec la technique, nous définissons la hauteur en tant que mesure par rapport à la largeur. Le rembourrage et la marge ont de telles propriétés intrinsèques, et nous pouvons les utiliser pour créer des ratios d'aspect pour des éléments qui ne contiennent aucun contenu. Parce que le rembourrage a cette capacité, nous pouvons définir le rembourrage-bas pour qu'il soit relatif à la largeur d'un élément. Si nous définissons également la hauteur sur 0, nous obtiendrons ce que nous voulons. [...]

L'étape suivante consiste à placer une image à l'intérieur du conteneur et à vous assurer qu'elle remplit le conteneur. Pour ce faire, nous devons absolument positionner l'image à l'intérieur du conteneur, comme suit:

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

J'espère que ça aide.

0
Celso Bessa