有了图床神器 iPic，不论屏幕截图、还是复制图片，都可以自动上传、保存 Markdown 格式的链接，直接粘贴插入，够懒人吧？

使用 Hexo | Heroku 或 WordPress 写博客、在公众号发文章、在知乎讨论、在豆瓣灌水、在论坛发帖、跨境做外贸电商 …

iPic 带给你从未有过的插图体验。

当然，除了图片，你可以 上传普通文件，上传方式与图片完全相同。

上传方式

图床工具 iPic 支持多种图片上传方式。下面我们来简单看下各个上传方式、以及分别适合在什么场景下使用。

1. 拖拽图片上传

拖动是比较好玩的一种上传方式。只要将图片拖到菜单栏的 iPic 图标上，松手后就可以自动上传。

可以注意到，上传时菜单栏图标也会显示上传的进度。很简洁、却很实用，不再盲目等待。

使用这种方式，还可以一次性上传多张图片。图片上传后的顺序，和上传前选择的顺序一致。

2. 使用服务上传图片

在 Finder 中使用 服务 上传也是很高效的方式。只要在图片上右击、然后选择服务中的 使用 iPic 上传 即可。

除了使用菜单，更高效的方式是使用快捷键。只要选中图片，然后按下 Command + U 快捷键，即可自动上传。

如果你觉得默认快捷键 Command + U 不方便，也可以在 系统偏好设置 > 键盘 > 快捷键 > 服务 中修改 使用 iPic 上传
对应的快捷键。同样，如果你的 Mac 中安装了很多程序、菜单中有很多你不需要的服务，也可以在这里进行关闭。

使用服务上传还有其他便利之处：

• 可以一次性上传多张图片

• 即使 iPic 并未运行，系统也会启动 iPic、并自动上传

注意：由于 macOS 系统更新机制的缘故，新安装 iPic 后上传服务可能未出现、或未翻译，可以等几分钟、甚至几小时后再试，iPic
上传服务就会正常显示；也可以在 终端 手动更新服务菜单：

/System/Library/CoreServices/pbs -update

3. 复制图片后上传

iPic 会自动监测剪切板的变化，当复制图片后，该图片会出现在 iPic 菜单中 待上传
区域。如果需要上传，点击菜单中该图片即可。手动上传比较适合临时上传少量图片。

除了手动点击菜单，还可以使用快捷键 Command + Shift + U 上传。当然，可以在偏好设置中修改此快捷键。

4. 上传其他 App 中的图片

上述示例中主要介绍了图片文件的上传。另外，iPic 还支持支持其他程序中图片的上传。例如：

其中，对于图片格式，常见的 jpg、png、gif 等格式都是支持。

上传图片相关设置

上传前压缩图片

可以在 iPic 的 偏好设置 中开启「上传前压缩图片」选项，目前支持压缩的图片格式：jpg、png、gif

采用有损压缩，压缩后肉眼几乎无法看出区别，却可明显降低图片尺寸。使用压缩后的图片，既可以节省图片的存储空间，还可以加快图片加载速度、节省流量。

上传后不播放声音

iPic 上传后会使用系统通知来提示。如果不喜欢该通知的声音，可进入 系统偏好设置 > 通知，在左侧列表选择 iPic，然后在右侧取消「播放通知的声音」。

图床

图床也即你选择存放图片的云服务。可以在 iPic 的 偏好设置 中添加你的图床：

添加后，可以在 iPic 的菜单中选择当前使用的图床：

目前 iPic
支持下列图床：微博图床（即默认图床）、七牛云
、又拍云、阿里云
OSS 、腾讯云
COS
、Imgur 、Flickr 、Amazon
S3

iPic 菜单

Markdown 链接

这里有个很贴心的功能：切换普通链接、Markdown 格式链接时，如果粘贴板中有上一格式的内容，会转换后重新保存到粘贴板中。

图片上传记录

iPic 会保存最近上传的 15 张图片，其中最后上传的 3 张图片会出现在一级菜单中，其他的则在 更多已上传图片 中。

点击已上传图片，则会复制该图片的链接。

当然，可以在 更多 菜单中清空图片上传记录。

iPic Mover

iPic Mover 可以一键将已有
Markdown 文件中所有图片迁移至新图床。批量上传图片、图床搬家，从未如此简单。

iPic Mover 更多介绍

其他

媒体报道

下载 iPic

配合默认图床，可免费使用所有功能。如需使用其他图床，订阅 iPic 高级版即可。暂不支持 Windows.

如果你觉得 iPic 还不错，欢迎 到 Mac App Store 给个 5
星、写点评论。当然，如果能分享给周围也需要
iPic 的朋友，那就太赞了 ^_^

商家在选择图床的时候，请慎重选择免费图床，毕竟众多免费图床网站注册条款里有禁止商用这一条，哪天关闭了图片外链或者商用，势必给用户带来很大的麻烦，很多免费图床总是好景不长，为什么呢？其实很简单，做相册站是要投入的，比如服务器、带宽、人员、技术投资、市场宣传等等！完全免费了，这些小站可能自己都难存活，所以总是不能长久使用！

国内：

1、外链吧

有免费和收费的，100M 永久免费，收费相对便宜。不限外链、流量图片支持外链到所有网站。图片搬家、原图替换、水印、防盗链功能免费使用。

2、又拍网

付费外链，按流量和空间付费。价格比较贵

3、巴比豆

付费外链，价格和淘宝图片空间相同。

4、幻域图床

国内轻量级图床，采用国内cdn进行加速，图片加载速度快！需要注册即可上传图片，无限储存容量！

国外：

1. 美国TripnTale – 无限免费旅游网络图片相册

美国TripnTale是一个免费旅游图片存储空间，提供无限量的存储空间，但有个要求是你上传的图片必须和旅游相关的。支持上传jpeg、gif、
bmp、png格式图片，单个图片最大为6M，图片可以从flickr、picasa等中直接导入，然后给上传的图片进行注释，在地图上进行标注，最后发 布即可。

另外，还支持视频文件上传存储，单个视频最大为100M，上传速度还可以，图片能支持外链，后台能对图片进行管理，还能写日记，很适合旅游爱好者

2. 美国Tinyalbum – 无限免费相册+支持外链

Tinyalbum
是一个提供免费相册空间和图片存储服务的网站，服务器位于美国亚利桑那州斯科特斯德市，界面上与Flickr有些相似，支持外链。TinyAlbum的操
作上比较简单方便，上传速度也不错，能同时上传多张图片，相册能设置公开和私有。

另外，TinyAlbum对上传图片数量没有限制，单张图片限制在8M以
内，但只能上传jpg、png格式的图片。在网站还能看到其他用户的相册，在后台用flash浏览自己的图片时，很好玩哦，图片会随着鼠标动，这种效果很 好.

3. 瑞士overpic – 免费无限网络相册

瑞士overpic提供免费的无限网络相册，无需注册就能上传，能支持外部链接，同时能上传10张图片，单个上传图片的大小限制为10M，支持的图片格式
为：JPEG、JPG、BMP、PNG、GIF。可设置保存时间（一天、一周、一个月、三个月、六个月、永久），也能通过图片的网络地址来上传图片，但不是很稳定，上传完图片之后会自动生成一些html代码，论坛代码等方便用户复制代码进行外链

4. 美国imgplace – 提供无限的免费相册

美国imgplace提供免费的图片空间，能上传flash，图片，zip文件等，flash需要注册才能上传，其他不用注册也能上传，zip文件里面能放
100张图片，但里面不能建文件夹，上传后会自动解压支持的图片格式有jpg, jpeg, gif, and
bmp。上一次最多能上传50张图片，但图片加在一起的总大小不能超过100M，单个文件不能超过3M，没有带宽限制，但页面上广告很多，页面不是很好

5. 加拿大tinypic – 免费相册和视频空间

加拿大tinypic提供免费的相册和视频空间，是Photobucket旗下的一个网站，成立于2003年，由Alex Welch 和 Darren
Crystal 创办，每月有3900万的访问者，其中一半是来自美国的。

不用注册就能上传，上传的空间无限制，上传时可以改变图片的大小，有多种大小供选择，当然注册了
更好，能建立自己的相册和视频空间，支持多个文件同时上传，图片上传后会产生一个很短的地址，能直接进行外部引用链接。还能对图片进行编辑，提供很多的编
辑工具，基本上能满足你的要求,去体验吧，相当不错的一个空间了

6. 美国xs – 完全支持外链的图片空间

美国xs提供无限免费的图片空间，完全支持外链(以测试过），而且不用注册就能上传图片，支持上传JPG, JPEG, GIF, PNG, BMP, TIF,
TIFF等格式的图片，单个上传文件最大为2Mb，能同时上传多张图片，每次上传最大数为500，只要你知道图片的网络地址也能上传图片，只要你的图片每
月有一个点击量就不会删除你的图片，后台还支持FLASH相册制作，提供多种引用形式

7. Flickr – 免费相册支持外链

Flickr 是目前世界上最好的线上相片管理和分享应用程式之一。Flickr是由加拿大Ludicorp公司所开发设计。该公司于2004年2月正式推出
Flickr网站。Flickr于2005年3月被雅虎收购，在6月,所有的资料都从原本位于加拿大的服务器迁入美国，使得所有的资料都受到美国联邦法的 管辖。

上传速度还不错而且还支持外链，有很多图片网站都是利用这个相册来装图片的，还能对你的图片进行特效外理以及在线图片编辑功能，每月上传空间限制在
100M，但如果超过90天未登录，你帐号下的图片将会被删除。

8. Dumpt – 提供无限免费图片空间无需注册

Dumpt 是来自美国伊利诺伊州的无限免费空间，无需注册就能使用，页面很简洁，在首页就能上传，支持多文件上传，一次最多能上传10张图片，最大上传文件为3M，
不但可以上传本地电脑上的图片，还可以上传URL网络图片，可以设置上传的图片为私有或公开。上传格式支持：JPEG, .JPG, .GIF,
.PNG,.BMP。上传图片后可获得很多图片的外链地址，方便引用图片。

9. Pict –捷克的一个免费相册

它和别的相册不同，页面很特别，打开首页就是一个相册，你会看到有很多的很多的正方形框，上面标有“Upload images”，点击任意一个即可上传图片，
允许上传JPG/PNG/GIF等格式的图片，
最大上传的图片尺寸为3.5M。同时可选择多张图片上传，最多同时能上传多张不详，我曾选择过100多张图片同时上传也可以，首页会自动变长，方框会自动
增多。不过上传多了，会减慢上传速度。

在网站底部会看到“Share this album”地址，通过这个网址可以链接到这个相册，图片支持外链，点击相册图片上的“Share
it”，即可出现引用地址。

10. RockYou – 无限图片上传空间+闪秀相册

RockYou
是来自美国的免费网络FLASH相册网站，主要面对客户是博客使用者，现在在美国有大量的人在使用，网站提供电子相册、刮刮卡、闪闪靓字、靓字闪图、动态
相册等BLOG扩展服务。目前，网站已经推出了中文版本。

你可以无限制的上传图片. 图片的格式必须为jpeg, gif, 或者 png；每张图片的大小不得超过 3
M，你可以无限制的创建你的闪秀相册。想拥有多少，就拥有多少！用户可进行隐私设置。

11 . Thumbsnap – 非常简单好用的图片存储空间

Thumbsnap是来自美国乔治亚州的一个非常简单，好用的免费图片存储空间。界面简洁无广告，无需注册即可上传图片，对上传图片张数无限制，支持.jpg,
.jpeg, .gif, .png格式的图片。支持的最大上传图片大小为2M。而且还支持图片外链。

上传非常简单，进入网站首页后，点击”UPLOAD
Photo”按钮，选择一张图片即可自动上传，上传速度非常不错。上传完成后可获得图片的分享代码，提供4种代码。可通过点击”More Link
Codes”来获得图片的直接外链地址（Direct Link）。还可能过E-mail来分享。

12. SharePiks – 无需注册的免费图片存储空间

SharePiks
是来自美国的一个免费图片存储空间，支持上传的最大图片为5M，无需注册即可上传。不允许上传违反法律的图片，图片也不可用于邮件发送、商业广告等。如上
传了以上图片将会被删除，非以上图片可以永久保存。SharePiks不会公开你上传的图片，除非是你指定的人。

图片上传后会获得四种外链代码，有图片的直接外链地址、引用地址、HTML代码、论坛代码。也可通过点击”Click here to share this
image with your friends”来将你的图片发送给你的朋友进行分享。

13. 美国imgur – 简单实用的无限外链相册

Imgur 是来自美国的一个免费网络相册，非常简单实用。Imgur由美国俄亥俄州大学的学生Alan
Schaaf创建，Imgur的服务器位于美国得克萨斯州达拉斯市，其Alexa世界排名为1283，Imgur免费相册流行于美国、印度、英国、德国、
加拿大、澳大利亚等国家。

使用Imgur相册时，不需要注册，Imgur不限制图片上传空间，支持图片直接外链，支持的图片格式有JPEG, GIF, PNG, TIFF, BMP,
PDF, XFC (GIMP)。但TIFF, BMP, PDF,
XFC格式的图片上传后会转换成PNG格式。非动画图片允许上传的最大为10M，但超过1M的图片都会被压缩成1M，允许上传的动画图片最大为2M（包括
PNG、GIF），只要图片每3个月有一个浏览量，图片会被永久保存。可上传本地图片或通过图片URL地址上传。

14. 德国Imagez– 无需注册可外链的免费相册

Imagez是来自德国的一个免费相册，无需注册即可使用，且支持直接外链。支持上传jpg, jpeg, png, bmp,
gif格式的图片，最大单个文件最大为5M，注册用户限制在10M，支持批量上传，还可上传zip文件。注册用户还可对相册设置密码保护。上传速度还不 错。

15. 美国Fotki– 支持FTP可外链的无限免费相册

Fotki是来自美国弗吉尼亚州的一个在线免费相册，成立于1998年，是一个比较老牌的相册了。存储空间容量不限，可创建多个相册，创建时可对相册设置
访问密码。支持jpg、jpeg、png、psd、gif、bmp、tif、tiff图片格式，但上传的图片都会被转换成jpeg格式，单张图片大小限制
不祥，免费注册为Fotki用户，可以使用Java、ActiveX控件、软件客户端、网页、URL网址、FTP、手机、E-Mail等多种方式上传图
片。图片支持外链，可通过右键点击图片，查看属性，找到外链地址。

Fotki除提供免费相册外，还提供免费日记本、免费留言板、免费论坛等免费服务。还支持上传某些网站的视频如：youtube，但不支持国内视频网站上的视频上传。

16. 幻天图床

国外轻量级图床，采用了国外cdn加速图片缓存，操作简单方便！无需注册！即可上传图片。无需付费，空间图片无限制。

#####
我们在PC端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤其常见(模糊图如下),这种效果就叫做渐进式加载.渐进式加载能够大大的提升体验感,我们先来了解一下渐进式加载的原理.

(图片来自网络)

1.JPEG

要做到渐进式加载,我们的图片需要是JPEG格式,而JPEG格式的图片又分为两种,我们要做到渐进式加载的话,需要的是Progressive

JPEG.

(1)Baseline JPEG（标准型）

这种格式的图片在保存信息的时候,是从上往下,将每一行的数据顺序的保存起来的,所以读一部分就展示的话,那么效果就会像是从上往下一点一点展示.

(图片来自网络)

(2)Progressive JPEG（渐进式）

这种格式的图片在保存信息的时候,是一帧一帧的存储的,如果逐帧逐帧的读的话,就会先看到模糊图,然后一点一点变清晰

(图片来自网络)

(图片来自网络)

2.解码

如何判断是否JPEG格式的图片呢?下面引用一段Glide框架的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//ImageHeaderParser.java


private static final int EXIF_MAGIC_NUMBER = 0xFFD8;

// JPEG.


if (firstTwoBytes == EXIF_MAGIC_NUMBER) {


return JPEG;

}

我们可以看出,JPEG是以FFD8开头的

其实JPEG是以FFD8开头,FFD9结尾,FFDA代表一个帧的开头

FFD8 … FFDA … FFDA … FFDA … FFD9

1

Baseline JPEG 里面只有一个FFDA

Progressive JPEG 里面含有多个FFDA

比较完整的数据结构如下

(图片来自Wiki)

https://en.wikipedia.org/wiki/JPEG

3.如何保存或者转换成JPEG

(以下转换方法来自网络,由于非Java代码,所以没有做验证,特此说明一下)

1、PhotoShop

在photoshop中有“存储为web所用格式”，打开后选择“连续”就是渐进式JPEG。

据说，需要勾选那个转换为sRGB选项，在某些浏览器下，图像设置为CMYK会出现一些问题！

ps保存为png-24且勾选交错才能把图片保存为渐进式图片

测试效果如下：

2、Linux

检测是否为progressive jpeg ： identify -verbose filename.jpg | grep Interlace（如果输出
None 说明不是progressive jpeg；如果输出 Plane 说明是 progressive jpeg。）

将basic jpeg转换成progressive jpeg：> convert infile.jpg -interlace Plane
outfile.jpg

3、PHP

使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。

1
2
3
4
5
6
7
8
9
10
11

<?php

$im = imagecreatefromjpeg('pic.jpg');

imageinterlace($im, 1);

imagejpeg($im, './php_interlaced.jpg', 100);

imagedestroy($im);

?>

4、Python

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import PIL


from exceptions import IOError


img = PIL.Image.open("c:\\\users\\\biaodianfu\\\pictures\\\in.jpg")


destination = "c:\\\users\\\biaodianfu\\\pictures\\\test.jpeg"

try:


img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)


except IOError:


PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]


img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

5、jpegtran

1

jpegtran -copy none -progressive <inputfile><outputfile>

6、C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) {


ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType
== "image/jpeg");


EncoderParameters parameters = new EncoderParameters(3);


parameters.Param[0] = new
EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);


parameters.Param[1] = new
EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod,
(int)EncoderValue.ScanMethodInterlaced);


parameters.Param[2] = new
EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod,
(int)EncoderValue.RenderProgressive);


source.Save(@"D:\temp\saved.jpg", codec, parameters);


}

7、C#转换

据说是如下的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) {

ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType
== "image/jpeg");

EncoderParameters parameters = new EncoderParameters(3);

parameters.Param[0] = new
EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);

parameters.Param[1] = new
EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod,
(int)EncoderValue.ScanMethodInterlaced);

parameters.Param[2] = new
EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod,
(int)EncoderValue.RenderProgressive);

source.Save(@"D:\temp\saved.jpg", codec, parameters);

}

8、java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/**

* 转换图片为 流式加载

* @author zhaosx

*

*/

public class ProgressiveJPEG {

  

    public static void main(String[] args) throws Exception {

        File file=new File("Z:/2.jpg");

        BufferedImage image = ImageIO.read(file);

        Iterator<ImageWriter> it =
ImageIO.getImageWritersByFormatName("jpeg");

        ImageWriter writer=null;

        while(it.hasNext()) {

             writer=it.next();

             break;

             //System.out.println(it.next());

        }

        if(writer!=null) {

             ImageWriteParam params = writer.getDefaultWriteParam();

             params.setProgressiveMode(ImageWriteParam.MODE_DEFAULT);

             //params.setCompressionQuality(0.8f);

             ImageOutputStream output = ImageIO.createImageOutputStream(new
File("Z:/22.jpg"));

             writer.setOutput(output);

             writer.write(null,new IIOImage(image,null,null), params);

             output.flush();

             writer.dispose();

             System.out.println("ok");

        }

  

    }

  

}

4.效果

明白了渐进式加载的原理后,我们就能想办法在app端也做到渐进式加载的效果了.

(大概就是判断是否JPEG图片,然后根据每一帧的节点来判断并决定是否需要加载)

下面展示一下效果图

(1)原图

(Progressive JPEG的图一打水印就变成Baseline JPEG,应该是CSDN打水印保存的时候处理了)

(2)解码到第一个FFDA与第二个FFDA的中间

(3)刚好解码到第二个FFDA

(4)解码到第五个FFDA

需要看图片二进制结构的,可以下载一些工具(如hex-editor-neo)

hex-editor-neo下载

图片的尺寸大小

同一张jpg图片，如果保存为基本式和渐进式那个尺寸更小呢？

根据我拿3终不同风格图片做测试，发现，百度百科中所说的渐进式图片的大小比基本式的小是不准确的。

其中，两者大小关系基本上没有什么规律。下面是我的测试结果：

图片品质59%及其以下时候，渐进JPEG图片更小；品质60%及其以上，基本JPEG更小
图片品质82%及其以上时候，渐进JPEG图片更小；品质81%及其以下，基本JPEG更小
无论图片品质多少，都是渐进JPEG图片更小

不过，个人臆测，从概率学上讲，大多数情况下，渐进式JPEG比基本式图片尺寸小一点。然而，其中的大小差异与原图尺寸相比，不值一提，因此，所谓图片大小不能作为两种图片选择的依据。

下载呈现速度

一个名叫Ann Robson的人，最近对各个浏览器下渐进式图片呈现做了测试。

下图为FireFox浏览器下呈现速度的对比图：

当大图轮廓加载OK的时候，小图最后一个乳猪还没有出世面；而基本式乳猪图还没有开始加载！显然，罗伯森是想告诉我们，渐进JPEG下载更快。

下表为其在各个浏览器下测试的结果：

浏览器 (特定测试版本) 渐进jpeg前景渲染 渐进jpeg背景渲染
Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win) 渐进地 (相当快！) 渐进地 (相当快！)
Firefox (v 15.0.1 Mac, 12.0 Win) 渐进地 (相当快！) 文件下载后立即地(慢)
Internet Explorer 8 文件下载后立即地(慢) 文件下载后立即地(慢)
Internet Explorer 9 渐进地 (相当快！) 文件下载后立即地(慢)
Safari (v 6.0 Desktop, v 6.0 Mobile) 文件下载后立即地(慢) 文件下载后立即地(慢)
Opera (v 11.60) 文件下载后立即地(慢) 文件下载后立即

结论很简单，Chrome + Firefox + IE9浏览器下，渐进式图片加载更快，而且是快很多，至于其他浏览器，与基本式图片的加载一致，至少不会拖后腿。

Scott Gilbertson对渐进式图片有其他的补充：

1. 你用永不知道基本式图片内容，除非他完全加载出来；

2. 渐进式图片一开始大小框架就定好，不会像基本式图片一样，由于尺寸未设定而造成回流——提高的渲染性能；

3. 渐进式图片也有不足，就是吃CPU吃内存。

内容就是这些，权衡使用在你手。一般而言，大尺寸图片建议使用渐进式JPEG.

另一种实现

图片在加载过程中由模糊到清晰的一个加载过程，需要两张图片实现，一张体积比较小，一张为原图，体积比较小的图片会先加载成功，然后对其进行模糊化处理，直到原图加载成功后，用原图替代体积较小的图。

css filter模糊处理：

html

1
2
3
4
5
6
7
8
9
10

<div class="placeholder" data-
large="<https://pic2.zhimg.com/50/v2-c5174d0b98facea9584e7766862decdd_400x224.jpg>">

    <img
src="<https://pic2.zhimg.com/50/v2-c5174d0b98facea9584e7766862decdd_60w.jpg>"
class="img-small">

    <div style="padding-bottom: 66.6%;"></div>

</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

.placeholder {

    width: 200px;

    background-color: #f6f6f6;

    background-size: cover;

    background-repeat: no-repeat;

    position: relative;

    overflow: hidden;

}

  

.placeholder img {

    position: absolute;

    opacity: 0;

    top: 0;

    left: 0;

    width: 100%;

    transition: opacity 1s linear;

}

  

.placeholder img.loaded {

    opacity: 1;

}

  

.img-small {

    filter: blur(50px);

    /* this is needed so Safari keeps sharp edges */

    transform: scale(1);

}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

window.onload = function () {

  

    var placeholder = document.querySelector('.placeholder'),

    small = placeholder.querySelector('.img-small')

  

    // 1: load small image and show it

    var img = new Image();

    img.src = small.src;

    img.onload = function () {

        small.classList.add('loaded');

    };

  

    // 2: load large image

    var imgLarge = new Image();

    imgLarge.src = placeholder.dataset.large;

    imgLarge.onload = function () {

        // small.classList.remove('loaded');

        imgLarge.classList.add('loaded');

    };

    placeholder.appendChild(imgLarge);

}

canvas模糊处理：

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="figure">

    <div class="aspect-ratio-fill"></div>

    <img id="smallImg" class="small-img" crossorigin="anonymous"
src="<https://pic2.zhimg.com/50/v2-c5174d0b98facea9584e7766862decdd_60w.jpg>"

        alt="">

    <canvas id="canvas" class="canvas"></canvas>

    <img class="big-img" data-
src="<https://pic2.zhimg.com/50/v2-c5174d0b98facea9584e7766862decdd_400x224.jpg>">

</div>

css

.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

figure {

    position: relative;

    width: 200px;

    overflow: hidden;

}

  

.aspect-ratio-fill {

    padding-bottom: 66.67%;

}

  

.figure img,

.figure canvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100% !important;

    height: 100% !important;

    opacity: 1;

    transition: opacity 2s linear;

}

  

.canvas.loaded {

    opacity: 0;

}

  

.small-img {

    display: none;

}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

let smallImg = document.querySelector('.small-img'),

    canvas = document.querySelector('.canvas'),

    bigImg = document.querySelector('.big-img');

ctx = canvas.getContext('2d');

smallImg.onload = function () {

    StackBlur.image(smallImg, canvas, 20, true);

    if (bigImg.getBoundingClientRect().top > 0 &&
bigImg.getBoundingClientRect().bottom < window.innerHeight) {

        bigImg.setAttribute('src', bigImg.dataset.src);

        bigImg.onload = function () {

            canvas.classList.add('loaded');

        }

    }

}

Jpeg渐进式图像数据解析

为了更好的优化客户端体验，客户端在图像压缩的时候采用了渐进式Jpeg压缩。渐进式Jpeg的好处是，只需要很少的一部分数据包，就能够解码出一副完整的图像，随着数据的增加，图像会不断变清晰。渐进式图像还有一个好处是每一处SOS的Huffman编码都是优化编码，平均图像size会小一些。

https://blog.csdn.net/APIX_CN/article/details/49780397?utm_source=blogxgwz26