如何讓網站的圖片快速加載？

你一定知道圖片對于讀者來說，增加了絕大部分的閱讀體驗，它們可以保持讀者的閱讀興趣。

一篇全文字的文章與一篇圖文結合的文章，我更喜歡看圖文結合。在看文章的同事，圖片能有效的起到放松大腦，讓閱讀者更加原因讀到結尾。這對網站建設者來說，也是有利于搜索引擎的SEO優(yōu)化。因為搜索引擎的蜘蛛更加偏愛圖文并茂。

但是有一個問題就，圖片太多會大大拖慢網站的速度。文字確實非常容易展現，但是圖片會通過下載才能展現到閱讀者的眼中。

圖像加載優(yōu)化的重要性

減少圖片的大小，并且保持在閱讀者可接受的范圍。 這便是圖片優(yōu)化，每一張圖片都是用高清，或者超清，這絕對會給服務器帶來很大的壓力。我們要做的就是將圖片壓縮，壓縮圖片之后還要能讓圖片信息直觀的傳遞給閱讀者。

研究表明：網頁的訪客，最關心的是網頁打開的速度。 隨著互聯網快速發(fā)展，有40%甚至更多的人選擇放棄網頁加載超過3秒的網站。換句話來說，我可能不在意你文章的質量，但是網站必須快速展現到我的面前。

也有統(tǒng)計，如果你的網站每天能為你帶來100,000元的收入，沒延遲一秒會導致你每年少收入250萬元。

所以優(yōu)化圖片的大小，對于網站主來說可以節(jié)約服務器的硬盤和帶寬，對于者訪問者來說會加快訪問速度，增加用戶體驗，對兩者都有益。

優(yōu)化圖像減少頁面加載的6種方法

1.使用圖片壓縮工具

壓縮工具可以刪除某些部分來減小圖片的大小，這種壓縮可以為“無損壓縮”或者“有損壓縮”。

建議對照片等高質量的視覺效果進行無損壓縮，更簡單的圖像，您可能希望選擇有損壓縮。這樣可以更好的提升服務器的性能。

這里我推薦使用tinypng ，這個網站的壓縮我在之前關于微博的文章中有使用到(微信聊天記錄那張長圖)，他將我10M的圖片壓縮至3M，并且還能保持很好的一個呈現。

另外如果你使用的是WordPress，tinypng 還提供了對應的插件，可以快速的將圖片上傳到你的Wordpress網站。

2.啟用瀏覽器緩存

因為網站無緩存，會導致用戶每次訪問都會下載一次圖片。使用瀏覽器緩存，將圖片下載只用戶的電腦保存，當用戶再次訪問的時候，可以最快的速度打開網站。

WordPress用戶也有相關的插件：(例如W3 Total Cache 或WP Super Cache)

3.禁止圖片盜鏈

有些文章被他人轉載，復制并且保存過去，他們不會將圖片下載到服務器，而是直接使用你的圖片。這樣當用戶訪問時，也是通過下載你服務器的圖片而展現到對方網頁上。

這里我們就要禁止圖片盜鏈，盜鏈發(fā)現外部網站鏈接該圖片而直接屏蔽。

WordPress使用者也有相關插件：All In One WP Security&Firewall。激活插件后，您可以通過導航到WP Security>防火墻> Prevent Hotlinks來找到此功能 。

當然如果你使用的是阿里云OSS或者CDN，七牛云等第三方儲存，也可以在他們的后臺設置防盜鏈，具體的可咨詢第三方儲存平臺客服。

4.使用CDN內容分發(fā)服務

舉個例子：如果你的網站在國外，下載圖片巨慢。你可以將圖片使用CDN分發(fā)到國內的服務器，當用戶打開網頁，就可以從距離自己最近的服務器下載獲得圖片。當然現在CDN服務都有備案的要求。

CDN原理：如果你網站的服務器在成都，成都用戶加載網頁下載圖片飛快，而西藏的用戶卻需要很長的時間下載。CDN將圖片分發(fā)到距離西藏最近的地方。這樣西藏用戶也能最快的下載到圖片。

5.文件的格式

可以使用合適的圖片文件格式來控制來提高圖片的加載。

如：JPEG XR和WebP。

JPEG或JPG圖像可以同時使用有損和無損優(yōu)化(通常使其成為具有多種顏色的圖像的好文件格式)，PNG文件可產生更高質量的圖像，但尺寸更大(文件大小不會失控。但是常會避免使用PNG獲得復雜的視覺效果)。

6.使用延遲加載

延時加載也稱為惰性加載。

一般的網站打開頁面，會向服務器請求下載，而請求是請求整個頁面的下載地址。

而延時加載，只請求當前屏幕所能展示頁面范圍的的圖片，當用戶通過下滑到某個點，才會開始執(zhí)行下載圖片。

延時加載可以大大的減小對服務器帶來的壓力。

WordPress 也有延時加載的相關插件：Ajax Load More、A3 Lazy Load、Lazy Loader、Lazy Load by WP Rocket、Lazy Load for Videos、Speed Up – Lazy Load等插件….

總結

這里給出了6種圖片加載方案，另外本次主要使用了Wordpress做列舉。其他相關程序，如dedecms，帝國，Discuz，ecshop等在網上也有相關的教程。希望這6種方法能對站長有用。

新聞標題：如何讓網站的圖片快速加載？
網頁網址：http://bm7419.com/news/169108.html

成都網站建設公司_創(chuàng)新互聯，為您提供域名注冊、網站制作、網站內鏈、響應式網站、微信小程序、網站策劃

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯