zoukankan      html  css  js  c++  java
  • 渐进式 jpg 和 交错式 gif png 提高图片站体验

    渐进式 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用户以更好的图像浏览体验

  • 相关阅读:
    MongoDB+模板引擎 项目实例-学生档案管理
    MongoDB 增删改查命令速查
    MongoDB 数据库概述及环境搭建
    Flutter 升级
    TypeScript 快速上手及学习笔记
    Android ContentProvider 启动分析
    HTTP 报文格式简介
    深入浅出 HTTPS (详解版)
    从你输入网址,到看到网页——详解中间发生的过程
    TCP 三次握手和四次挥手图解(有限状态机)
  • 原文地址:https://www.cnblogs.com/zqifa/p/html-img-1.html
Copyright © 2011-2022 走看看