网站文章怎么添加图片，有哪些问题要注意？

站文章怎么添加图片？在进行网站优化时，站内文章的质量很重要，其中除了需要撰写高质量的内容，注意关键词的密度布局这些，添加图片也具有一定的优化作用，有利于提升用户的体验。那么如何在文章中添加图片呢？

通常，在网站文章中添加图片有手动、半手动和自动这三种方法。

手动添加图片就是手动点击添加本地的图片，这种方式的效率较低，而且需要自己找寻合适的图片；半手动添加图片就是先处理好图片并命名，打包上传到服务器，然后利用工具批量插入图片在服务器中的地址，找到图片存储文件夹，记录其路径，这样文章发布时就避免手动查找图片，比纯手动添加效率高；自动添加图片就是利用插件来实现。有一些CMS程序中会有很多插件是可以使用的，如果没有图片添加的相关插件，可以找人开发一个。这个插件主要实现的功能是，按照指定的图片作为底部图层，而后在图片上自动生成文字，并且是以文章标题为准，这样这篇文章就有了专属图片。当然，进一步优化就是实现不同文章位置插入图片。这样做的好处是，如果底层图片没有版权，而且文字可以商用，也就避免了侵权的麻烦。

了解完如何在文章中添加图片，对于添加的图片还有一些问题是需要注意的。

所添加的图片大小

在处理图片时，需要先确定图片的正确大小，等上传后发现尺寸不对再去修改是很浪费时间的，而图片太大会拖累网站的加载速度，这一点是需要注意的。另外，还需要考虑网站支持格式的问题，通常是jpg、png比较好。

给图片添加Alt标签

搜索引擎是无法识别图片的，必须用html标签中的alt标签属性来识别，因此给图片添加Alt标签是必不可少的操作，这有利于蜘蛛抓取。

所添加图片的数量

图文结合的文章能增加用户的阅读体验，但是太多的图片会有反效果，因此一篇文章中的一两张图片就足够了。另外要注意，图片太多也会拖累网站的加载速度，所以要控制图片的数量，不仅是和文字要有一个平衡点，还有和网站结构也要有一个平衡点。

所添加图片相关性

在文章中添加图片当然不是随意添加的，应该为该页面配备符合主题的相关图片，要注意网站图片和网站内容的相关联性。

关于网站文章怎么添加图片及图片添加要注意的问题，我们就讨论到这里，以上内容仅供参考。对于网站图片优化的细节大家一定要多多注意，最好希望这篇能对大家进行网站优化有帮助。

维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片，语法如下：

<img src="图片路径" alt="替换文本" />

具体示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>

效果如下：

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码，在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。

图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

1.认识<img/><map><area/></map>基本结构

首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>图片区域链接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加区域链接的图片的路径，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

让<img>标签通过<map>的名字来驱使<map>为自己工作。

需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。

第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。

示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面来划分区域。

2.为图片划分区域的方法

<area>是用来划分区域的标签，area也是“”区域“”的意思。

默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。

分别添加三个形状，示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。

为<area>添加coords属性可以指定区域的位置和范围。

如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：

如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如

这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：

这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？

3.使用Gimp软件精准定位图片区域

使用Gimp软件可以解决这个问题。

Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。

下载地址：https://www.gimp.org/

双击安装即可，注意选择一下安装目录。

完成安装之后打开，界面如下：

点击“文件”找到“打开”：

选择要打开的图片名字：

点击名称后，右边会有图像预览，点击“打开”即可：

打开后如图：

把鼠标放到图像的任意位置，看左下角：

这里就会显示我们鼠标所在的像素坐标数值。

这样我们就能方便地写“poly”的coords了。

请在空闲时找一张图片演练一下吧！

4.为区域添加链接

在<area/>标签中添加href属性即可指定链接路径，如下：

href="https://www.zhihu.com/question/284642168"

添加title属性可以在鼠标滑过链接区域时提示读者，如下：

title="歼20气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商