盘点网站制作中图片优化环节需要注意的细节.docx

本文档由捷讯技术网站制作编辑整理盘点网站制作中图片优化环节需要注意的细节图片展示在网站制作中是一个不可缺少的部分，尤其是那些需要通过图片展现实物、实力、质量等信息的网站，显得尤为重要。但是，如果大量地使用图片，很容易造成网站打开，影响网站访客速度，所以，网站图片优化很关键。产品图片有一个非常重要的原则：清晰，整洁，主题明确，有设计感，给体验才舒适且有美观的感觉。话说产品图片都要会说话，他有自己的肢体语言和诉说能力，我们一起看看产品有哪些原则？1）产品图片的比例原则：我们的平台系统设定产品主图，是正方形的尺寸。所以建议产品主图设置正方形，长与宽的比例为1:1！按网站展现来看的都是1:1的图片，所以是1:1的最好！2）产品的背景原则：根据行业里一些大型的网站要求图片都以白色背景的，从普遍适用的宽泛原则看，白背景最好，最好不要深色背景，不过也要根据产品的颜色来搭配，尽可能烘托出产品主体！当然，也有些特殊产品，用白色背景比较难展现出产品的特质。比如水晶工艺品，产品本身是白色透明的，再配白色背景就比较难凸显产品，体现不出水晶的晶莹剔透，如下图：所以可以选择深色背景来凸显产品主体。关于背景的颜色，如果非要用其他颜色，大家也要注意配色。背景的颜色不要太绚丽太耀眼，否则会掩盖掉产品的主体。3）产品图片的主体个数原则：从体验者喜好上来看，有些喜欢多张图拼合在一起的，有些喜欢单张产品图，多张图片拼接可以有好的效果，也可以没啥效果，规避多张图片拼接的意思是说从本质上来说，是保证每张图能体现单个产品的效果，同时给整个网站一种规范，专业的感觉，毕竟产品主图体现的是这个产品本身的图片是怎么样，而其他内容说明可以放到详细描述或者借用多图产品展示。总而言之，一句话，产品主图上，最好只有一个产品主体，不要放太多。4）产品图片的主图象素原则：一般我们建议产品主图是1000*1000的像素，不过没有强制必须是1000*1000，只是在图片单独展示界面展现的是1000*1000的图，所以推荐使用1000*1000，以避免图片模糊的情况，而产品清晰度越好越能感觉产品质量优质5）产品主图的边框原则：很多同学爱加边框因为这样看起来统一美观，但是大于单边框且大于产品整体图宽度的10%感觉就比较差了，所以尽量不要太宽，以免影响买家体验现在好多主图都有加了边框，如挂绳产品的主图：挺美观的 ！6）产品主图上字符原则：想像一个场景，你正找一个产品正想点击图片看的更加清楚些时却发现上面布满了字，什么感觉？很受挫如你产品字符是为了表明公司/产品资质或者优质的话，建议还是从买家第一需求点出发，先展示完美产品为主，而少量的字符以最多10个认证且是小字体是没有问题的如字符的覆盖面积多于整张图片20%30%，感觉就比较差了，一切以买家体验度为主.7）产品主体比例（指的是单张图片上产品显示）：至少应该要60%70%以上才能比较好的看清产品，否则都看不清楚，有些产品确实特别小但是可以调焦距，让图片清晰，美观及全局呈现在买家面前很重要。网站图片优化的重要性：网页设计不可能是单纯的文本罗列，必然会是图文结合的形式，更甚者会采用Flash、Java等方式让用户更加喜爱网站页面。简单图片优化，我们第一想到的必然是ALT属性，就alt图片属性之前笔者小丹也是具体分析过的，他的主要功能就是为图片注释，其中融合关键词元素，可以提升网站关键词密度和展示量。同时，可以在网速不佳的状态下，让用户了解到不能够显示的图片位，要展示的内容是什么。其次，用到图片的地方就是网站内容页面，我们讲解图文结合形式，因为此种形式更能够留住用户，促使用户继续浏览，加深用户对于该文章信息的了解，丰富内容页面，增加文章可读性和趣味性。再次，在简单的图片注释不能够完全体现用户意图的时候，我们还可以为图片增加超链接，进行相关内容的推荐，这样可以降低页面跳出率，增加页面停留时间，同时还可以增加一道内部爬行路径，增加Baiduspider的广度爬行和深度爬行，有利于页面收录。最后，也是图片优化中最重要的一部分。不论是页面设计还是内容图片，都一定要保证图片的质量，只有清晰的图片才能够增加用户的好感，也才能促使Baiduspider图片收录。反之，如果模糊不清，则会给网站优化产生负面影响，反而不如不添加图片。再者，相比于纯文字，图片的加载速度要慢很多，所以尤其是网站首页的设计中，要在保证图片质量的情况下，尽量减小图片大小，这样才能够让网站更快速的加载完毕，不会因为页面下载时间过长而让用户和Baiduspider放弃浏览。1.在网站设计之初，就先要做好规划，比如背景图片如何使用等等，做到心中有数。2.编辑图片的时候，要做好裁剪，只展示必要的、重要的、同内容相关的部分。3.在输出图片的时候，图片大小要设置妥当，长宽像素就设成你所需要的大小，而不要输出大图片，然后使用的时候，再指定较小的长宽，缩小图片。4.尽量组合装饰性的图片，以节省http请求数，在具体使用时，采用CSSsprite的方式。5.页面上的边框，背景，尽可能的使用CSS的方式来展示，而不要用图片。6.图片使用上，能用png格式的尽量用，以替代过去常用的gif和jpeg格式。在保证质量的情况下，用最小的文件。7.在html中明确指定图片的大小。8.若使用photoshop的话，缩放图片通常会让图像模糊，可以用smartsharpen来让图片更为出色。9.对于GIF和PNG文件格式，最小化颜色位数，可使文件更小。10.对于GIF和PNG文件，最小化dithering，可使文件更小。11.如果图片上要添加文字，可能的话，就不要把文字嵌入到图片中，而是采用透明背景图片，或者CSS定位让文字覆盖在图片上，既能获得相等的效果，还能把图片更大程度的压缩。12.在较小的GIF和PNG图片上，可以使用有损压缩。13.可能的话，使用局部压缩，保证前景清楚的基础上，较大程度的压缩背景。14.图片在优化之前，若能降噪的话，可以获得额外的20%多的压缩。15.图片也可以模糊背景，然后压缩的时候，可以压缩的更多。16.图片的尺寸和大小图文并茂是百度和用户喜欢的形式，但运用图片的时候应注意图片的大小和尺寸。百度在搜索结果页展示图片的时候，实际上不是所有页面有图就给出显示，展示图片的一个规则就是图片大小接近121:75，站长可以根据此规则调节好图片尺寸。另外图片大小会影响页面打开的速度，图片太大页面打开太慢的话对用户体验很不友好，据研究3秒原则，页面超过3秒用户可能就要离开你了。17.图片清晰度有时一篇文章的精华就是图片啦，假如一篇“xx结构图”的文章，用户就是想看清楚结构细节，文字再好内容再丰富，如果配图不清晰的话对用户的价值大大打折。18.图片的alt标签图片优化alt标签是最基础的东西了，最基础的也就越重要，在图片上传好之后千万不要忘了alt标签。蜘蛛判断图片内容就是靠alt，但同时也不建议在alt标签里堆砌关键词，用文章标题是个不错的选择。19.图片的title标签对比alt标签，title被大多数seo遗忘了，实际上笔者认为这个与alt标签相比同样重要。如下图所示，当用户鼠标停留在图片上时会显示文字，这对用户体验有很大的帮助，同时也会多出现一次关键词。20.图片周围文字看上图，这张图片下面有个类似版权申明的文字，百度除了参考alt标签同时也参考周围文字来猜测图片是关于什么的。21.图片命名这一点可能被大多数seoer所忽略，以为图片上传到网站就OK了。细节决定成败，图片名称也是有诀窍的。就以这篇文章为例，本文主题是“图片优化技巧”。22.图片的原创度百度对原创内容越来越喜欢，大量抄袭对网站有百害而无一益。但大多数seo可能只停留在内容的原创上，实际上图片也是页面的一部分，原创图片无疑是蜘蛛喜欢的。进