1. 首頁
  2. 問答
  3. 什麼是大小和格式化圖片圖標的正確方法？

什麼是大小和格式化圖片圖標的正確方法？

2013-11-15 17 views
1

所以我想弄清楚什麼是儘可能快地加載網頁上的所有圖片的最佳方式。我只想知道如果我有最好的方法。什麼是大小和格式化圖片圖標的正確方法？

比方說，我想規模下降到890x500

方法1

<img src="myPic.png" height="500" width="890"/>

方法一1600x900的圖像2

調整圖像中Photoshop或whate版本和使用：<img src="myPic.png" height="500" width="890"/>

方法4

使用CSS與上述的一些組合，以調整圖像大小：<img src="myPic.png"/>

方法3

在Photoshop和使用調整圖像的大小...（不知道這是否真的有效，但我想我會把它放在那裏爲了完整性）

什麼是最佳圖片格式？

這是我一直在圍繞的另一件事，而GIF的幫助鞏固文件大小，你做sacrafice質量。 PNG總是很好，因爲它們的質量最好，但文件大小相對較大。至於JPG，我已經避開了他們，因爲我覺得他們是相當大的文件，但質量不是很好，我的用途是有限的，因爲他們必須有一個背景。

只想知道你所有的想法！ 謝謝！

來源

2013-11-15 Adjit

+1

您可能想要嘗試無損優化或智能有損優化，例如http://kraken.io提供的優化 – karim79

+2

您在這裏有兩個問題。請關注一個，如果需要，請創建另一個問題。 – Kermit

+0

PNGs與GIFs，只要記住舊版本的IE不支持PNG透明度，應該關注你正在進行的任何項目。 – MLeFevre

回答

0

您的第一個選項必須是預先調整圖像大小，以確保發送給用戶的圖像尺寸儘可能小。這是性能最好的選擇，因此您的頁面加載速度會更快。

如果你仍然想要調整圖像大小，也許這是一個用戶可以上傳的圖像，並且他們可能沒有上傳具有正確尺寸的圖像，那麼應該使用css調整圖像大小，以便所有CSS都處於單個文件，因此更容易維護。

至於格式：

  • GIF圖片，沒有透明圖像
  • JPG格式的圖片僅供
  • 巴的圖像與透明

來源

2013-11-15 14:59:01 Jop

0
  • 即使你設置width="0" height="0"的瀏覽器仍會載入您的1600x900圖片。
  • 性能方面你可以幫助使用width和height屬性瀏覽器定義大小。
  • 最好圖片格式？ 取決於您的需求。
  • 後裁剪/ resizeing圖像在PS去另存爲網頁，並與壓縮和偏好保持始終着眼於圖像大小/VS/質量玩。

關於的.jpg，我不明白你的想法。他們是非常好。

  • 原始.JPG圖像（自然）800×600最好的質量= 555KB
    • 用於網絡質量
  • 相同的圖像60 = 118KB
  • 同樣爲卷材60的圖像和模糊0.5 = 100KB下（是的，模糊的把戲）

差異？幾乎不明顯。

  • 你需要完美的alpha透明度+透明度？ png格式
  • 你需要透明度和不關心像素化邊界.gif注意
  • 你需要一個基本背景（模式）（插件老年人IE瀏覽器的支持）？ .gif注意

來源

2013-11-15 15:03:21

+0

.jpg我覺得在網絡上看起來不太好，特別是當你將它用作相對較大的圖像時。至於「Save for Web」這個東西，我每天都會學到一些新東西，我總是把它用於GIF，但是我從來不知道你可以改變它來用於PNG。 – Adjit

0

方法5 - myPic-small.png的大小時，

<a href="myPic-big.png"><img alt="..." src="myPic-small.png" /></a>

很少有更多音符：

  1. 爲JPG不要使用100％的質量，85％ - 90％具有良好的質量和尺寸。
  2. 使用PNG當圖像沒有很多顏色時（JPG大小可能會更小），當您需要無損圖像格式時，或者您將需要在將來編輯它或需要透明度。

來源

2013-11-15 16:09:42 ViliusL

相關問題

 相關問題