-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathlossy-artifacts.html
112 lines (109 loc) · 7.83 KB
/
lossy-artifacts.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
---
title: FLIF - Lossy compression
---
{% include header.html %}
<h1 id="lossy-flif">Lossy <a href="/index.html">FLIF</a></h1>
<p>FLIF is a lossless format, but that doesn't mean it cannot also be <a href="lossy.html">used in a lossy way</a>.</p>
<p>Here is a case study to let you judge for yourself. You can click on the small crops to get the full image.</p>
<p>
There is also an <a href="http://wyohknott.github.io/image-formats-comparison/#swallowtail&jpg=s&flif=s">interactive image format comparison page</a>
where you can visually compare several image formats, including lossy encoded FLIF.
Note however that FLIF is a lossless format, and any compression artifact is only caused by the optional lossy preprocessing step.
This means that if you see an annoying artifact in some specific part of the image, you can easily eliminate it by telling the lossy
preprocessor to be less lossy on that particular part of the image (you can use the encode option <code>--adaptive</code> for this).
In other image formats, this is usually also possible, but harder to do and with more restrictions.
</p>
<table>
<tr>
<th>Original (lossless)<br>1,688,504 byte PNG<br>1,321,602 byte FLIF<br>1,398,900 byte WebP<br>PSNR: inf<br>DSSIM: 0</th>
<th>Lossy FLIF<br>969,683 bytes<br>PSNR: 52.1842<br>DSSIM: 0.000109</th>
<th>JPEG (quality 99)<br>1,100,684 bytes<br>PSNR: 48.0707<br>DSSIM: 0.000182</th>
<th>WebP (near-lossless)<br>1,021,038 bytes<br>PSNR: 38.2652<br>DSSIM: 0.001794</th>
</tr>
<tr><td><a href="/example-lossy/original.png" class="img">
<img src="/example-lossy/original-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/near-lossless/image-flif.png" class="img">
<img src="/example-lossy/near-lossless/image-flif-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/near-lossless/image.jpg" class="img">
<img src="/example-lossy/near-lossless/image-jpg-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/near-lossless/image-webp.png" class="img">
<img src="/example-lossy/near-lossless/image-webp-cropped.png" alt="Fragment of an image" /></a></td>
</tr>
<tr>
<th>Original (lossless)<br>PSNR: inf<br>DSSIM: 0</th>
<th>Lossy FLIF<br>541,226 bytes<br>PSNR: 45.5374<br>DSSIM: 0.000411</th>
<th>JPEG (quality 96)<br>598,955 bytes<br>PSNR: 42.4322<br>DSSIM: 0.000456</th>
<th>WebP (quality 100)<br>564,464 bytes<br>PSNR: 38.6303<br>DSSIM: 0.000600</th>
</tr>
<tr><td><a href="/example-lossy/original.png" class="img">
<img src="/example-lossy/original-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/high/image-new-flif.png" class="img">
<img src="/example-lossy/high/image-new-flif-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/high/image.jpg" class="img">
<img src="/example-lossy/high/image-jpg-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/high/image-webp.png" class="img">
<img src="/example-lossy/high/image-webp-cropped.png" alt="Fragment of an image" /></a></td>
</tr>
<tr>
<th>Original (lossless)<br>PSNR: inf<br>DSSIM: 0</th>
<th>Lossy FLIF<br>324,769 bytes<br>PSNR: 41.6185<br>DSSIM: 0.001096</th>
<th>JPEG (quality 90)<br>345,714 bytes<br>PSNR: 38.2847<br>DSSIM: 0.001040</th>
<th>WebP (quality 95)<br>328,550 bytes<br>PSNR: 38.0839<br>DSSIM: 0.001048</th>
</tr>
<tr><td><a href="/example-lossy/original.png" class="img">
<img src="/example-lossy/original-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/medium/image-new-flif.png" class="img">
<img src="/example-lossy/medium/image-new-flif-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/medium/image.jpg" class="img">
<img src="/example-lossy/medium/image-jpg-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/medium/image-webp.png" class="img">
<img src="/example-lossy/medium/image-webp-cropped.png" alt="Fragment of an image" /></a></td>
</tr>
<tr>
<th>Original (lossless)<br>PSNR: inf<br>DSSIM: 0</th>
<th>Lossy FLIF<br>151,646 bytes<br>PSNR: 36.6284<br>DSSIM: 0.003890</th>
<th>JPEG (quality 80)<br>164,136 bytes<br>PSNR: 33.975<br>DSSIM: 0.002876</th>
<th>WebP (quality 85)<br>156,408 bytes<br>PSNR: 36.0936<br>DSSIM: 0.002792</th>
</tr>
<tr><td><a href="/example-lossy/original.png" class="img">
<img src="/example-lossy/original-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/low/image-new-flif.png" class="img">
<img src="/example-lossy/low/image-new-flif-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/low/image.jpg" class="img">
<img src="/example-lossy/low/image-jpg-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/low/image-webp.png" class="img">
<img src="/example-lossy/low/image-webp-cropped.png" alt="Fragment of an image" /></a></td>
</tr>
<tr>
<th>Original (lossless)<br>PSNR: inf<br>DSSIM: 0</th>
<th>Lossy FLIF<br>52,981 bytes<br>PSNR: 30.6999<br>DSSIM: 0.014995</th>
<th>JPEG (quality 25)<br>54,810 bytes<br>PSNR: 29.8108<br>DSSIM: 0.015136</th>
<th>WebP (quality 34)<br>54,556 bytes<br>PSNR: 31.6246<br>DSSIM: 0.012044</th>
</tr>
<tr><td><a href="/example-lossy/original.png" class="img">
<img src="/example-lossy/original-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/verylow/image-new-flif.png" class="img">
<img src="/example-lossy/verylow/image-new-flif-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/verylow/image.jpg" class="img">
<img src="/example-lossy/verylow/image-jpg-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/verylow/image-webp.png" class="img">
<img src="/example-lossy/verylow/image-webp-cropped.png" alt="Fragment of an image" /></a></td>
</tr>
<tr>
<th>Original (lossless)<br>PSNR: inf<br>DSSIM: 0</th>
<th>Lossy FLIF<br>18,822 bytes<br>PSNR: 26.937<br>DSSIM: 0.047244</th>
<th>JPEG (quality 7)<br>19,627 bytes<br>PSNR: 25.9092<br>DSSIM: 0.073680</th>
<th>WebP (quality 2)<br>18,822 bytes<br>PSNR: 27.4588<br>DSSIM: 0.041058</th>
</tr>
<tr><td><a href="/example-lossy/original.png" class="img">
<img src="/example-lossy/original-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/extremelylow/image-new-flif.png" class="img">
<img src="/example-lossy/extremelylow/image-new-flif-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/extremelylow/image.jpg" class="img">
<img src="/example-lossy/extremelylow/image-jpg-cropped.png" alt="Fragment of an image" /></a></td>
<td><a href="/example-lossy/extremelylow/image-webp.png" class="img">
<img src="/example-lossy/extremelylow/image-webp-cropped.png" alt="Fragment of an image" /></a></td>
</tr>
</table>
</body>
</html>