渐进式 jpg 和 交错式 gif png 提高图片站体验=

渐进式的JPG比原始JPG还要小!! 让图片性感的露给你看~
google picasa 和 smashing magazine 都有用到
搞图片站的或者照片站比较适用

直接php GD库就可以再上传时候实现。

打开一些网上的相册,在加载照片的时候,如果网速比较慢加载慢的话,它会先显示一个类似模糊有点小马赛克的质量比较差的照片,然后慢慢的变为清晰的照片,这样避免了用户在浏览照片的时候页面一片空白的情况,在html中 IMG 有个 lowsrc 属性<img lowsrc="" src="" width="300" height="200" border="0" />把图片的缩略图 放在lowsrc里面,这样的话因为缩略图是缩小的,按照原图片的比例显示就会有马赛克!src里填写 原图片!这样的话,原图片比较大,下载的慢,lowsrc的缩略图小加载快,所以会先显示被拉伸的缩略图,等大图下载完成后会显示原图,这样有个时间差,就是出现先由马赛克,然后变清晰的效果!注意,测试的时候最好在远程服务器上,这样效果比较明显,本机的话,下载太快了,可能感觉不出来

交错GIF和渐进JPEG
JPEG、GIF和JPEG这三种图像格式都提供了一种功能,让图像能够更快地显示。图像可以以一种特殊方式存储,显示时先大概显示图像的草图,当文件全部下载后再填充细节。这起到一种很有意义的心理效果,因为这样使人们有东西可看,而不必坐着干等大型图像慢慢显示在屏幕上。

以这种方式保存的文件称为交错GIF、交错PNG或渐进JPEG。尽管叫法不同,但这三种格式的视觉效果类似。交错GIF或交错PNG文件首先是一块一块地显示,下载完后再填补更多的细节。同样,渐进JPEG文件首先是模糊的,然后渐渐清晰起来。

大多数可以处理GIF文件的图像软件都将图像保存为交错或非交错的。例如,在Paint Shop Pro中,可在保存GIF文件前在Save As对话框中单击Option按钮,然后选择单选按钮Version 89a和Interfaces(89a是最新的GIF版本)(见图7.11)。PNG也提供了类似的选项,允许在Save As对话框中指定存为交错的还是非交错的。

要保存为渐进JPEG文件,选择Save As(或Save Copy As),然后选择图像类型JPG JPEG,单击Options按钮,并选择Progressive Encoding而不是Standard Encoding。现在网页上使用的许多较大的GIF和JPEG 图像都是交替和渐进,给Web用户以更好的图像浏览体验

渐进式 jpg 和 交错式 gif png 提高图片站体验的更多相关文章

  1. 不用css3的响应式img(按比例缩小图片)

    有时候自己为了控制图片的响应式,按比例缩小放大图片,如果解决这个问题,用js吧,很麻烦.也会损失很大的加载运行速度等:所以我们还是用css来解决这个问题,用css来强制按比例压缩图片的高度或宽度,看代 ...

  2. 提高Scrum站会效率的一个小工具

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:提高Scrum站会效率的一个小工具.

  3. WordPress免费清新响应式博客/杂志/图片三合一主题Nana

    WordPress免费清新响应式博客/杂志/图片三合一主题Nana 一.主题安装须知 1.本主题必须安装文章点击统计插件:WP-PostViews,可以直接在后台插件→安装插件中直接搜索安装官方最新版 ...

  4. 函数计算 触发式计算 日志 MP3 图片 合成视频

    函数计算 触发式计算   日志  MP3 图片 合成视频 [start_time]:20120511 06:59:11 [20120511 06:59:11_0.4950568322522534]: ...

  5. Tesseract-OCR-v5.0中文识别,训练自定义字库,提高图片的识别效果

    1,下载安装Tesseract-OCR 安装,链接地址https://digi.bib.uni-mannheim.de/tesseract/ ​ 2,安装成功 tesseract -v 注意:安装后, ...

  6. DIV+CSS列表式布局(同意图片的应用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 响应式Web设计- 背景图片

    背景图片可以响应式调整大小或缩放,以下是三种不同的方式 1.如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域.图片保持其比例不 ...

  8. StretchBlt 提高图片显示质量的方法

    通过SetStretchMode(STRETCH_HALFTONE)实现,同时注意重新设置画刷起点 LRESULT CMainDlg::OnPaint(UINT uMsg, WPARAM wParam ...

  9. qt 提高图片加载速度

    一,将图片在pc上解析,然后将解析文件放到qrc文件中,读取qrc文件. 1,将图片解析后的二进制文件保存,源码如下, 下载地址:https://files.cnblogs.com/files/sen ...

随机推荐

  1. python中format函数

    python中format函数用于字符串的格式化 通过关键字 1 print('{名字}今天{动作}'.format(名字='陈某某',动作='拍视频'))#通过关键字 2 grade = {'nam ...

  2. 【转载】package-info

    本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...

  3. 20145303刘俊谦《网络对抗》Exp2 后门原理与实践

    20145303刘俊谦<网络对抗>Exp2 后门原理与实践 基础问题回答 1.例举你能想到的一个后门进入到你系统中的可能方式? •在网页上浏览不安全的网站或者下载不安全的软件 •通过发送邮 ...

  4. 20145315 《Java程序设计》第六周学习总结

    20145315 <Java程序设计>第六周学习总结 教材学习内容总结 第十章:输入输出 10.1.1 数据有来源与目的,衔接两者的是串流对象. read()方法每次尝试读取数据,并返回实 ...

  5. BZOJ3944: Sum(杜教筛模板)

    BZOJ3944: Sum(杜教筛模板) 题面描述 传送门 题目分析 求\(\sum_{i=1}^{n}\mu(i)\)和\(\sum_{i=1}^{n}\varphi(i)\) 数据范围线性不可做. ...

  6. NOIP 2018 兔纸旅游记

    今年是第一次参加tg呢... Day0    早上出发去中旅坐大巴,走有 lz 特色的OI比赛道路. 车上谈笑风生,看 jw 的 GDOI 的小本本. 到动车站取票入站,看 lmh 和 zn 的爱恨情 ...

  7. Codeforces Round #394 (Div. 2) A,B,C,D,E

    A. Dasha and Stairs time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. 雷林鹏分享:Ruby 正则表达式

    Ruby 正则表达式 正则表达式是一种特殊序列的字符,它通过使用有专门语法的模式来匹配或查找其他字符串或字符串集合. 语法 正则表达式从字面上看是一种介于斜杠之间或介于跟在 %r 后的任意分隔符之间的 ...

  9. 一.UTF8字符集csv文件在oracle下乱码问题处理

    1.问题描述 在excel中生成了一个UTF-8编码格式的csv文件准备导入数据库,在notpad++下打开显示正常,编码集为UTF-8,通过pl/sql dev导入oracle是出现乱码,此时初步推 ...

  10. 远程使用tomcat8的首页的管理工具

    1.在%Tomcat_Home%/conf/Catalina/localhost中新建manager.xml,内容如下 <Context privileged="true" ...