在直接的html或css中定義圖像會更好嗎？

如果我有選擇地插入圖片直接進入HTML或CSS，例如說，包裹圖像中的鏈接，我可以做要麼...在直接的html或css中定義圖像會更好嗎？

<a href="#"><img src="#" alt="" width="" height="" /></a>

或者我可以做...

<a id="img" href="#"></a> 

#img {background: url('#') no-repeat; height: #; width: #;}

哪個更好，爲什麼？兩者都是按照想要的方式工作，但是加載時間等方面是否有區別，或者是否有更好的實踐？

來源

2011-10-06 pv1

在HTML中使用的圖像是更好，當圖像有任何環境中的意義...如果它是一個沒有任何背景意義的裝飾畫，然後用CSS。 CSS用於表示，HTML用於內容。

最好的提示，爲您確定是否使用HTML和CSS的畫面： 如果我刪除的圖片，將網頁內容還有意義？

在HTML的圖像是指在上下文中提供視覺意義，具有有意義的文本回退。應該避免使用沒有任何內容的A元素，因爲它的內容與鏈接，瀏覽器和網絡爬蟲（例如谷歌機器人）有關係。

使用CSS圖片只用於裝飾目的。否則，它可能會損害您的搜索引擎排名。總是爲圖像提供alt屬性，以確定最終訪問者無法看到任何圖像。

來源

2011-10-06 18:42:00

@JohnKurlak更棒的是，谷歌的觀點是什麼？他們現在可以檢測隱藏文本並對其進行懲罰：http://www.google.com/support/webmasters/bin/answer.py?answer=66353 –

@Doozer現在，這些黑客最好避免。如果它對用戶沒有用處，請不要這樣做。 – 2011-10-06 18:56:07

感謝這是我需要知道的。 – pv1

如果圖片包含上下文（如徽標或照片），我會建議將其加載爲<img>請確保您爲可訪問性和SEO原因提供了替代文本。

如果圖像在頁面的範圍沒有上下文，那麼我認爲它正確的位置，被定義在控制設計的CSS。

整個想法是將您的演示文稿與您的內容儘可能分開。一個圖像可以是內容，如果是的話，應該是內容。

來源

2011-10-06 18:39:39

我同意，換句話說，如果圖像是內容使用IMG，如果圖像是網站使用CSS佈局/圖形設計的一部分。 – stivlo

@stivlo在關於圖片內容添加了一行內容，謝謝。 –

一般來說，我儘量在CSS中放置儘可能多的圖像，但Doozer和Mario有很好的觀點。如果圖像對上下文很重要，它可以放在HTML中。當文本需要浮動和圖像時，我還會使用<img>標籤。

一兩件事，CSS可以做到這一點<img>不能是CSS image sprites。這是您從一個或另一個獲得的唯一真正的性能優勢。像youtube.com這樣需要高性能的網站會將許多圖像合併爲一張大型合成圖像，以減少HTTP流量（並因此減少頁面加載時間）。例如，這是來自youtube.com的精靈。語義HTML的

enter image description here

來源

2011-10-06 18:50:02 Jeff

精靈絕對是他們不工作的一個領域，你是對的。通常精靈都是專注於設計的，所以它們無論如何都屬於CSS。 –

@DoozerBlake的確如此。例如，我不記得在文章開始時看到用於照片庫或圖片的精靈。 – Jeff

遵循的原則。如果圖像是內容，即縮略圖，照片或按鈕，請使用<img>元素。如果它更多是頁面設計的一部分，則背景圖片可能更合適。

更具體的例子：如果你正在使用你的形象旁邊的一個文本鏈接圖標，使用背景圖像：

Print icon with text

<span class="printIcon" onclick="window.print()">Print</a> 

.printIcon { background: url(...) no-repeat; padding-left: 20px }

如果你的形象是按鈕本身，在沒有文字方面，請使用<img>元素以及適當的alt屬性，如果圖片不可用，該元素將替代圖片。

print button

<img src="printButton.png" alt="Print" onclick="window.print()" />

來源

2011-10-06 18:58:29 gilly3

在直接的html或css中定義圖像會更好嗎？

回答

相關問題