网页设计图片优化问题  

网页里，一张图片*不要超过200K，若体积过大，则会导致网页加载速度过慢，影响用户体验度，网站跳出率也就会有所增加。下面介绍网页设计图片优化问题，希望这些内容对您有帮助。  

1、尺寸和大小  

有很多人不知道为何搜索结果左侧有的网站会有一张小图，而有的没有。主要原因是别人图片尺寸符合搜索引擎的要求，建议一般尺寸宽高比例：121：75，这个比例的图片大小比较合理，也方便搜索引擎左侧显示。  

2、体积大小  

一张图片*不要超过200K，若体积过大，则会导致网页加载速度过慢，影响用户体验度，网站跳出率也就会有所增加。  

3、清晰度  

图片清晰度对用户体验的影响不必多解释，若不清晰，很多时候用户看不到图上的重要信息就把网页关闭掉。  

4、去除水印  

我们大多用的图都是在网上搜索出来的，其实很多都被人家加上水印，所以再用图的时候，记得将水印去除。  

5、图片“原创”  

搜索引擎喜欢新鲜的东西，直接去百度盗的图，相似度太高。*去图片平台搜索还未收录的美图，懂PS的当然也可以自己做图。  

图片优化在网页设计中的原则  

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图片也可以模糊背景，然后压缩的时候，可以压缩的更多。  

网页设计中图像优化的详细方法  

图像优化：  

一般而言，搜索引擎只识读文本内容，对图像是不可见的。同时，图像文件直接延缓页面加载时间，如果超过20秒网站还不能加载，用户和搜索引擎极有可能离开你的网站。因此，除非你的网站内容是图片为主，比如游戏站点或者图片至关重要，否则尽量避免使用大图片，更不要采用纯图像制作网页(SPLASH PAGE)。  

网站图片优化的核心有两点：增加搜索引擎可见的文本描述，以及在保持图像质量的情况下尽量压缩图像的文件大小。  

Alt属性：  

每个图像标签中都有ALT属性，搜索引擎会读取该属性以了解图像的信息。因此，更好在所有插图的ALT属性中都有文字描述，并带上该页关键字在其中。  

文本说明：  

除了ALT属性文字，还可以考虑以下方法直接优化图像，使之被搜索到：  

1、在图片上方或下方加上包含关键词的描述文本;  

2、在代码中增加一个包含关键词段的heading标题标签，然后在图片下方增加文字描述。  

3、在图片下方或旁边增加如"更多某某"链接，包含关键词。  

4、创建一些既吸引用户又吸引搜索引擎的文本内页，先把流量吸引到这些页面，再提供文本链接指向你的图片页面。  

总体上，网页应尽量减少装饰性图片以及大图片。而Alt属性中的文字对搜索引擎来说，其重要性比正文内容的文字要低。  

Gif和JPGE图像优化：  

Alt属性和文本说明都只是对图像之外的文本环境进行优化，下面简单谈谈对图片本身的优化处理。对图片文件优化的目的是在尽量不影响图像画面效果的情况下，将其文件大小降到更低，以加快页面整体下载速度。  

网页图片格式主要有GIF和JPGE两种形式。一般来讲，GIF适用于线图和企业标识;JPEG适宜照片元素的格式。主要通过减少GIF颜色数量、缩小图片尺寸和降低分辩率来缩小文件，也可以采用层叠样式表达到优化的目的。PhotoShop的版本越高越适用于网络图形。此外，将大图片切割成若干小图片于不同的表格区间内进行拼接，也可以相对加快下载时间。  

SEO网页设计常见的错误  

1、瀑布流的无限加载  

瀑布流技术算是一个热门的技术，主要用于改善用户体验，但在某些方面却严重影响了SEO效果，如果你曾经认真的分析瀑布流网站，你会发现它并不能抓取AJAX加载的相关内容。  

那么目前解决这个问题的*的办法，应该是增加侧栏，保留*内容，增加随机内容，从而确保搜索引擎可以很好的抓取内容。  

另外，一个有效的办法就是制作站点地图，提交给搜索引擎。  

2、移动端广告  

对于用户体验而言，特别是在移动设备上，如果你最近关注百度熊掌号，你会发现，百度移动搜索落地页体验广告白皮书3.0，严格的讲述相关广告展现的具体要求，如果你发现自己在移动端配置了大量广告，需要对照手册进行自查，并且可以利用落地页检测工具进行审查。  

3、网址提交  

对于程序员而言，经常忽略的一件事就是网址提交给搜索引擎的配置，比如：缺乏主动提交，sitemap站点地图，从来不会进行手动提交。  

为此，在网页设计的同时，需要在系统后台写入自动提交网址代码，以及自动生成站点地图的代码。有必要的情况下，对于大型站点，可以每隔一定时间自行审查死链接，并且自动提交死链接给百度。  

4、图像与媒体文件  

提高网站加载速度，已经是2018年SEO优化的*目标，但我们知道对于个别行业网站而言，往往充斥着大量的图片与短视频。  

为此，我们需要对于图片与视频内容进行批量压缩，如果可以的话，尽量选用商业CDN加速，比如：百度云加速。  

虽然，百度识图可以很好的识别图像内容，但我们仍然建议给予图片打上ALT标签。  

5、H1-H3标签内容  

你是否经常发现很多大型站点几乎缺少H1标签，这并不代表这个标签不重要，而是行业大站自身的高权重，掩盖了这个瑕疵。  

合理的分配H1-H3标签，可以有效的告知搜索引擎文章的重点，每个段落的意义，同时你也值得关注什么是“四处一词”  

6、站内结构标准化  

这是一个极为重要的问题，我们需要做的是优化网站结构设计，确保同一个内容，只有一个URL与其对应，避免重复内容，值得注意的是，URL结尾的斜杠对SEO的影响。  

总结：在网页设计上线之初，合理的梳理网站结构，建立相关的文章发布模板，对提高SEO工作效率，有着重要的作用。