網站圖檔尺寸優化方案

中國廣東省深圳市龍華新區民治街道溪山美地

518131

[phone]

[phone]

版權聲明

轉載請與作者聯系，轉載時請務必标明文章原始出處和作者資訊及本聲明。

文檔出處:

<a href="http://netkiller.github.io/" target="_top">http://netkiller.github.io</a>

<a href="http://netkiller.sourceforge.net/" target="_top">http://netkiller.sourceforge.net</a>

2014-04-21

摘要

我的系列文檔

<a href="http://netkiller.github.io/architect/index.html" target="_top">netkiller architect 手劄</a>

<a href="http://netkiller.github.io/developer/index.html" target="_top">netkiller developer 手劄</a>

<a href="http://netkiller.github.io/php/index.html" target="_top">netkiller php 手劄</a>

<a href="http://netkiller.github.io/python/index.html" target="_top">netkiller python 手劄</a>

<a href="http://netkiller.github.io/testing/index.html" target="_top">netkiller testing 手劄</a>

<a href="http://netkiller.github.io/cryptography/index.html" target="_top">netkiller cryptography 手劄</a>

<a href="http://netkiller.github.io/linux/index.html" target="_top">netkiller linux 手劄</a>

<a href="http://netkiller.github.io/debian/index.html" target="_top">netkiller debian 手劄</a>

<a href="http://netkiller.github.io/centos/index.html" target="_top">netkiller centos 手劄</a>

<a href="http://netkiller.github.io/freebsd/index.html" target="_top">netkiller freebsd 手劄</a>

<a href="http://netkiller.github.io/shell/index.html" target="_top">netkiller shell 手劄</a>

<a href="http://netkiller.github.io/security/index.html" target="_top">netkiller security 手劄</a>

<a href="http://netkiller.github.io/www/index.html" target="_top">netkiller web 手劄</a>

<a href="http://netkiller.github.io/monitoring/index.html" target="_top">netkiller monitoring 手劄</a>

<a href="http://netkiller.github.io/storage/index.html" target="_top">netkiller storage 手劄</a>

<a href="http://netkiller.github.io/mail/index.html" target="_top">netkiller mail 手劄</a>

<a href="http://netkiller.github.io/docbook/index.html" target="_top">netkiller docbook 手劄</a>

<a href="http://netkiller.github.io/version/index.html" target="_top">netkiller version 手劄</a>

<a href="http://netkiller.github.io/database/index.html" target="_top">netkiller database 手劄</a>

<a href="http://netkiller.github.io/postgresql/index.html" target="_top">netkiller postgresql 手劄</a>

<a href="http://netkiller.github.io/mysql/index.html" target="_top">netkiller mysql 手劄</a>

<a href="http://netkiller.github.io/nosql/index.html" target="_top">netkiller nosql 手劄</a>

<a href="http://netkiller.github.io/ldap/index.html" target="_top">netkiller ldap 手劄</a>

<a href="http://netkiller.github.io/network/index.html" target="_top">netkiller network 手劄</a>

<a href="http://netkiller.github.io/cisco/index.html" target="_top">netkiller cisco ios 手劄</a>

<a href="http://netkiller.github.io/h3c/index.html" target="_top">netkiller h3c 手劄</a>

<a href="http://netkiller.github.io/multimedia/index.html" target="_top">netkiller multimedia 手劄</a>

<a href="http://netkiller.github.io/perl/index.html" target="_top">netkiller perl 手劄</a>

<a href="http://netkiller.github.io/radio/index.html" target="_top">netkiller amateur radio 手劄</a>

目錄

<a href="http://netkiller.github.io/journal/image.html#idp57105136">1. 背景</a>

<a href="http://netkiller.github.io/journal/image.html#idp57156640">2. 實作思路</a>

<a href="http://netkiller.github.io/journal/image.html#idp57156896">3. web或代理伺服器插件實作方案</a>

某天我的前同僚給我打電話，說他們的負載很高，經查發現網站首頁有20m，原因是首頁直接引用高清圖檔，沒有安裝分辨率生成縮圖。于是我便想出了下面的方案。

我認為方案需求有如下幾個要素：

圖檔壓縮

尺寸修改

圖檔緩存

帶寬因素

例如使用者使用手機通路網站，手機螢幕尺寸非常多樣化，常見的有qvga(320×240)、hgva(480×320)、wvga(800×480)、qcif(176×144)、svga(640x480)、wxga(1280×800)。如果一個使用者的手機螢幕是320×240，打開網站後顯示1027*768圖檔很不切合實際。同時使用者也多出不少帶寬開銷。

我們需要給使用者更好的體驗，就要多從使用者的角度去考慮，如根據使用者網速，帶寬，分辨率，為使用者提供更适合他終端的多媒體資源。

有下面幾種實作方式：

通過cookie

post傳遞給伺服器，然後存儲在session中

get 傳遞給伺服器，然後存儲在session中

僅舉一個例子

html頁面中的圖檔的引用路徑

圖檔伺服器rewrite處理

index.php會首先載入sample.jpg檔案，然後綜合網速，帶寬，分辨率等因素，重新壓縮圖檔，修改尺寸，發送mime頭，輸出正文。

首先我們要将分辨率參數放到cookie中，因為web伺服器是可以跟蹤cookie資料的

通過 web 擴充實作，例如我們開發一個apache插件，編譯後是".so"檔案，配置httpd.conf載入插件，插件具體功能是綜合網速，帶寬，分辨率等因素，重新壓縮圖檔，修改尺寸，最後展現圖檔。

反向代理與web伺服器實作原理相同