Performance 如何克服；指定图像尺寸”；gtmetrix性能摘要消息？

我正在使用magento应用程序。我正在导航菜单中显示类别图像

我使用css为它们指定了高度和宽度。当我在getmetrix中检查站点的性能时，我会收到Specify image dimensions消息以提高性能

---

如何克服这个问题？

您必须在html中指定图像维度

有三个地方需要管理图像维度

1） 输出产品图像的任何位置（list.phtml、media.phtml，可能还有view.phtml，具体取决于模板）

helper（'catalog/image'）->init（$this->getProduct（），'thumbnail'，$\u image->getFile（））->调整大小（66）；？>“width=“66”height=“66”alt=”“/>

2） 如果在layout.xml文件中使用callout图像，则需要在xml文件中设置图像尺寸，如下所示：

<reference name="left">
        <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
            <action method="setImgSrc">
                <src>images/media/col_left_callout.jpg</src>
            </action>
            <action method="setImgAlt" translate="alt" module="catalog">
                <alt>Flooring Supplies Brands</alt>
            </action>
            <action method="setImgHeight">
                <width>225</width>
            </action>
            <action method="setImgWidth">
                <width>195</width>
            </action>
            <action method="setLinkUrl">
                <url>brands.html</url>
            </action>
        </block>
    </reference>

您必须根据您的高度和宽度重新调整图像的大小，因为如果原始图像的宽度为800px，高度为300px，并且您使用css指定了这样的宽度：200px和高度：50px，但它需要原始图像hw，而不是css hw，页面加载时间将更改为您的h*wis，那么还有其他相同的选择。因为类别图像可能大小不同给定高度和宽度可能会影响图像质量。通过jquery
$（'img'）。每个（函数（）{var findImgWidth=$（this.width（）；var findImgHeight=$（this.height（）；$（this.attr（'width'，findImgWidth）；$（this.attr（'height'，findImgHeight）；}）
未测试。设置这些属性的目的是加快浏览器上的加载时间。此代码是否会进一步延迟？此外，如果在页面加载之前运行javascript，gtmetrix会生气。
<reference name="left">
        <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
            <action method="setImgSrc">
                <src>images/media/col_left_callout.jpg</src>
            </action>
            <action method="setImgAlt" translate="alt" module="catalog">
                <alt>Flooring Supplies Brands</alt>
            </action>
            <action method="setImgHeight">
                <width>225</width>
            </action>
            <action method="setImgWidth">
                <width>195</width>
            </action>
            <action method="setLinkUrl">
                <url>brands.html</url>
            </action>
        </block>
    </reference>

<img src="<?php echo $this->getSkinUrl('images/media/col_right_callout.jpg') ?>" width="<?php echo $this->__($this->getImgWidth()) ?>" height="<?php echo $this->__($this->getImgHeight()) ?>" alt="<?php echo $this->__($this->getImgAlt()) ?>" style="display:block;" />