<img>元素

當瀏覽器要訪問一個帶有幾個<img>元素的網頁時,瀏覽器是啥也沒有,它先是從服務器獲取這個HTML文件,在窗口顯示出來,然后瀏覽器發(fā)現了這個文檔有幾個<img>元素,再從服務器把這幾張圖片去過來,顯示出來。

圖像的格式共有三種:JPEG,PNG,GIF

JPEG:不支持透明性,圖像有壓縮,圖像更小,像素有損,同時加載時更快

PNG:無損,支持透明性,所以被圖像覆蓋的區(qū)域的東西會被看到。

GIF:無損,支持透明性,支持animation

圖像在網頁的位置,就是<img>元素的位置。

src屬性:圖像URL地址。alt屬性:當圖像加載不出來,alt屬性的內容會出現原本圖像的位置??梢杂脕砀嬖V用戶圖像的內容。

你也可以用width和height屬性來指定圖像的大小。如果沒有指定大小,瀏覽器會在圖像顯示出來之前,自動決定圖像的大小。

因為瀏覽器是先把整張圖片的數據從服務器獲取過來,再根據情況調整圖像的大小的,很多圖像原始占的空間是很大的,所以最好先把圖像剪裁成合適大小,再把圖像用在網頁上。而節(jié)省瀏覽器加載的時間。

一般情況,用戶瀏覽器窗口大小在800-1200px間,圖像的寬度要小于800px,logo的寬度在100-200px之間。

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一、不種格式圖片的使用 1.JPEG格式—照片和復雜圖像使用 適合連續(xù)色調圖像,例如照片 包含顏色豐富多達1600...
    April_17閱讀 480評論 0 0
  • 圖形 1、Web圖形的作用 圖形作為內容圖形作為內容的元素有許多目的 - 與文本內容一起并補充: 插圖:圖形可以顯...
    GeekJun閱讀 407評論 0 3
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,387評論 0 8
  • 注明:本人原創(chuàng)翻譯,原版為Essential Image Optimization電子書,這里將其拆分為幾篇文章發(fā)...
    ProteanBear閱讀 5,459評論 0 5
  • 每天打開手機最生氣的就是看到這樣的消息:“你是不是在醫(yī)院上班?。磕懿荒軒臀覓靷€號?”“我熟人住xx科,你可以幫我和...
    一口吃成了瘦子閱讀 196評論 0 1

友情鏈接更多精彩內容