为了使网络中使用的图片标准规范,我整理了一下网页设计中的标准尺寸。,也就是界面和图片banner、logo约定俗成的东西,使得更系统点。
1、800*600下(2000年以前15寸电脑常用规格,目前已经很少用到),网页宽度只要保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在photoshop里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右。
4、在PS里做的图到了网上是不一样的,颜色等等方面,web上面只用到256web安全色,而p中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象。
标准网页广告尺寸规格:
1、120*120,这种广告规格适用于产品或新闻照片展示。
3、120*90,主要应用于产品演示或大型LOGO,小图标标准尺寸。
4、125*125,这种规格适于表现照片效果的图像广告。
5、234*60,半尺寸banner,这种规格适用于框架或左右形式主页的广告链接。
6、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。
8、88*31,小banner,主要用于网页链接,或网站小型LOGO。
页面标准按1024*768分辨率以上屏幕制作,实际尺寸可为960*-px
页面长度原则上不超过3屏,宽度不超过1屏。最近在与淘宝小二进行沟通时,特地提到我们的网页在有意识的加长,从他那边得到的讯息是,若是内容需要,站在引导消费的层面,尽量不要超过12屏。
尺寸的体积控制是一个难办的事情,但又必须要加以控制,这里有一个基本的参数算法:图片大小=图片宽×图片高×0.8÷1024 (单位:kb)
淘宝也在这个算法基础上结合自己网站做了一些尺寸标准限制:
950*90 <41K、 750*490 <179K、 728*90 <31K、 530*170 <43K、
510*270 <67K、 510*250 <62K、 470*270 <61K、 454*218 <48K、
380*220 <40K、 360*190 <33K、 310*100 <15K、 300*250 <36K、
270*390 <51K、 190*190 <17K
而我们常用的图片规格,则可以按如下表格来加以控制:
广告形式 |
像素大小
|
最大尺寸
|
备注
|
BUTTON
|
120*60
|
7K
|
gif居多,这种广告规格主要用于做LOGO使用,小图标标准尺寸。
|
215*50
|
通栏
|
760*100
|
25K
|
|
430*50
|
15K
|
|
超级通栏
|
760*100 到 760*200
|
40K
|
|
巨幅广告
|
336*280 或 585*120
|
35K
|
|
竖边广告
|
130*300
|
25K
|
|
全屏广告
|
800*600
|
40K
|
|
弹窗广告
|
400*300
|
40K
|
gif居多
|
BANNER
|
468*60
|
18K
|
全尺寸banner,应用最为广泛的广告条尺寸,用于页眉或页脚。
|
悬停按钮
|
80*80
|
7K
|
|
流媒体
|
300*200
|
30K
|
小于5秒60帧(1秒/12帧)
|
JPG和GIF的压缩方式:
简单的JPG缩小可以用ACDsee的编辑功能,在存储的时候点击选项,调整压缩品质即可。
更专业一点的是祭出Ps(一叶成茗常用的方式),存储图片时选择“存储为WEB所用格式”
之后保存时调整品质至要求的大小,务求保证清晰的情况下使之更小,这样有利于页面加载速度。
如果这样还大的话,就必须要做切片处理了
而对于GIF格式的压缩,最好的办法就是减少动画帧数,另外一点就是将要动的部分添加动画,而其它不动的部分第一帧以后就不出现。这样会大大降低文件体积。