首頁  >  文章  >  web前端  >  html為什麼不使用img標籤來控制圖片大小?

html為什麼不使用img標籤來控制圖片大小?

黄舟
黄舟原創
2017-07-26 13:40:492604瀏覽

曾經有客戶跟我說在網站後台上傳了新聞圖片,是相機拍攝的,傳上去了但是超出了網頁顯示的範圍,出現了滾動條,問我怎麼處理,我告訴他先用圖片處理軟體將圖片處理到適當的大小然後再上傳,例如處理成600像素的寬度,高度按比例縮放,他告訴我說之前的網站都不用處理圖片,傳上去大小都是一樣的,不會出現這種情況,後來經過一番解釋他明白這麼做的好處。

 

  在用div和css製作網站內容頁的範本時,我們會對其中的一些內容進行樣式固定,例如標題用幾號字、什麼顏色,發佈時間用什麼字體、什麼顏色等等,內容頁面中自然也少不了圖片,這些圖片是透過對應的網站內容管理系統上傳到伺服器上的,在內容頁中用img標籤做了引用得以在網頁上顯示。

  用相機拍攝的圖片像素一般遠遠超過了網頁內容區域瀏覽範圍的大小,而圖片本身的大小也在1M左右,有時候為了方便,直接把圖片傳上去,然後用css來統一控制圖片的寬度,高度自動適應,但是這樣做僅僅能讓網頁瀏覽者看到的圖片像素變小了,似乎與內容很協調,實際上網頁已經加載了這張1M左右的圖片,如果一頁有好幾張新聞圖,就要連續載入好多1M大小的圖片,這時網頁開啟的速度明顯變慢,而且有些圖片會有一定程度的失真。

  另外,如果把內容中圖片的尺寸寫死,有時上傳一些附件時,在附件前會有一個小圖標,由於這個小圖標也是用img標籤引入的,因此也會被“放大”,要解決這個問題又必須要單獨修改這個圖標的樣式,很是麻煩,而且一般內容的更新人員往往不懂這些技術活。

  當網站進行改版時,可能不是原來的公司負責了,而這些上傳到伺服器上的圖片如果是沒有處理過的,「圖片載入慢」的問題仍然會的不到解決,因為負責改版的人員不可能對你所有的圖片一一處理。

  從技術上能實現的效果有很多,但不是所有的方案都是合理的,因此,作為網站建設的技術人員,要養成這種對於圖片先處理、後上傳的習慣,即網頁顯示需要多少像素,就事先處理成多少像素再上傳,不但可以節約磁碟空間,而且提高了瀏覽者的開啟頁面的速度。

以上是html為什麼不使用img標籤來控制圖片大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn