Web 中的图像

本文适合谁？ 

嘿，伙伴！您是网页开发的初学者吗？那么这篇文章就是为您准备的。.

内容在网络上有多种形式：文本、图像、视频或音频。图像是我们能够有效描述内容的途径之一，它们为网站增添了很多价值。没有图像的网站只是无聊的！  

在本文中，我将教您如何在网页中使用图像以及在使用它们时应牢记的事项。 

让我们开始吧！  

<img> 元素 

它是网页设计师最常用、最喜欢的元素之一。它是 HTML 中的第一个媒体元素，而另外两个：视频和音频则在开发中！与某些元素一样，<img> 是一个空元素，这意味着该元素不能包含任何子元素  :( 

<img src="images/beautifullady.jpg" alt="Beautiful Lady" />

上面您看到了两个属性：src & alt。<img> 元素应该知道它要显示什么图像，通过 src 属性它就能知道。您可以在此属性中指定绝对路径或相对路径。  

什么是绝对路径？

嗯！绝对路径是完整的 URL。有时您需要显示不同域上的图像，此时您应该使用绝对路径。 

<img src="http://otherserver.com/users/knowallguy.jpg" alt="Know all guy" /> 

什么是相对路径？ 

如果您要在同一域上显示图像，请使用相对路径。

<img src="../images/small/logo.png" alt="Logo" /> 

您甚至可以在上述情况下使用绝对路径，但这并不是一个好主意！为什么？如果您使用大量存在于同一域上的图像并使用绝对路径，那么有一天您需要将域名更改为其他名称，届时您将不得不扫描所有页面并更改 src 值。所以只使用相对路径。

“alt”很重要 

我遗漏了 <img> 元素的一个重要属性，那就是 alt。那是什么 alt？它是如果图像不存在时将显示的替代文本。

<img src="images/beautifulgirl.jpg" alt="Beautiful Girl" />

在网上，由于网络故障或读取图像失败，任何事情都可能出错。因此，如果浏览器无法从服务器获取图像，它将显示一个损坏的图像，如下所示，

如果您提供了替代文本，那么如果浏览器无法读取图像，它将显示该文本。  

我看到很多人都忘了使用它，以前我也是！通过添加一点文字，您就可以帮助很多屏幕阅读器为视障人士朗读损坏图像的替代文本。所以永远不要忘记 “alt” 这个属性。  

宽度 & 高度 

正如您所猜到的，这两个属性控制着在浏览器中显示的图像的大小。

<img src="images/beer.jpg" width="800" height="600" alt="Beer" />

请注意，您无需在宽度 & 高度属性中指定 “px”。作为最佳实践，这两个值应等于图像的实际宽度 & 高度。为什么？我有一个较大尺寸的图像，例如 800 x 600，我想将其显示为 400 x 300，这有什么问题吗？没有任何问题！   

通过将 800 x 600 尺寸的图像指定为 400 x 300，您并没有获得太多好处，因为无论您在浏览器中指定什么尺寸，相同的数据量都会从服务器传输过来。所以我的建议是使用 Photoshop 等任何图像编辑工具将图像调整为 400 x 300 的尺寸，然后使用它，这真的会让您受益！  

图 c. 尺寸与实际图像不同的 <img> 元素

边框

没有边框的图像看起来确实不太好！

如何添加边框？有一个属性可以帮助您做到这一点！它的名字叫做 border。 

 <img src="images/cute.jpg" width="500" height="368" alt="cute" border="4" />

上面我们指定了一个值为 4px 的边框。第二个图像看起来很酷吗？但您需要知道的是，border 属性被 W3C 的人宣布为已弃用。所以为什么还要冒险呢？将 <img> 元素包围在 <p> 或 <div> 元素中，并通过 CSS 对它们进行装饰以添加边框，如下所示。

<p class="imageborder">
	<img src="images/cute.jpg" width="500" height="368" alt="cute"/>
</p>

p.imageborder
{
	width: 500px;
	height: 368px;
	padding: 4px;
	background-color: #fff;
	border: solid 1px #eee;
}

缩略图很棒

很多时候，我们不得不在网页上显示一系列图像。 

上述图像有什么问题？看起来很酷！是的。但是，如果我们看图像从服务器加载所需的时间，那倒是需要考虑一下。

图 f. 使用较大图像所需的时间 

如果您想在网页上显示很多图像，那么与其像上面那样直接显示它们，不如考虑其他方法。显示小图像（缩略图尺寸）怎么样？它们肯定不会花费那么多时间从服务器加载。

但是用户如何才能看到大图像呢？别担心！通过将 <img> 元素包围在 <a> 元素中，您可以做到这一点。 

<p class="imageborder">
	<a href="images/crane_big.jpg" title="Crane" target="_blank">
		<img src="images/crane_small.jpg" width="58" height="58" alt="Beautiful Girl"/>
	</a>
</p>	

因此，策略是：在服务器上提供两种版本的图像：一种是真实的、大尺寸的图像，另一种是小的缩略图图像。在显示图像集时，请使用缩略图，并且仅在用户想要查看大图像时才显示它，例如在上面的示例中单击时，或者使用漂亮的 jQuery 插件。

总结一下 

所以，总结如下，

1. 在引用同一域上的图像时使用相对路径。
2. 为所有图像指定 alt 属性。
3. 在图像的宽度和高度属性中指定真实尺寸。 
4. 为图像添加边框。 
5. 显示图像集时使用缩略图。 

 如果您觉得本文对您有帮助，请不要忘记留下您的评论和投票。