400-609-4309

网页设计图片优化问题

网页设计图片优化问题

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

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章