WordPress.org

Forums

How to Specify image dimensions? (7 posts)

  1. wahab123pk
    Member
    Posted 1 year ago #

    When anyone or me enter my blog address and open it then it takes 2 to 3 seconds delay and while checking my Blog performance like google page speed and yslow there are some options which were highlighted like Specify image dimensions and Serve scaled images you can also check my Blog performance from http://www.gtmetrix.com
    I want to ask if anybody tell me that how to overcome these highlighted issues my be there would be any chance to increase my Blog performance.
    My Blog address is --> dramastreaming.com

  2. LapanWebsite
    Member
    Posted 1 year ago #

    Hi, wahab123pk.

    If you have in css dimensions of lets say class="thumbnail-new"

    And, than you have:

    .thumbnail-new {
    height: 180px;
    width: 220px;
    }

    It is good to add this size 180 height and 220 width in functions.php to be cropped, even better is to force cropping with "true", dimensions wont vary.

    So add same dimensions in your functions.php (use child theme always)
    add_image_size( 'thumbnail-new', 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode

    More about Function Reference/add image size here: http://codex.wordpress.org/Function_Reference/add_image_size

    After that, you have to call inside php code that thumbnail-new instead of old named size.

    By doing this, your css will fit your image sizes.

  3. CrouchingBruin
    Member
    Posted 1 year ago #

    If you don't want to go through the trouble of creating a child theme, just make sure to specify your image dimensions in your CSS or inline in your page/post (Specify image dimensions), and use only images that are the size you need. As LapanWebsite alluded, if you are displaying a thumbnail that's only 200x150 pixels on the page, don't upload a 1024x768 image and use width & height to make it smaller; instead, resize the image on your computer, and upload it with a different name, like mypicture_thumb.jpg (Serve scaled images. Also, if possible, use lossy image formats like jpg instead of png, unless you need a transparency layer.

  4. Madzoo
    Member
    Posted 1 year ago #

    Hi,

    I kindda have the same problem. My website is quite slow loading. I run it through GTmetrix and I have a "F" in specify image dimension.

    In my media library, each photo has its own dimension. IT's written. Do I have to go into the code to specifically write "width" and "height" to improve this part?

    I have been looking to fix this issue since quite some time now and I am stuck.

    Thanks in advance for the help.

  5. matSatler
    Member
    Posted 11 months ago #

    I have the same problem GTmetrix gave me an "F" in specify image dimension.
    How do I correct this without editing css for each image individually.
    my site matsatler

    I would appreciate any help on this. Thanks

  6. CrouchingBruin
    Member
    Posted 11 months ago #

    Hi, Mat:

    Did you take a look at what images GTMetrix was complaining about? The warning message on GTMetrix says, "The following image(s) are missing width and/or height attributes," and then it lists all of the images which are missing height and width attributes (which are different from CSS height & width properties). Almost all of the images listed are the small profile icons in the Facebook widget in the sidebar, and they do have CSS width & height attributes as defined by the class _rw. If you hover over the link that reads "What does this mean?" then click the link that reads "Read more," it says:

    Page Speed currently only detects image dimensions that are specified via the image attributes. If you are specifying the dimensions via CSS, then you can safely ignore this recommendation.

    Since all of those images do have a CSS width & height properties, you can ignore this error. Your page loads pretty fast, by the way.

  7. matSatler
    Member
    Posted 11 months ago #

    Hi CrouchingBruin,

    Thank you for your fast and insightful explanation - that was really helpful!

    Best,

    Mat

Topic Closed

This topic has been closed to new replies.

About this Topic