別讓網頁圖片降低網站效能 - 談談網頁圖片處理新趨勢
来源:互联网 发布:mybatis如何打印sql 编辑:程序博客网 时间:2024/05/24 03:41
其中, 網頁中的圖片, 始終是網頁效能瓶項中的一環。別以為你的圖片很小; 當有大量使用者在同時存取時, 問題馬上就會突顯出來。
在這裡我要介紹一下業界怎麼處理這類問題的。首先, 如果你設計的是商業網站 (再強調一次, 如果你做的只是小規模網站, 我真的奉勸你不用麻煩了), 那麼當你設計好網頁圖形之後, 一定要想方法把它的檔案大小盡可能的壓縮。我建議你可以考慮採用 PNG 格式, 因為這種格式可以把圖形壓縮到非常的小, 而且當今絕大多數瀏覽器都已支援。如果你不相信的話, 你可以上http://www.gracepointafterfive.com/punypng 這個網站試一試, 把你的圖片丟上去, 看看它能不能再被擠出一點空間出來。
其次, 像 YouTube 這種大型網站, 坦白說, 它的網頁上的靜態圖形真的不多, 也不大, 但是他們也針對這一方面做了效能上的調整。他們是怎麼做的呢? 他們是把網頁上所有用得到的圖片都放在一張大圖裡面, 然後利用 CSS 去截出所需要的片段。其實這一整張「大」圖也不會很大, 容量更是只有 12K 而已。但是從這點你就可以看出來, 人家對這一丁點容量都是斤斤計較的。我相信, 如果你的網站規模已經大到具有上億使用者時, 你的思慮也要這麼細密才行。
在他們的理論中, 下載一張較大的圖, 比下載多張小圖要來得快速而有效率。我個人是沒有做過這種評比, 但是看在人家有上億使用者的份上, 我相信他們絕對不可能是吃飽了撐著; 我相信他們絕對有他們的理論基礎。
在實務上, 人家是怎麼辦到的呢? 你看看以下的 CSS 碼就可以了然於胸:
<style type="text/css">
.bigpicture
{
background: transparent url(http://"MyBigPictureUrl") repeat-x scroll 0 0;
border: 0;
padding: 0;
}
.smallpicture1
{
width: 18px;
height: 18px;
background-position: -108px -680px;
}
</style>...
<img class="bigpicture smallpicture1" />
在這裡我定義了 bigpicture (在這裡指定大圖的位置) 與 smallpicture1 兩種樣式, 然後藉由在個別 img 控制項中調整樣式組合, 再把所需要的那個圖形片段給截出來。在這個範例中, 你可以先設定好 smallpicture1 的樣式, 再指定 class="bigpicture smallpicture1" 以截出這個小圖。如果你要截出另一個圖, 那麼就再設定 smallpicture2 的樣式, 再指定 class="bigpicture smallpicture2" 就行了。不過要去找出那個 background-position 的值, 恐怕要額外花費一番小功夫, 這就是採用這種方法的小小代價。
转自:http://www.dotblogs.com.tw/johnny/archive/2010/01/25/13287.aspx
- 別讓網頁圖片降低網站效能 - 談談網頁圖片處理新趨勢
- 【转】效能...效能...效能!!
- 7. 效能监视
- .Net效能優化體會
- SQL Server 效能优化
- 屏蔽效能预估
- 程序的效能优化
- 调校SQL效能
- HTML5相关资源--效能
- Hibernate 效能问题
- 如何分析ABAP效能
- .NET 内部效能插件
- 光视效能
- 自我效能感
- 算法效能分析
- 降低耦合。。。
- 降低耦合
- 降低约束条件
- import module VS from module import *
- Eclipse Indigo安装插件问题
- seo复习,使用插件ieHTTPHeaders查看服务器返回的http协议报头
- 对Jquery+JSON+WebService的一点认识
- 恢复win7快速启动栏
- 別讓網頁圖片降低網站效能 - 談談網頁圖片處理新趨勢
- zoj 3190 Resource Archiver 【构造最短不含病毒串的串】
- 雷神的微软平台安全宝典---第二章 简介
- DOS批处理中%cd%和%~dp0的异同
- 生产者-消费者模式
- MVC 3.0 Areas(区域)的使用
- 拥抱变革
- org.springframework.orm.hibernate3.HibernateSystemException: No default constructor for entity: ****
- Image 控制項圖片動態調整大小