在我的一個網站上,我的客戶報告說,通過代碼縮小尺寸(即指定寬度/高度)的圖像顯示爲鋸齒狀和像素化。我問她使用了什麼瀏覽器,並且不可避免地是Internet Explorer。爲Internet Explorer優化圖像
有沒有一種方法來優化IE中的圖像,或者我需要手動調整photoshop上的圖像之前,我把它們放在網站上?
有問題的圖像的大小從220x220調整到80x80,並且我有javascript,它們會在點擊時將它們展開爲220x220。
在我的一個網站上,我的客戶報告說,通過代碼縮小尺寸(即指定寬度/高度)的圖像顯示爲鋸齒狀和像素化。我問她使用了什麼瀏覽器,並且不可避免地是Internet Explorer。爲Internet Explorer優化圖像
有沒有一種方法來優化IE中的圖像,或者我需要手動調整photoshop上的圖像之前,我把它們放在網站上?
有問題的圖像的大小從220x220調整到80x80,並且我有javascript,它們會在點擊時將它們展開爲220x220。
使用timthumb,它會創建縮略圖,你只需要鏈接到腳本,並指定縮略圖的大小,就是這樣。 http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
我使用它在我的網站之一 - >http://iv-designs.org/ 你可以看到圖像乾淨,沒有像素化。
在瀏覽器中調整大小可能看起來很糟糕。它因瀏覽器而異,但顯然是IE is the worst。
最好是寫一個服務器端腳本來創建縮略圖,或者如果圖像的質量很重要,可以自己手動完成。它還可以節省帶寬,因爲您不需要加載大圖像並只顯示1/10像素。
您應該避免使用寬度和高度來調整大小。這會導致加載時間更長(連接速度慢,圖像大)。
一個更好的主意是製作縮略圖(例如用Photoshop),並使用「Web保存」選項來縮小尺寸。
現代瀏覽器允許雙立方重採樣,所以除非您有一個令人信服的理由來創建縮略圖(例如,如果不想下載大圖像,除非有可能會以這種大小顯示),否則應該沒有問題調整瀏覽器中的圖像大小。 – Robusto 2010-08-25 16:28:25
http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
兩次立方圖像重採樣被默認IE關閉。你可以使用這個打開它在你的重置樣式表:
img
{
-ms-interpolation-mode: bicubic;
}
假設你的圖像是JPEG文件,最簡單的選擇是使用IE7的雙三次圖像縮放功能,您可以打開使用CSS:
img { -ms-interpolation-mode: bicubic; }
要知道,它有性能問題(使用了很多會減慢瀏覽器)。它在IE6中也沒有效果,並且在IE8中不再需要。
另一種方式(它工作在IE6)是使用Marcotte的阮經天的精彩Fluid Images script,它採用一些巧妙的該死CSS濾鏡來解決在IE6和問題7 My own variation on the theme修復右鍵問題,但需要jQuery的。
它似乎有效。乾杯 – 2010-08-25 16:58:26
很高興它解決了 – Christophe 2010-08-25 18:37:06