网页设计图片优化问题

网页里，一张图片最好不要超过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工作效率，有着重要的作用。