web中图片的优化

最新推荐文章于 2024-09-25 09:53:04 发布

宵晓cs

最新推荐文章于 2024-09-25 09:53:04 发布

阅读量814

点赞数

分类专栏： web php 文章标签： web 前端图片性能优化

php 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

web

16 篇文章 0 订阅

订阅专栏

提高图片的加载速度

1、图片格式的选择
搜索引擎喜欢高质量图片。
2、切除图片空白部分

切除多余的空白，减小图片体积，缩短加载时间。
3、把图片剪切成实际需要大小，避免使用定义大小
比如有一张600*500的图片，但文章需要400*350的图片，正确的图片优化方法是：直接把图片修改成400*350，而不是在中定义。
4、控制jpg图片的质量

质量高的jpg格式图片比较清晰，色彩更鲜艳，不少人就用这种图片来美化header，其实这对速度的影响是很大的。

5、尽量使用gif格式

在制作小图标或带有小字体的图片时，优先使用gif格式。gif格式能显示的颜色数量最多为256色，对不包含大量色彩渐变的图片来说，已经是非常足够了。

6、如何插入装饰性图片

用img标签插入图像，用这种方法插入页面小图标等装饰性图片弊端是非常大的。首先，用img标签插入的图片不能通过简单的方法实现变换效果，美化效果要打个折扣。其次，用img插入的图片，如果图片不在浏览器缓存里，而且不重复出现的话，会大大增加http请求数。因为img标签理论上是出现一次载入一次的。其三，用img标签不利于调整图片位置，如果一个图片，需要在header靠右和footer靠左这两个位置出现两次，你就需要为它写两次css。其四，用img标签插入图片不利于整合，整合图片可以大大减少http请求数，看下节。

7、页面背景图片的处理方法

很多人喜欢用图片做页面元素的hover变换效果，但是却没有把相关的图片整合，导致一些变换效果有事会因为图片载入失败而失色。我们可以把针对某个效果的图片都整合成一个文件，在css里用background-position属性调整图片位置。这种做法的好处是背景只需要一次http请求，图片可以重复调用，也有利于图片变换。看到这里，你知道装饰性图片应该怎么插入了吗?对，用css。

5、插图尽量使用外链

由于性能的限制，一般非独立主机都会限制单ip的http请求数，如果一个页面里http请求太多的话，页面往往要等很久才能完全载入。特别是图片，如果太长时间不能加载的话，浏览器就会断开与的链接，这是就需要在点击一下显示图片才能显示出来。因此我强烈建议各位空间有限、流量有限的站长们，尽量用外链图片来做文章插图。比较好的支持外链的相册有picasa、flickr和国内的yupoo等。这样做不但能减轻压力，节约流量，更重要的是，我不相信大部分站长用的比那些专业的在线相册快。

网站要想加载快无非就是减少http请求次数

1：字符集声明

如果<head>部分未定义字符集，将增加页面渲染次数，速度减慢。

2：Meta信息完善程度

建议网站meta信息填写完整

3：合并域名

4:取消重定向

无论是通过服务器端重定向或者JavaScript代码进行内容重定向。网站都会首先加载一个空白的页面，然后在定向到另外的页面，这样不仅延长了页面的加载时间，还很有可能导致无法跳转，让用户面对一个“空白”页面。

5:合并JS

清除重复多余的脚本,将网站中的js封装到一起,缩小JavaScript比如去除不必要的空格等其他标签等

6:合并CSS

将网站中的css封装到一起

7:使用Css Sprite

CSSSprites简介CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。

8:启用Gzip

9:CSS位置

建议将他们放到<body>前,CSS放在<body>后，页面需要重新渲染，打开速度受到影响。

10：js位置

JS放在页面最后，可以加快页面打开速度。

11：图片大小声明

如果图片大小不做定义，则页面需要重新渲染，速度受到影响。

12：图片Alt信息检测

建议为网页img标签增加alt信息（检测信息为整个页面图片，加入这项信息可使网页上的图片更容易被用户检索到）

13：去除错误连接

无法打开的连接，会导致页面打开缓慢，请及时修正或删除。并给网站做404。

14：缓存静态资源

变化很少的静态资源可以设置客户端缓存，减少请求。比如一篇文章发布后就不在改了，这样就应该生成html文件，来提高网站加载速度。

15：URL长度检测

建议URL长度在256字节以内，有关url更多建议参考

16：在静态页面上不建议使用动态参数

在静态页面上使用动态参数，会造成spider多次和重复抓取“检测出很多.php的URL，其实就是动态网页

17：尽量不用Frame/iFrame

18:Flash不要出现没必要的文字信息

19:减少域名DNS查找时间

用户在浏览器的地址栏中键入域名后，浏览器就会通过DNS系统查找域名对应的IP地址，所以需要将DNS的时间设置在较低的水平，比如平均60-100毫秒进行一次DNS查询。

各种网页图片缓存控制设置方法

WordPress博客里大量的图片会使页面加载速度变得缓慢。此时访问者需要用更多时间才能打开一个页面。不过我们可以通过缓存图片来解决这个问题。当页面第一次被加载时，将所有图片存放在浏览器的缓存池里。之后访问者再加载该页面时，浏览器就可以从浏览器缓存中获取图片，从而减少页面加载时间。

对Apache服务器上的WordPress博客/网站，可以通过编辑根目录下的.htaccess文件来激活图片缓存功能。浏览器能够简单读取.htaccess文件的缓存控制头，而缓存头会要求浏览器将图片或其它任何媒体保留2周时间（或者更久），这样浏览器就能够随时调用图片，直到图片过期。两周后浏览器重新将过期的图片存入缓存。万一浏览器缓存被清空，浏览器会从缓存中重新加载图片或其它媒体。

下面就是对如何在WordPress博客/网站上激活图片缓存的过程详解。

如果你希望提高网站的运行效率，就应该启用网络服务器上的图片缓存功能。详细步骤如下：

注意：做任何改动前请先备份网站数据域.htaccess文件。

1. （在FTP中）打开根目录下的.htaccess文件

2. 在.htaccess文件中加入如下代码：

1: # Image and Flash content Caching for OneMonth

2: <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">

3: Header set Cache-Control"max-age=2592000"

4: </FilesMatch>

3. 编辑完毕后保存文件。代码中“max-age”参数的值为2592000（秒），因此图片缓存和Flash内容缓存在浏览器中保留一个月。

如果这个方法能够奏效，你的网站访问速度将会有很大改善。