Error: Mismatched width/height parameters (Rule: Optimize images)

[GoogleCodeExporter]

I had started the performance analyzing for the page at [0]
I don't, if the problem occurs also at other pages. I had tested this
add-on only on few pages and so far, this was the only occurence.

At the end of the listed information, the message [1] was given.

I'm using Firefox 3.5.1 with among others your Firebug (version 1.4.0)
add-on Page Speed 1.0.1.1 on my Windows Vista machine.

I hope these information could help you fix the problem

Regards, Patrick

[0] http://www.kaufda.de/Berlin
[1] Sorry, there was an error while running this rule. Please file a bug
with these details: Error: Mismatched width/height parameters!
(chrome://pagespeed/content/imageCompressionLint.js:101)

Original issue reported on code.google.com by Patrick....@gmail.com on 21 Jul 2009 at 10:30

[GoogleCodeExporter]

Original comment by sker...@google.com on 21 Jul 2009 at 1:31

• Changed state: Accepted
• Added labels: Priority-High
• Removed labels: Priority-Medium

[GoogleCodeExporter]

The image compression rule looks at each img tag in the document, and checks 
properties naturalWidth and naturalHeight.  These properties are supposed to 
give the 
width and height of the actual image, but they are giving different numbers on 
different img tags that refer to the same file.  The img tags have different 
styles.

   On the page given in this bug, that file happens to be 
http://maps.gstatic.com/intl/de_ALL/mapfiles/transparent.png .  It is a 1x1 
image, 
but naturalWidth and naturalHeight are set to many different numbers.

   One solution to this bug is to get the size of an image like this:

function getImageSize(url, continuation) {
  var img = new Image();
  img.src = url;
  img.onload = function() {
    continuation(this.width, this.height);
  }
}

This method seems to return correct image sizes.  However, it might cause the 
image 
to be re-fetched (if it is not in cache).

   I also looked at intercepting the image download in the component collector.  If 
we could see the image before styles are applied, than we could get the real 
size.  
The size always seems to be 0x0 as the image is fetched (which I think means it 
was 
not downloaded yet).  

   Bryan, you know the component collector code better than I do.  Do you think it is 
possible to have it get image sizes as images are downloaded?

Sam

Original comment by sker...@google.com on 21 Jul 2009 at 5:12

[GoogleCodeExporter]

I've tried the http://www.kaufda.de/Berlin with the latest development 
PageSpeed. 
This is still a problem despite some of the rework of the imageScaling rule.

r394 | avd@google.com | 2009-12-07 14:30:09 -0500 (Mon, 07 Dec 2009) | 4 lines
Split image compression and html image scaling into 2 rules.

Sorry, there was an error while running this rule. Please file a bug with these
details: Error: Mismatched width/height parameters!
(chrome://pagespeed/content/imageScalingLint.js:58)

I propose that if there is not a simple solution we should just keep track of
"multi-sized" images.  Mark the scaleData as multiSized, and the have 
isResizable
return false.

Original comment by jglasgow@google.com on 8 Dec 2009 at 10:56

[GoogleCodeExporter]

r421 | avd@google.com | 2009-12-09 14:23:50 -0500 (Wed, 09 Dec 2009) | 4 lines

Handle image size mismatches in image scale rule gracefully (issue 97)

r=mdsteele

Original comment by a...@google.com on 9 Dec 2009 at 7:24

• Changed state: Fixed