【白話科普】網站圖片不顯示,背後的原因你都清楚嗎

瀏覽網頁的時候,什麼才是最重要的?是充滿信息的文字么?沒想到吧,是我圖片噠!在這個快節奏的時代里,圖片才是碎片化時間中最容易傳遞信息的存在。因此在網頁中,圖片是不可或缺的存在。然而經常有朋友反應,打開網頁的時候不顯示圖片,這是為什麼呢?是什麼原因導致了圖片無法加載呢?

圖片不顯示的常見原因

網速問題

如果打開網頁的時候無法打開圖片,首先應該檢查的就是網速問題,如果網速太慢或某張圖片提及過大,就會出現圖片加載失敗的情況。

檢查方法:網速過慢自己可有直接感覺,如打開百度、新浪之類的網站都比較慢,可以的話,可以直接百度搜「網速測試」進行直接在線測試自己的網速。

Flash Player 問題

有的時候打開網站後,圖片會顯示需要 Flash Player,遇到這種提示後,我們可以點擊控制面板,雙擊 Flash Player 選項,電腦桌面顯示出了 Flash Player 設置管理器,然後選擇高級,點擊立即測試。我們點擊瀏覽器右上角的工具。選擇管理加載項,啟用 shockwave flash object,然後點擊確定。

Internet 選項設置不當

當瀏覽器過濾了圖片,或者將我們所訪問的網站添加到受限站點,也可能導致圖片無法顯示。我們可以點擊瀏覽器工具,點擊 Internet 選項,針對第一種情況,我們選擇高級選擇,點擊顯示圖片,最後選擇應用,在重新訪問網站就可以了。如果是後一種情況,我們可以選擇安全選項,點擊受限站點,刪除受限站點的列表中我們所訪問的網站,最後選擇下應用就好了。

除去重新刷新訪問外,我們也可以用瀏覽器自帶的抓包工具來看下訪問效果,可以在頁面按 F12 或者在頁面上右鍵點「檢查」,就可以看到開發者工具的內容。

之後打開 Network 面板,該面板記錄頁面上每個網絡操作的相關信息,包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie。

點擊資源名稱,可以查看與資源有關的更多信息。

可用標籤會因您所選擇資源類型的不同而不同,但下面四個標籤最常見:

  • Headers:與資源關聯的 HTTP 標頭。Headers 標籤可以顯示資源的請求地址、HTTP 方法以及響應狀態代碼。此外,該標籤還會列出 HTTP 響應和請求標頭、它們的指以及任何查詢字符串參數。

  • Preview : JSON、圖像和文本資源的預覽。 Preview 標籤會顯示該資源的預覽信息,也可能不顯示,具體取決於您所選擇資源的類型。

  • Respones : 顯示資源未格式化的 HTTP 響應內容(如果存在)。

  • Timing : 資源請求生命周期的精細分解。

可以在控制台看下圖片響應的狀態以及響應的時間來判斷不顯示的原因,以便於更快的解決問題。

當然也有一些比較特殊的原因,比如現在非常流行的 WebP 格式的圖片,由於不是所有瀏覽器支持,有時候也會出現圖片不顯示的情況,下面我們來細看下。

瀏覽器不支持WebP

為了減少互聯網上圖片的發送時間和流量消耗,現在很多網站都選擇了 WebP 格式的圖片。WebP 集合了多種圖片文件格式的特點。它像 JEPG 一樣適合壓縮照片和其他細節豐富的圖片,像 GIF 一樣可以顯示動態圖片,像 PNG 一樣支持透明圖像。同時 WebP 在性能上也比其他格式的圖片更強勁,根據 Google 的測試,WebP 無損壓縮圖片比 PNG 圖片少了45%的文件體積。

使用 WebP 確實能給實際應用帶來很多好處,但是因為並非所有瀏覽器都支持 WebP ,比如:IE、Firefox 某些版本等。所以當瀏覽器不支持時,就會出現圖片無法顯示的問題。

面對這種情況,有辦法讓支持 WebP 格式的瀏覽器看 WebP 圖片,不支持 WebP 格式的顯示圖片原格式嗎?

這裡就要介紹下又拍雲的 WebP 自適應功能。

WebP 自適應功能會判斷客戶端瀏覽器是否支持 WebP 解碼,如支持則返回 WebP 格式圖片,否則返回原圖,客戶端以及源站無需任何改動。WebP 自適應開啟方式也非常簡單。只需要在又拍雲後台點擊開啟鍵即可。

推薦閱讀

這些表情包你有嗎?來 Battle 啊

Doge.jpg 的背後是什麼,你知道么?

Tags: