HTML中的圖片

翻譯不完整。 請幫助我們翻譯這篇文章!

最初的網頁最初的發展階段,只是文字。而只有文字想當然爾令網頁讀起來十分的枯燥乏味。然而幸運的是沒有多久,將圖片(以及其他更有趣的內容類型)嵌入網頁的功能就誕生了。 在多媒體嵌入網頁的學習中,從<img>元素開始是相對適當,因為該元素用於在網頁中嵌入簡單的圖像。 在本文中,我們將研究如何深入使用它,包括在網頁中嵌入簡單圖像的基礎知識,使用<figure>增加標題說明以做註釋,以及詳細說明它與CSS背景圖片的關係。

課成需求: 基本的電腦操作, 安裝軟體的能力, 處理檔案的基本能力, 熟悉最基本的HTML的 (如HTML入門中所述
學習目標: 了解如何在HTML中嵌入簡單的圖片,為它們加上標題註釋,以及HTML圖片與CSS背景圖片之間的關係。

如何將圖片放入網頁中?

為了在網頁上放置一個簡單的圖像,我們使用<img>元素。 這是一個空元素(意味著它沒有文本內容或結束標記),並需要至少一個屬性(src)(有時稱為其完整標題,source)才有用。 src屬性包含指向要嵌入頁面的圖像的路徑,該路徑可以是相對路徑或絕對路徑URL,與<a>元素中的href屬性相同。

提醒: 在繼續之前,您應該閱讀有關URL和路徑的快速入門,以複習相對路徑和絕對路徑URL

舉例來說, 如果您的圖片名為 dinosaur.jpg 且與HTML檔案位於同一資料夾中,可以這樣嵌入圖片:

<img src="dinosaur.jpg">

如果圖片位於名為images的資料夾中,且該目錄與HTML頁面位於同一資料夾(Google建議這樣的編排,以利於SEO /索引目的),則應將其嵌入如下:

<img src="images/dinosaur.jpg">

像這樣.

提醒: 搜索引擎還會讀取圖片名稱,並將其納入SEO中。 因此您應該為圖片提供一個描述性的檔名。 例如 dinosaur.jpg 的命名方式會比 img835.png 更好。

你也可以用絕對路徑URL來嵌入圖片,例如

<img src="https://www.example.com/images/dinosaur.jpg">

但這麼做是沒有意義的,因為它只會使瀏覽器執行更多工作,瀏覽器需重複執行從DNS服務器中搜尋IP地址等等工作。您應將網站上的圖片與HTML存放在同一個伺服器上。

注意: 大多數圖像均受版權保護。 請勿在你的網站上隨意顯示圖片,除非:

  • 你是圖片的擁有者.
  • 您已收到圖片所有者的白紙黑字認可。
  • 您有充分的證據證明該圖片實際上是大家皆能使用。

侵犯版權是違法及不道德的。 此外,切勿將src屬性指向您未被授權的他人網站上的圖便。 這稱為“熱連結”。再次重申,竊取某人的頻寬是違法的,且這會減慢您網站的速度。此外當別人變更、移除或換上令人尷尬的內容時你將無法做出改變。

我們上面的程式碼將有以下結果:

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

提醒: <img>和<video>之類的元素有時也稱為替換元素。 這是因為元素的內容和圖片大小是由外部(例如圖片或影音檔)所定義的,而不是由元素的內容定義。

提醒: 您可以從在Github上找到本節完成的示例(參見開源碼。)

替代性文字

我們下一個要看的屬性是alt。 它的功能算是圖片的文字描述,應用於因網路連接速度慢而無法看到/顯示圖片或需要長時間來跑圖等等情況。 例如,上面的程式碼我們可以像這樣修改:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

測試替代文字最簡單方法是故意拼錯檔名。 例如,如果我們的圖片名稱為dinosooooor.jpg,則瀏覽器將不會顯示該圖片,而是顯示alt文本:The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

So, why would you ever see or need alt text? It can come in handy for a number of reasons:

  • The user is visually impaired, and is using a screen reader to read the web out to them. In fact, having alt text available to describe images is useful to most users.
  • As described above, the spelling of the file or path name might be wrong.
  • The browser doesn't support the image type. Some people still use text-only browsers, such as Lynx, which displays the alt text of images.
  • You may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries.
  • Users have turned off images to reduce data transfer volume and distractions. This is especially common on mobile phones, and in countries where bandwidth is limited or expensive.

What exactly should you write inside your alt attribute? It depends on why the image is there in the first place. In other words, what you lose if your image doesn't show up:

  • Decoration. You should use CSS background images for decorative images, but if you must use HTML, add a blank alt="". If the image isn't part of the content, a screen reader shouldn't waste time reading it.
  • Content. If your image provides significant information, provide the same information in a brief alt text – or even better, in the main text which everybody can see. Don't write redundant alt text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use alt="".
  • Link. If you put an image inside <a> tags, to turn an image into a link, you still must provide accessible link text. In such cases you may, either, write it inside the same <a> element, or inside the image's alt attribute – whichever works best in your case.
  • Text. You should not put your text into images. If your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image. However, If you really can't avoid doing this, you should supply the text inside the alt attribute.

Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realize how helpful alt text is if the image cannot be seen.

Note: For more information, see our guide to Text Alternatives.

寬與高

You can use the width and height attributes to specify the width and height of your image. You can find your image's width and height in a number of ways. For example on the Mac you can use Cmd + I to get the info display up for the image file. Returning to our example, we could do this:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

This doesn't result in much difference to the display, under normal circumstances. But if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

This is a good thing to do, resulting in the page loading quicker and more smoothly.

However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct aspect ratio. You should use an image editor to put your image at the correct size before putting it on your webpage.

Note: If you do need to alter an image's size, you should use CSS instead.

圖片標題

As with links, you can also add title attributes to images, to provide further supporting information if needed. In our example, we could do this:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

This gives us a tooltip on mouse hover, just like link titles:

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

However, this does not come recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g. no access to keyboard users). If you are interested in more information about this, read The Trials and Tribulations of the Title Attribute by Scott O'Hara.

It is better to include such supporting information in the main article text, rather than attached to the image.

實戰練習:嵌入圖片

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic <img> tag; we'd like you to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.

We would also like you to:

  • Add some alt text, and check that it works by misspelling the image URL.
  • Set the image's correct width and height (hint: it is 200px wide and 171px high), then experiment with other values to see what the effect is.
  • Set a title on the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

用圖文和圖文標註說明圖像

Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you from doing this:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?

A better solution, is to use the HTML5 <figure> and <figcaption> elements. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption. Our above example could be rewritten like this:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

The <figcaption> element tells browsers, and assistive technology that the caption describes the other content of the <figure> element.

Note: From an accessibility viewpoint, captions and alt text have distinct roles. Captions benefit even people who can see the image, whereas alt text provides the same functionality as an absent image. Therefore, captions and alt text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

A figure doesn't have to be an image. It is an independent unit of content that:

  • Expresses your meaning in a compact, easy-to-grasp way.
  • Could go in several places in the page's linear flow.
  • Provides essential information supporting the main text.

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

實戰練習:建立圖文標註

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

  1. Wrap it in a <figure> element.
  2. Copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

CSS 背景圖片

您還可以使用CSS將圖像嵌入網頁(JavaScript也可以,但這完全是另一回事了)。 CSSbackground-image屬性和其他background- *屬性用於控制背景圖片的放置。 例如要將背景圖片放置在頁面的每個段落上,可以執行以下操作:

p {
  background-image: url("images/dinosaur.jpg");
}

這種嵌入圖片的方式比HTML圖像更容易定位和控制。 那麼,為什麼還要用HTML嵌入圖片呢? 如上所述,CSS背景圖像僅用於裝飾。 如果您只是想在頁面上添加一些漂亮的東西以增強視覺效果,那很好。 但是,此類圖像根本沒有語義。 它們與文字不同,對於螢幕閱讀器是不可見的,依此類推。 這裡需要的是HTML圖片!

總結來說,如果圖片在內容上具有含義,則應使用HTML圖像。 如果圖像純粹是裝飾性的,則應使用CSS背景圖片。

提醒: 在我們的CSS主題中,您將學到更多關於CSS背景圖片的知識。

試試看!

您已經來到了本文的末端,但是您還記得最重要的內容嗎? 在繼續往下之前,這裡有些測驗讓您驗證看看您是否都學會了 — 測驗:HTML圖像

總結

目前就是這樣啦。 我們已經詳細介紹了圖片和標題說明。 在下一篇文章中我們將進一步介紹,如何使用HTML將視頻和音頻嵌入在網頁中。

在這個主題中