网站图片处理技巧

网站建设公司在进行网站设计的时候，通常会对网站的图片进行处理，但是很多程序加过之后图片就变形了，所以，今天小编就来为大家分享下网站图片处理技巧。

1、在网站设计之初，就先要做好规划。比如背景图片如何使用等等，做到心中有数。

2、编辑图片的时候，要做好裁剪，只展示必要的、重要的、同内容相关的部分。

3、在输出图片的时候，图片大小要设置妥当，长宽像素就设成你所需要的大小，而不要输出大图片，然后使用的时候，再指定较小的长宽，缩小图片。

4、尽量组合装饰性的图片，以节省http请求数，在具体使用时，采用CSS sprite的方式。

5、页面上的边框，背景，尽可能的使用CSS的方式来展示，而不要用图片。

6、图片使用上，能用png格式的尽量用，以替代过去常用的gif和jpeg格式。在保证质量的情况下，用最小的文件。

7、在html中明确指定图片的大小。

8、若使用photoshop的话，缩放图片通常会让图像模糊，可以用smart sharpen来让图片更为出色。

9、对于GIF和PNG文件格式，最小化颜色位数，可使文件更小。

10、对于GIF和PNG文件，最小化dithering，可使文件更小。

11、如果图片上要添加文字，可能的话，就不要把文字嵌入到图片中，而是采用透明背景图片或者CSS定位让文字覆盖在图片上，既能获得相等的效果，还能把图片更大程度的压缩。

12、在较小的GIF和PNG图片上，可以使用有损压缩。

13、可能的话，使用局部压缩，保证前景清楚的基础上，较大程度的压缩背景。

14、图片在优化之前，若能降噪的话，可以获得额外的20%多的压缩。

15、jpg图片也可以模糊背景，然后压缩的时候，可以压缩的更多。

16、网站中所有的背景图都放在一张图片上面，降低图片加载时长，提高网站打开速度。

17、网站中的图片尽量使用GIF格式的图片，以降低图片的体积大小。

18、网站中存在jpg的图片，需要在储存jpg图片的时候，选用品质高、格式基线已优化模式。

19、网站中存在png的图片，如果png背景透明，应该加入防止IE6 png背景透明失效的JS代码。

20、网站中纯色的背景图片，应该使用CSS的方法控制，尽量减少图片的使用。

1、让访问者能轻易的联系到你

在某些情况下，访问者可能会有更多的问题或想要了解更多信息，通过将你的联系方式直接放在该页面能帮助用户非常容易的联系到你。

如果你提供了多种联系方式并将其放在了一个单独的页面，那么请保证用户至少在 关于 页面能直接链接至该页面。

2、告诉访问者你是谁?

最好放置一张你的或你团队的真实照，这能让那些好奇的访问者了解到你的网站背后是有一群真实的人为之付出的，并非机器程序。

一定要避免使用那些在网络上找来的西装革履的人物形象，这毫无价值所言，用户又不傻。

3、不要给用户毫无意义的冗余信息

我们致力于通过出色的性能为客户提供卓越的价值以及提供世界知名服务从而成长为业界第一诸如此类陈述可适用于大部分的企业。

但读者更想要了解的是你本身和你的企业，并非这种口号式的目标。因此，别再拿这种信息浪费用户的阅读时间了。

4、易于浏览

用户访问关于我们页面是希望快速的了解到你的相关信息，但如果你的信息排版也好，样式也好并不利于阅读，那他们可能需要阅读所有内容去找到他们在找的关键信息。

因此，最好把页面内容合理分块并标明易于理解的标题，从而让用户的阅读过程变得轻松。

5、告诉用户你在哪儿?

让用户知道企业或网站站主所在的地理位置是增强可信度的一个非常简单的办法，你当然可以只写明自己的地址，但最好还是考虑下放置一个地图模块。

虽然这个地图可能并没有什么实际作用，不会有用户真的有兴趣前往你的实际所在地，但毕竟作为一张图片来讲或多或少都能增强纯文本的表达力。

6、引导用户行为

当用户浏览了你的关于页面后，不妨给他们一个继续跟你的站点发生点什么的选项。

比如，让他们可以订阅你的博客、注册账号使用你提供的服务或者购买你的产品，无论提供哪种选项，都尽量确保把它放在最起眼的地方。

当一个用户访问并阅读关于页面的时候，这种行为往往表现了其潜在的兴趣，你要考虑趁机会使他们能够轻易的与你或你的网站进一步发展关系。

7、向用户展示你的特色信息

展示你的优势以及为什么你有能力做这样的事情，这就给了人们一个投入时间信任你的理由，从长远来看，他们可能向你投入个人信息和金钱，因为这种信任关系。

8、直白的告诉用户你是干什么的

想象一下：一个用户是首次访问你的站点，还不了解你是干什么的。那么不妨在正式介绍你究竟有何独特前，先使用一段简短直白的表述。

9、告诉用户为什么你在做当前的事情

通过描述为什么你在做的事，你能清晰地向用户传达是什么能让你独一无二，这是把你区分于一大堆竞争者的一个方法，同时能够向用户传达出你的服务理念和价值观

1、触摸屏优化

移动端和桌面端设备间最大的区别在于交互方式。在移动设备上，人们通常习惯用手指放大屏幕，以及向上轻扫来浏览更多内容。

所以说，仅仅实现网站的响应式设计不足以为移动端用户提供卓越的用户体验，你还需要优化网站在触摸屏上的呈现方式，这其中包括为网站添加触摸屏导航。

比方说，你需要保证网站中幻灯片可以用手指轻扫。以及，你还可以通过减少表单中的字段数量，来简化如电邮选择性表单的填写。

2、压缩HTML，CSS和图像

同样，减少网站加载时间也不失为一种优化网站移动端体验的重要方法。你必须保证网站加载足够迅速，从而保证访客(特别是使用移动设备的访客)不会败兴而归。

因此，你可以压缩高清晰度的图像，来保证自己的博文不会在移动设备上消耗大量数据。此外，压缩和缩小你网站的HTML和CSS 也可以进一步提高加载速度。当然，安装优秀的缓存插件也能更好地解决这一问题。

3、选择合适的字体大小

可以通过配置视口来解决这一问题，从而确保你的字体在各种设备屏幕上都呈现出最佳尺寸。不过，这种方法虽然看似简单，但是需要你具有一定的CSS知识。

总之，你需要不断测试你的网站，直到你网站针对移动端的设计趋近完美。