2010-02-01 23 views
6

如果我有一個徽標圖像,並且我希望在另一個頁面上使用它,並且要求它的尺寸較小,那麼我的直覺就是創建一個新圖像,並使用圖形編輯器調整大小。但是,我聽說如果我改用原始圖像並通過改變圖像標籤中的高度和寬度來調整瀏覽器大小,對用戶來說更好。在html文檔中,使用高度和寬度標籤調整圖像大小是不好的做法?

所以我問人羣,這裏最好的做法是什麼?

謝謝您的時間,

- 亨利

+0

只要你保持長寬比,我會說它是關於六個。 – 2010-02-01 02:37:44

回答

3

我的默認響應將是「在圖形應用程序調整其大小」,但它取決於你如何使用它。

當你離開圖像大小調整到瀏覽器,原來的(全尺寸)圖像必須被下載之前,瀏覽器可以以較小的比例顯示。這意味着您使用更多的帶寬,並且您的網頁需要更長時間才能加載。但是,如果您主要在整個網站中使用較大的圖片,那麼始終使用此圖片會更快,因爲瀏覽器可以緩存它。

如果你關心圖像質量,你會得到更好的結果,並將使用專用圖形應用程序調整圖像大小,從而對下采樣過程有更多的控制。

+0

-1對不起,但這顯然是不真實的。如果您在兩個網頁上使用相同的圖片網址並有效地進行緩存,則只能下載一次。你的方法將*總是*下載兩次。 – cletus 2010-02-01 02:36:44

+1

@cletus:確實如此,但它*會減慢加載時間。如果用戶只訪問使用小版本圖像的頁面,則他們被迫下載較大的圖像。當然,如果最大程度地使用大圖像,那麼就像你說的那樣,使用相同圖像會更快。 – 2010-02-01 02:53:26

+0

我聽到你關於尺寸(你會看到我在我的回答中注意到),但在這種情況下,OP稱它爲標誌。這很可能已經被用戶看到,而且很可能不會那麼大。 – cletus 2010-02-01 02:56:17

1

它的優良調整與CSS或高度和寬度標籤的圖像。你唯一要小心的是製作真正大的圖像,因爲它顯然不會減小下載的大小。

做這樣的工作最好的,當你有效地緩存您的圖像,所以它不會下載的第二次。那麼你會從這樣做中獲得實實在在的好處。我通常只是圖像的最後修改時間追加到URL,例如:

<img src="/images/log.png?1233454568"> 

,然後設置爲從現在Expires頭一年。如果圖像更改,則mtime會更改,並會強制瀏覽器重新加載它。

建議用於圖片,Javascript和CSS文件。

1

如果瀏覽器使用的高度/寬度標籤調整圖像大小適合你,你可以用較小質量的圖像結束,實際上取決於圖像類型(如照片與簡單的圖形),所以嘗試一下一些常見的瀏覽器。但在圖形編輯器中調整圖像大小是確保高質量調整大小操作的唯一方法。

1

在圖形編輯器中創建較小的圖像,有以下幾個原因:

  1. 如果用戶尚未緩存較大的圖像,他們將受到不必要的下載較大的文件。

  2. 調整大小在某些不可預測的縮放質量的圖像的客戶端的結果。

  3. 無論如何,在HTML中做這件事是不明智的,對於表象性問題(如元素大小),您應該通過CSS來做到這一點。

相關問題