關(guān)于如何將網(wǎng)站圖片優(yōu)化到極致的問題已經(jīng)詳細的介紹過，包括做圖片懶加載優(yōu)化，也討論過當網(wǎng)站SEO優(yōu)化與用戶體驗發(fā)生沖突時該如何選擇的問題，所以今天就以我的seo學堂網(wǎng)的實戰(zhàn)優(yōu)化經(jīng)歷來簡單的分享，利用懶加載與圖片壓縮及自動裁剪提升網(wǎng)站加載速度和性能優(yōu)化。
需求分析
首先來談?wù)劄槭裁磗eo學堂網(wǎng)為什么迫切的需要將網(wǎng)站的圖片優(yōu)化做到極致，這個就不得不從seo學堂網(wǎng)的定位和內(nèi)容方向來思考，seo學堂網(wǎng)目前專注于探索科技生活方式，致力于做電子產(chǎn)品或科技數(shù)碼類的酷品分享及測評體驗，其中文章中就無法避免出現(xiàn)較多的圖片內(nèi)容，了解一個產(chǎn)品最直觀的就是圖文方式，所以在很多的文章創(chuàng)作中我們都會在文章中適配大量的圖片內(nèi)容，有的是直接插入，有的就會使用相冊圖集功能進行插入，提升并達到文章的優(yōu)質(zhì)閱讀體驗和效果展示。
目前seo學堂網(wǎng)雖然使用的是云服務(wù)器，但是為了降低服務(wù)器成本支出，其配置為2G、1核、2M，屬于入門型配置，但是服務(wù)器放置了seo學堂旗下的所有網(wǎng)站，包括seo學堂博客，所以一天下來整個服務(wù)器都還是非常緊張的，其中最重要的是因為seo學堂網(wǎng)擁有大量的圖片直接放置在服務(wù)器，并未使用像七牛云、又拍云這類的第三方服務(wù)，雖然這兩個都提供一些免費的流量，但是對于我們seo學堂網(wǎng)來說可能就夠用一兩天吧，而目前seo學堂網(wǎng)的盈利模式并不明顯，所以不可能在服務(wù)器上做過大的投資，所以最后選擇在服務(wù)器和網(wǎng)站上做深度的優(yōu)化，依舊可以讓網(wǎng)站非常流暢的運營。
圖片優(yōu)化方案
針對于網(wǎng)站整體的圖片優(yōu)化，必要的圖片出現(xiàn)就是LOGO圖片、首頁大圖、文章縮略圖、編輯作者頭像圖片，整個頁面上下左右基本都會有圖片的顯示位置，其中最多的就是文章的縮略圖展現(xiàn)，有利于視覺沖擊和吸引點擊，下面就詳細的來分析一下seo學堂網(wǎng)的圖片優(yōu)化方案和步驟。
圖片本身的優(yōu)化處理
seo學堂網(wǎng)的各個頁面中都會大量的出現(xiàn)文章縮略圖，所以這些圖片并不能直接調(diào)用原圖片使用，所以這些縮略圖都是經(jīng)過合適大小的裁剪、質(zhì)量壓縮后再進行網(wǎng)站中的實際使用，不然直接引用原圖可能一張圖片就是幾百字節(jié)或者一兩兆的大小，并且圖片也會被css控制變形，不僅僅占用網(wǎng)絡(luò)帶寬還影響用戶體驗和整體網(wǎng)站效果。由于seo學堂網(wǎng)對圖片的處理用了一些特色的方式方法，所以并不是很方便透露。
不過大家對于圖片的優(yōu)化和處理可以通過服務(wù)器安裝圖片處理組件實現(xiàn)，同樣也可以使用像七牛、又拍等第三方服務(wù)，甚至可以用一些開源的第三方庫，如WordPress開發(fā)者喜歡使用的timthumb.php來做圖片的縮略圖處理。
圖片懶加載優(yōu)化處理
seo學堂網(wǎng)的首頁就個人審美來看，算是非常不錯的布局和結(jié)構(gòu)化展現(xiàn)了，并沒有想傳統(tǒng)的門戶布局，把內(nèi)容堆得過于繁多，因為seo學堂網(wǎng)目前的更新力度并不是非常大，所以整體的頁面設(shè)計偏向于博客或者自媒體風格，這樣的目的就是為了便于用戶能夠最直觀的看到最新更新已經(jīng)我們置頂推薦的四篇文章。
所以首頁頂部的圖片主要是有這四張置頂文章的縮略圖，在之前“網(wǎng)站該如何做好首屏的打開加載速度優(yōu)化?”的文章中就說到過關(guān)于網(wǎng)站首屏的優(yōu)化，所以為了保證網(wǎng)站首屏的加載效果和速度，所以頂部的LOGO和這四篇推薦文章并沒有做懶加載。
其中圖片優(yōu)化的重點就是具體的左側(cè)文章列表和側(cè)邊欄的文章縮略圖，所有的都做了圖片的懶加載。以此來達到網(wǎng)站打開時將服務(wù)器帶寬都給予了首屏頁面的載入，減少了服務(wù)器帶寬資源的浪費。
由于seo學堂網(wǎng)的分類頁面和標簽頁面主要內(nèi)容都與首頁文章列表一致，所以就不用過多的介紹，同樣做得是懶加載，就沒有其它什么好說的了，下面必須針對文章內(nèi)多圖片優(yōu)化詳細的分析一下。
文章內(nèi)容多圖片優(yōu)化方案
終于說到今天的重中之重了，前面的內(nèi)容其實都算是為了本文的完整性而簡單寫的，而且大多數(shù)網(wǎng)站對于上面說得也都能非常容易的做到，而對于文章內(nèi)的多圖片或者有大量圖片的優(yōu)化卻做得不是非常到位，來看看是怎樣的一個優(yōu)化思路吧!
作為一個專業(yè)的SEOer，我們要做圖片的優(yōu)化，自然離不開對搜索引擎方面的研究，看過前面寫的“解析網(wǎng)站該如何做好搜索引擎結(jié)果縮略圖優(yōu)化”文章就應(yīng)該知道，搜索引擎是會自動抓取文章中的圖片來適配搜索結(jié)果頁面的縮略圖，所以對于文章中的圖片優(yōu)化就不能全部做懶加載。
通過對搜索引擎的觀察不難發(fā)現(xiàn)，普通文章的搜索展現(xiàn)結(jié)果有三種可能，一種是有縮略圖，一種是單張縮略圖，還有一種就是四張縮略圖或者三張縮略圖的顯示結(jié)果，單張縮略圖搜索結(jié)果為最常見的，多張圖片展示的搜索結(jié)果在三大搜索引擎中都比較少。
所以為了保證搜索引擎蜘蛛抓取到足夠的圖片，我們將seo學堂網(wǎng)的第5張圖片開始做的懶加載，減少了某些文章一次性載入過多的圖片導致頁面很難加載完成的問題，也不影響搜索引擎的正常抓取。
另外還有一點的是，文章中的圖片還可以做一個優(yōu)化，雖然恨得文章內(nèi)容圖片都做了自適應(yīng)，但是不排除有些圖片確實過大，為了防止文章中插入一些像素過大的圖片流量費帶寬和網(wǎng)絡(luò)，所以還可以判斷圖片寬度超過多少像素后自動裁剪，盡可能的做到了圖片方面的深度優(yōu)化和網(wǎng)站的整體打開速度。
總結(jié)：
以上便是對seo學堂網(wǎng)多圖片深度優(yōu)化的一些解決方案，希望能夠幫助到那些可能和的網(wǎng)站有一樣境遇的朋友，同樣可以在低配服務(wù)器上游刃有余的跑一個多圖片的站點，真正的極致就是在不浪費資源的情況下依舊可以做得很好，至少覺得通過一番優(yōu)化后，網(wǎng)站的整體速度已經(jīng)非常的棒了，這就是我心中的極致追求。
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
