0

I'm trying to specify the dimensions of some images on my site to optimize page speed. I'm working with the Pagelines Pro theme for Wordpress, and I have tried add this custom CSS to define the img size, but Google's page speed doesn't seem to take this into account. I would be able to set the width and height of the img tags themselves, but I'm not exactly sure how (or where) to do this, as I'm using CloudFront as my CDN.

Any guidance would be greatly appreciated.

For my specific example, here are the details.

My site: http://www.mybringback.com

I'm trying to specific the img size of the branding logo on the top left.

I'm tried this by adding this custom css:

.navbar .plbrand img {height:27px;width:160px;}

However, PageSpeed isn't recognizing this change: http://gtmetrix.com/reports/www.mybringback.com/BI93pLK1

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
travis
  • 159
  • 3
  • 14

1 Answers1

0

CSS image size still grabs the full size image, it just shrinks the full size one down to your set size, so of course Google won't see a page speed increase.

You'll have to look at using WordPress's built in image cropping/resizing functions

EDIT:

For your case, I think it's looking for inline attributes. `

Xhynk
  • 13,513
  • 8
  • 32
  • 69
  • Thanks for responding Alex. However, I'm not trying to resize the image, I'm only looking to specify the dimensions. Would still need to use the add_image_size() method? – travis Oct 12 '12 at 04:27
  • If you only define the dimensions, that's only scaling the big image. A `5megabyte` image is still `5mb` whether it's 10,000px wide or 100px wide, since it's just the big image, but squished into a smaller space. You'd have to use the `add_image_size()` or upload a smaller size to see any performance increase in page speed. if you want 100px by 100px, but have a 10,000px wide image, it's better to shrink that (for page speed) to 100px, than just modify the dimensions to 100px (cramming the 10,000 into 100) – Xhynk Oct 12 '12 at 04:35
  • Yea, I understand that, but I'm not trying to resize an image. The original image is 160px, by 27px, and I want to specify these attributes within the img tags, but I don't know where to find the place this code is generated. – travis Oct 12 '12 at 05:20
  • Ah. Umm, it's probably looking for inline attributes. ` – Xhynk Oct 12 '12 at 05:26
  • Correct, that's what I'm asking. Where can I find this image placement within the theme, so I specify the img's dimensions ("inline attributes"). Would Firebug show me where this img is being generated in php, or how do I go about finding it within the theme. – travis Oct 12 '12 at 08:20
  • 1
    No it wouldn't unfortunately. You'd have to root around yourself. Odds are it's in "header.php". If it's not, you could download your theme and open it in dreamweaver. If you hit ctrl+f, you can use the find tool, and search "in folder" and select your theme, and search for "logo" – Xhynk Oct 12 '12 at 18:00