How to Specify image dimensions?

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: https://codex.www.ads-software.com/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.

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 200×150 pixels on the page, don’t upload a 1024×768 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.

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.

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

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.

Hi CrouchingBruin,

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

Best,

Mat