在Magento上实现高分辨率图像’的本机响应主题
在Magento上实现高分辨率图像’的本机响应主题

在Magento上实现高分辨率图像’的本机响应主题

2014年5月27日发布 in 发展历程
2014年想象会议是史诗般的…
2014年5月20日
用Phpstorm编译Sass
2014年6月10日

随着视网膜显示器在台式机和移动设备上的越来越普遍,提供适当的高分辨率图像已成为重要的考虑因素。但是,盲目提供高分辨率图像会浪费带宽,这是一种资源短缺的资源,尤其是对于移动设备而言。

 

新的规范允许网站向浏览器提供不同分辨率的图像阵列,以便它可以根据其显示密度和带宽可用性选择最合适的图像。为此增加支持,可确保最先进的设备(及其利润丰厚的所有者)享受最佳的体验,同时不会因带宽利用率的提高而损害传统设备和用户的传统显示密度。

本机RWD主题支持

默认情况下,本机的rwd / default主题会非常适度地尝试在产品详细信息页面上提供高分辨率图像,而不尝试在产品列表页面上进行尝试。

产品列表页面加载的保守图像不得超过其最大渲染大小。由于在单个类别页面上可以加载许多图像,因此为每种产品加载比必要分辨率更高的图像会导致带宽显着增加,而只会改善高密度显示器的体验。

由于产品图像在产品详细信息页面上的重要性,因此,产品详细信息图库会故意加载1.5倍的图像。产品详细图片通常很少,因此这种方法不需要过多的额外带宽。额外的.5x可以为较低密度的显示器留出一些额外的分辨率,并在中途达到较高密度的显示器,而这一切不会使通常定制的产品媒体模板和javascript变得混乱或复杂。

添加对高分辨率图像的支持

为了为具有前瞻性的浏览器提供本机支持,同时又为旧版浏览器保持高性能的向后兼容性, 图片填充 polyfill是一个简单的选择。该polyfill使用标准的DOM结构来表示图像选择,以便可以在可用的情况下使用本机浏览器支持,并在必要时填补空白。

该polyfill支持两种标准标记模式:

  • 具有srcset和大小的img元素
  • 带有源节点的图片元素

虽然像素提供了令人难以置信的灵活性,但是具有适当1x和2x srcset值的标准img可以大大降低影响。

添加picturefil polyfill

下载picturefill.js之后,移至/ js目录以使所有主题可用。然后,在主题的适当布局XML更新文件中添加几行,以将其包含在所有页面上。

app / design / frontend / rwd / picturefill / layout / picturefill.xml

布局XML更新屏幕截图

产品列表

产品列表图像非常简单。默认情况下,它们是一个简单的img元素,在有条件的网格/列表的两边重复。

rwd / default / template / catalog / product / list.phtml第51-62行

产品列表图像代码–本机

正如评论所指出的,图像的渲染尺寸永远不会超过400px,因此选择了合理且带宽友好的最大300px。

虽然这对于低密度显示器是可以接受的,但在高密度显示器上却显示出小巧的分辨率。如您在下面的视网膜iPhone屏幕快照中所见(在Photoshop中放大了1.5倍)。

产品列表放大屏幕截图–本机

由于有效地使用了一个简单的img元素,因此这是实现1x / 2x图像的教科书示例。较低密度的显示已被考虑在内,因此1x图像仍然是旧的300px标准。向srcset添加值以进行高密度显示,就像另一个调用Magento图像调整大小助手一样简单,要求提供600px的图像。

app / design / frontend / rwd / picturefill / template / catalog / product / list.phtml第25-33行 产品列表图像代码– 图片填充

这种简单的变化可以使高密度显示器上的图像清晰得多。下面的视网膜iPhone屏幕快照(在Photoshop中放大了1.5倍)展示了这一改进。

产品列表放大截图– 图片填充

此用法可以直接复制到列表/网格条件的另一侧。

产品明细

产品详细信息图像仅稍难一些。由于具有Magento的图片库功能,产品媒体模板具有一个用于基本图片的img元素,随后是每个图片库图片。

默认情况下,图像的加载分辨率不高于1200px,大约是实际最大渲染大小的1.5倍。

app / design / frontend / rwd / default / catalog / product / view / media.phtml第35-67行

产品详细信息媒体代码-本机

同样,由于使用包含简单img元素的简单DOM结构,切换到响应图像并不是火箭科学。经过实验后,图像的渲染绝不会超过700px x 700px。这给出了基线的目标,较低的密度,目标尺寸的1倍,目标1400像素的2幅图像-基线尺寸的两倍。

最后,必须选择缩放大小。提升缩放,默认情况下使用的缩放库每个img元素仅支持一个缩放图像。为了为所有显示密度提供足够大的图像,必须选择比高密度图像尺寸(1400px)大得多的尺寸。该决定取决于可用的产品图片的原始分辨率-在此示例中,任意选择1800px。

app / design / frontend / rwd / picturefill / template / catalog / view / media.phtml第10-59行

产品详细信息媒体代码– 图片填充

借助主要产品详细信息媒体图像,更新画廊图像缩略图变得轻而易举。只需切换到srcset,从Magento的图像助手中为2x图像请求两倍的图像大小,然后将图像大小移动到变量中即可,以达到很好的效果。

之前和之后:

app / design / frontend / rwd / default / template / catalog / product / view / media.phtml第87-92行

产品图库缩略图–本机

app / design / frontend / rwd / picturefill / template / catalog / product / view / media.phtml第79-86行

产品图库缩略图– 图片填充

产品图片注意事项

没有好的行为会受到惩罚,响应式图像实现也不会受到惩罚。为了实际将高分辨率图像提供给高密度显示器,原始上传的产品图像必须是可用的最高分辨率。特别是,它们必须至少为〜2000px x〜2000px –足以满足产品细节缩放图像的分辨率要求。

从这往哪儿走

本文仅涉及表面问题–更灵活的像素支持可用于各种复杂的图像用途,例如

  • 提供不同格式的图像以利用最新标准
  • 不同渲染分辨率下产品图像的艺术指导

此演练的代码可在 的GitHub 并可以通过modman轻松安装-明智地使用它。

该帖子是Classy Llama中的第一篇’在Magento上的RWD上的技术博客系列。

我们亲身体验了RWD主题的发展,并希望与您分享我们的经验。在接下来的几周中,您可以期待学习以下所列主题:

在PhpStorm,Netbeans或Sublime中使用源地图支持编译Compass–新的Magento响应主题使用Compass将Sass编译为CSS。在本文中,学习如何在您喜欢的IDE中更改Sass文件时自动对其进行编译。

Sass部署结构–在本文中,我们将介绍Classy Llama如何将Sass编译结合到我们的开发和部署工作流程中。

对您网站上的自适应图像实现感兴趣?让我们知道 联系页面.

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日

Covid世界中的假日销售:应对挑战

毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 […]
2020年8月7日

涡轮增压ZZPerformance的付费搜索

2020年7月30日

Intermix Beats M1 End of Life with 优雅的骆马Accelerator