如何處理HTML頁面中的大圖像

Question

我有一個大約3500 x 2500像素和4 MB大小的大型JPEG圖像。

我想要在HTML頁面中顯示此圖像，以便屏幕大約3/4， 並壓縮它，以便快速加載，但不會影響質量。

這可行嗎？

Answer 1

是的，但不是HTML。您需要運行某種服務器端腳本，以便在之前將圖像尺寸減小至，然後通過電線將其傳輸到瀏覽器。可以做這種事情的語言包括（按字母順序，所以我不會被指責爲偏袒）Perl，PHP，Python，Ruby等等。但是，它需要一些編程經驗或學習意願（通過閱讀網站和/或書籍）。我會建議針對在StackOverflow上提出一個問題，基本上詢問如何執行此操作。

Answer 2

如果你想讓你的jpg佔據屏幕的3/4，你不能假定每個人都有相同的瀏覽器窗口大小。而當用戶改變窗口的大小時，你可能想要調整圖像的大小。

使用CSS 3屬性background-size可以使圖像伸展以適應屏幕，但它不適用於所有瀏覽器。否則，你可以用一些聰明的Javascript來做到這一點。

不利的是，無論您決定使用哪種技術，您都會遇到圖片質量/尺寸問題。如果你的照片保持在3500像素，在大屏幕上觀看時會很乾淨，但下載時間會很長。如果你的圖片太小，它的載入速度會很快，但你會在大屏幕上看到像素。

我認爲大多數人使用1024 x 1280像素的屏幕分辨率。所以也許你應該開始測試這些尺寸。

Answer 3

不，在HTML中不可行。 HTML不會壓縮圖像。它可以通過指定高度和寬度屬性來調整圖像大小，但它們看起來不太好。

您必須手動調整圖像大小。

Answer 4

HTML

<img class="big_image" src="x.jpg"> 
<!-- don't set width and height in the HTML --> 

CSS

img.big_image {width:75%; -ms-interpolation-mode:bicubic;} 
/* don't set the height and it will be proportionally scaled */ 

圖像將被縮放到第一定位anscestor的75％。 （任何包含元素的位置：relative;或position：absolute;設置，希望這是body元素 您可能必須在CSS中將body和html的寬度設置爲100％，我不確定。

的MS CSS具體啄是IE7及更高版本，因爲在默認情況下，他們使用近鄰插值。這是愚蠢的。

圖像已經非常壓縮。這可能是因爲它會更適合作爲一個JPEG或png，試試看看哪個更小。