Image dimensions

Support
#1

I am using the agency template of X theme . Under gtmetrix I have this issue/ advice

(7% reduction) after compression. See optimized version.
Specify image dimensions
A (99)
IMAGES MEDIUM
What’s this mean?
The following image(s) are missing width and/or height attributes.

https://mydomain.com/logo.png (Dimensions: 460 x 116)

SO my question is if I put the dimensions (460X116) would I have some side effect ? I mean it would not be responsible anymore or anything else ? Where I must put this dimensions ? in the cornerstone , envira, visual composer ,in the gallery ? or in which section ?

WHich is your advice about using the dimensions of the images ? thanks

#2

Hi There,

Can you please send us your website URL so that we can give you a proper answer.
Please send it in a secure note.

Thanks

#3

sure here you have

#4

Hi @Borislav.VD

I suggest using this plugin to do that:

Thanks.

#5

Could be possible to give me an alternative ? the plugin is not updated for a year and is not tested . How could be done avoiding it s use because of obvious ¨danger¨ ( not supported, not updated,etc )

#6

Hi @Borislav.VD

I’ve tested it on my localhost test site before suggesting it to you and it seems to be working as it should.

The plugin code is so simple that can be added to functions.php file in your child theme directly, the code is:

class Fact_Maven_Specify_Image_Dimensions {

    public function __construct() {
        # Specify image dimensions
        add_action( 'wp_loaded', array( $this, 'image_dimensions' ), 10, 1 );
    }

    public function image_dimensions() {
        # Enable output buffering
        ob_start( function( $content ) {
            # If in the admin panel, return
            if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
                return $content;
            }
            # Find all image tags
            preg_match_all( '/<img[^>]+>/i', $content, $images );
            # If there are no images, return
            if ( count( $images ) < 1 ) {
                return $content;
            }

            foreach ( $images[0] as $image ) {
                # Match all image attributes
                $attributes = 'src|srcset|longdesc|alt|class|id|usemap|align|border|hspace|vspace|crossorigin|ismap|sizes|width|height';
                preg_match_all( '/(' . $attributes . ')=("[^"]*")/i', $image, $img );
                # If image has a 'src', continue
                if ( ! in_array( 'src', $img[1] ) ) {
                    continue;
                }
                # If no 'width' or 'height' is available or blank, calculate dimensions
                if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) || ( in_array( 'width', $img[1] ) && in_array( '""', $img[2] ) ) || ( in_array( 'height', $img[1] ) && in_array( '""', $img[2] ) ) ) {
                    # Split up string of attributes into variables
                    $attributes = explode( '|', $attributes );
                    foreach ( $attributes as $variable ) {
                        ${$variable} = in_array( $variable, $img[1] ) ? ' ' . $variable . '=' . $img[2][array_search( $variable, $img[1] )] : '';
                    }
                    $src = $img[2][array_search( 'src', $img[1] )];
                    # If image is an SVG/WebP with no dimensions, set specific dimensions
                    if ( preg_match( '/(.*).svg|.webp/i', $src ) ) {
                        if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) || ( in_array( 'width', $img[1] ) && in_array( '""', $img[2] ) ) || ( in_array( 'height', $img[1] ) && in_array( '""', $img[2] ) ) ) {
                            $width = '100%';
                            $height = 'auto';
                        }
                    }
                    # Else, get accurate width and height attributes
                    else {
                        list( $width, $height ) = getimagesize( str_replace( "\"", "" , $src ) );
                    }
                    # Recreate the image tag with dimensions set
                    $tag = sprintf( '<img src=%s%s%s%s%s%s%s%s%s%s%s%s%s%s width="%s" height="%s">', $src, $srcset, $longdesc, $alt, $class, $id, $usemap, $align, $border, $hspace, $vspace, $crossorigin, $ismap, $sizes, $width, $height );
                    $content = str_replace( $image, $tag, $content );
                }
            }
            # Return all image with dimensions
            return $content;
        } );
    }
}
# Instantiate the class
new Fact_Maven_Specify_Image_Dimensions();

If you don’t have a child theme activated, please follow this guide:

Thanks.

#7

thank you :slight_smile: Great support as always . I prefer always to use only updated to the date plugins because of future problems in my website . using the functions.php of my child theme is better . Kind regards thank you for your time and professional support ! Kind regards !

#8

You are welcome :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.