performance - 如何克服 "Specify image dimensions"gtmetrix 性能摘要消息？

Question

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

我已经使用 css 为它们分配了高度和宽度。当我在 getmetrix 中检查网站的性能时，我收到了指定图像尺寸消息以提高性能。

我怎样才能克服这个问题？

Answer 1

您应该在三个地方管理图像尺寸

1) 输出产品图像的任何地方(list.phtml、media.phtml，可能是 view.phtml，具体取决于您的模板)。

<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66); ?>" width="66" height="66" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

2) 如果您在 layout.xml 文件中使用标注图像。您需要像这样在 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>

然后像这样在 callout phtml 中呈现它们:

<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;" />

3) 在cms静态 block 中

我在这里写了一篇如何做 #2 的文章 How to add image dimensions in Magento layout files