我见过几个帖子,在那里,网友显然不太确定设立图片的最佳方式,所以我想把这些问题放在一起来讲,如果有团队先要绑定它或者添加它到常见问题或者移动它到其他地方,那么请这样做吧。这是针对真正的初学者(因为他们有麻烦),所以以下内容看起来很简单,但要记住,我们都曾经一无所知!
在我深入讲解之前,我们需要先了解一些图片的理论。如果你上传的是摄影类型的图片,格式应为JPG;如果你正在使用的是剪辑艺术风格的图片,图像应该是GIF或PNG格式。
•在jpg格式中,没有透明的背景,但.gif或.png格式中有。
•切勿保存照片为.GIF格式——不仅会失去了质量,而且由于数据的存储方式为GIF,文件的大小将远远超过原本的大小!
•图像文件的大小完全依赖于物理尺寸,保存的格式类型和应用的压缩量。你可能听说过图像分辨率——这个与文件大小无关(但黑客可以在打印输出质量上做很多事情,这完全是另一个话题!)
•这些文件类型的使用被称为“有损”压缩,即压缩文件时,一些信息将被丢弃,此信息将无法恢复!因此,你要从一个好的图像副本开始,从不压缩原始图像。
文件大小仍然是一个重要的问题——随着宽带的普及,大多数人连接到网络仍然使用拨号连接,除非你的目标是专业的宽带市场,应该尽量保持与文件大小相称的质量的最低限度,以提高客户的体验。
Zen Cart 和图像处理
Zen Cart的显示图片有3个大小——最小的(缩略图)显示在各个目录,中图通常在产品信息页面上使用,而大版本(大图)则可通过访问产品信息页链接看到。
你可以为不同的产品类型设置不同的大小,但我建议,为了网站统一起见,设置所有图片大小为最小值好了。
你可以去到admin>configuration>images设置缩略图和中图的图像大小。(稍后我再说说大图)如果你想将所有的图像设置为相同宽度,但高度可能会有所不同,那么根据你计算好的值设置宽度,同时确保高度为0,并确保计算图像大小被打开。相反,如果你想所有的图像在同一高度,那么设置宽度为0,高度为你需要的数字。
现在,可以通过FTP上传照片到图片文件夹,让编码完成所有的工作 - 但这通常离你的完美结果有点距离,虽然你没有在ZenCart上花费任何钱,但你已经投入相当多的时间在设置方面。那么现在为什么这么糟糕呢?
为什么(通常)结果不完美呢?我们一直在寻找的理想是能够迅速显示一个清晰的图像,但在ZenCart里使用各种大小只为了加载一个图像,通常是一个或另一个或两者的妥协。
例如,如果你只加载在100个像素宽的小图像,而你的产品信息页面中图像宽度为400,那么你的图像的质量将会降低(还记得“有损”压缩吗?)当代码扩大到它4倍的规模。
另一方面,如果你只上传400pixels宽的大文件,那么,虽然ZenCart将展示他们在100pixels宽的小图像大小,图像文件的大小将不会减少,因此,如果你的大图像25KB,那么将你的缩略图,10页的缩略图就是250KB,这将开始减慢你的拨号上网用户抓取信息。
为了避免这些问题,解决办法是建立3套图像 - 小型,中型和大型,压缩并保存在你想显示他们的尺寸,然后上传到图像, images/medium and
images/large directories。
如果你有数以百计的图像,这似乎是一项艰巨的任务,但它不会像它听上去那么糟糕。任何像样的图像编辑应用程序,将有一些批量处理系统(针对多个文件进行相同的动作)。
注意:基本的“图像”(缩略图,正常大小的图像),应通过admin上传,在通常的方式,通过产品编辑画面,然后应当用于通过FTP上传_MED和_LRG图像,就像前面段提到的。
ZenCart优化图像
从决定图片的显示尺寸开始
注意:如前所述,你无法在ZenCart里设置大图的尺寸 – 也无法在1.2.1d档里设置——但它会显示你上传的尺寸,你需要打开窗口调整JavaScript文件到你想要的尺寸。需要编辑的文件是/includes/modules/pages/product_info/jscript_main.php。在功能popupWindow(URL)改变宽度和高度=你的尺寸。(你还可以选择要不要设置滚动条,scrollbars=no 或者
scrollbars=yes),然后保存文件到includes/modules/YOUR_TEMPLATE/pages/product_info/
。
不能选择尺寸比原来大的(如果必须扩大,图像会失去质量)。多数情况下,设置大图的像素为400或者500宽 应该足够,但如果你用数码相机工作,你可能要选择尺寸是成正比的图片,如480或640相机输出。
事实上,假设你正在用数码相机拍摄照片,集合横向和纵向的图像组合。这本身就是网页布局的另一个“问题”,不同的是图片的方向是横向或纵向。为了整个网站的统一起见,建议重新调整照片大小以适合横向或纵向的方形图片的需要,余下的面积是“白色空间”(我喜欢白色,但你也可以设置不同的颜色作为背景。)
为了解释这种情况,我们想设置大图的尺寸为480像素宽和480像素高,所有尺寸保持原有比例。设置中图为240,小图为120。同时假设,所有的图像将具有唯一的名称——命名是另一个教程!尽管如此,建议大图被称为“imagename_LRG.jpg”,中图被称为“imagename_MED.jpg” ——例如IrfanView的(免费)和Thumbsplus(商业)的图片,可以重命名多个文件。还允许下面的一些处理,但我不太熟悉。
1、把所有图像聚集在硬盘的文件夹中。
2、所有风景图复制到一个新的文件夹(命名为风景)
3、所有肖像图复制到另一个新的文件夹(纵向)
4、运行图像编辑器的进行批处理(必须找出如何从图片编辑手册/帮助文件来完成)在风景文件夹上的文件,重新修改他们的尺寸,使之都具有相同的宽度(使用480px - 如果你使用的是标准的数码照片,应该设置360像素的高度)
5、重复上述肖像文件夹中的文件,修改到统一尺寸(比如480px-宽度为360)
6、现在运行两个文件夹的另一个批处理过程:
•调整画布或纸张为500像素×500像素(取决于图像编辑器),并设置画布和纸张颜色。 (用比你的照片稍大的帆布,确保任何其他可能在网页上的边距)。
•优化网页图像
7、除非你想分开他们,你可以组合所有图像,因为他们在文件夹中都是500像素的方形大图。
8、把所有图片上传到大图
9、创建另一个文件夹叫做中图。复制所有大图到文件夹里。
10、在中图文件运行批处理,调整到250像素的方形。
11、全部上传到 中图文件夹
12、创建另一个文件夹命名为小图。从大文件夹中复制所有图像。
13、在小图 文件上运行批处理,将图片调整到125像素的方形。
14、上传 所有文件。
现在你给了Zen Cart 最佳访问机会和最佳展示下载屏幕的机会。 |