add lossy demo

emmanuelroecker · Oct 2, 2016 · 3dbd8f6 · 3dbd8f6
1 parent b70ef0f
commit 3dbd8f6
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 1 deletion.
diff --git a/demo/_demo3.html b/demo/_demo3.html
@@ -4,6 +4,18 @@
     <meta charset="utf-8">
     <title>Demo 3</title>
     <link rel="stylesheet" href="css/bootstrap.min.css">
+    <style>
+        figure {
+            border: 1px solid black;
+            margin: 10px;
+            padding: 0px !important;
+        }
+
+        figcaption {
+            border-top: 1px solid black;
+            padding: 5px;
+        }
+    </style>
 </head>
 <body>
 <div class="container">

diff --git a/demo/demo3.html → demo/demo3_blank.html b/demo/demo3.html → demo/demo3_blank.html
diff --git a/demo/demo3_lossy.html b/demo/demo3_lossy.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Demo 3</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <style>
+        figure {
+            border: 1px solid black;
+            margin: 10px;
+            padding: 0px !important;
+        }
+
+        figcaption {
+            border-top: 1px solid black;
+            padding: 5px;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="list-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4ANUAANxOPPzGxNR6fOReTOz29ORKTOz+9MxWRPz69PzWzPzu3ORWVNxWTNRSTNRuZPzu/PzK1PSipPROTPz6/OR6dNxmdORSRPT+9NRWTNxSTPz29PTOvPz+7PTexNxaVOR6hORiZNRaTNxSRPT29OROTOz+/Pzy7ORaVNxWVNRSVOxqbPzy9PzO3Pz+/ORSTPT+/NRWVNxSVPz2/PTOzPz+9PTe3OR+jORmZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwA4AAAG/sCWcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4qeRFyzdlFRgZfX5LDBkwDSiFShIphwwoKTSEjEM2BzEYmhkhGZZEAjAxGSiKkYqgLS8hBy4wpQ2ckheVeQwnLxmcMAyPDR4ktnchGEIXsofGRMN1LgwTRCQMMYugDBjRRBrKoDAuSMgxlhgiSxaMJAVMMtp5KjKq8vP09fb3+Pn6+/z9Yu5CInQY0CLaBVUvJkwg8KKCBhYvWmgIAGpFCwUtaEyg0CJBC4sf6mlLCLCQtgfuDLSI5wdBxmPHIhaJuMGPgxcRQRRRWSMiFAsIePr00cDnpZBoGoUWYmlEG8AgADs="
+                                                                              alt="Image 1" width="400" height="300"
+                                                                              data-original="img/1.jpg">
+            <figcaption>Description N&deg;1</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4AOYAAARqpIy23DSSzByGzARyrMTS7BRyrNTq9Ozu/ARqvARyxOz+/KTS7ARurAR6vGSmzAxytARuvAR6xPz+5JTK5Nz2/Pzy/ARmtDSKxBRyzAx2zHS63ARyvOz2/AxmxARy1LTW9AxupPz69IS+5Eye1Bx6vOTu9AR2xAx2tPz+9AxqnDyW1CyCtAR2tOzi/BxyrNzq/PTu/ARqzPT6/HSq1AxuvJzS9OT+/ARqrDyOzHy23LTa/AxutIy63DSS1CSKzARytMzm7BR2tNTq/ARqxARyzKTW/ARutAx6vGyu1AxyvARuxAR6zJzK7OT2/Pz2/DSOxBx6xHS67AR2vPT2/AxqxLzS5AxurPz6/IS+7AR2zAx2vPz+/AxqpPTy/PT+/ARqtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwA4AAAH/oADERyDhYSHhomIi4qNjI+OkRyEQBGVl5aZmJuanZyfnqGgoJOSppCop6qoR5OtrxywsrG0s7a1uLe6ubyDqb+rwcC/rby7x8bJyMu0vsLPw9COxczVytfWs87R3NLdj9TY4tnj5dve6N+n4eTt5eTn6vLpkuzv9+7W8fTz/Yb2+fAJ3LXPn8F0AAfm+oKFS5IjC7hAaMDly0OF2podpBTrBBcgHLhYmcQlFhcwJyJYOoLwEEZcEVhG0IKlEhcuKrlMgVIDSBEescAMcje01MZig74U4fAlApcUg6hMwFKqqLdWvgLCsuqyEMh/GonS2sh1ayVKXsFedak17CKs/mczoT0kFulRuhrTzpW7NutLrHlh7j0bsChZt0fARCEiocEFAlO2Hoz71y0HIAq+HKlAxcAGJREkgFxS2TA/riK4KMGSkktmBFMyi1A5GWxbrk6nhARZJIDd22NPN7tktNAgwnf9Ak8EtyzaUaI67b0rmW9gfoArA06b4GuDI1iPKDgCvTzfs4clA2GQEiQERD0yGNwOsi2OCGAIHQGgpIEJ3ffFct8SW4AkwAUKmMfJcwUF4wB4EQhQxBJDFBGETiZ8gVMDEWwgRAQTlGQDQ09g5UBKwFCm3D0RIFDRFA1N4QAXWYxAgQkOgHFABA+kNAUYOAGRA35LgPBFDDI0/keKJ/0AgdQXFJQQ0hEQRPAfECQkcMQXOFzm2hICnDDeCUFNp8h2eMFTChBfQCDCJClwQYARWGARGw5AzODUTQlMMcGbBd1SFJrQmMUBASxNwsEFYLSgQAMQdLcUbSxxuCQ4bymkV6KNfKViitExWNw39A0qWHPimPKpppgQw8inZyaTFnGnQcdgXLZG0qohpbECCaxp9oJIq7UtaWworhJan6apAGtdIrkSQtMLXKCAkz/m3XoestM0M8MVJ3xxQUnMqqrruQsaAsQSFSEgxRDoKDirdKF2um1Vy+oTjbOfLgGeApYAcYJuhLTAwXgJXAAeAVUoWmiq2uKayRFcVNzAQgp2fmEBTrM9AYQWB+/QRQQzcHCDKyyCym8iHRTAxQ8cUMTuJCe4gAEE4LXQRQVfYAAAwPIgAy23uyqqKLmuEEqpQOtcN+w0Kg2SQEwNXjZIIAA7"
+                                                                              alt="Image 2" width="400" height="300"
+                                                                              data-original="img/2.jpg">
+            <figcaption>Description N&deg;2</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4AOYAAAQCBISCBDRCBMTKBCQmBOzuBBQSBFxiBOz2DBQOBKSmBPz2BFROBAQKBFRaBAwCBIySBPz+BMzWBDQyBCQeBPT+BLy6BAQCFBwSDHx+BGRaDJSaBAQGBExSBOzyBGxqBPT2BPz6BFRWBAwKFPz+FNTeDDQ6FMS6BHyKBERCBNTODCwuBFxaBAwGDJySDNTWBLy+BBwWBPT6BAQCDMTSDDQiBOzqHBQWBGRiDBwKBKyuBPz2DFRSDAQOBFRaFAwCDJSWBPz+DDQ2BPT+DLy6DGxeDJyeBAQGDPTyBHRuBPz6DFxWBAwODPz+HDw6BISKBExGBNTaBBwWDPT6DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwA4AAAH/oBBEYOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrOlRik4EYK0jiERAL/AwIMDALuJLxzByr8/xb3GhDPAHDS9vcsZz9BMwBWJytCEworJwNq75YtPIk4rHQHnsz6/BeGR44RRQPaK+A+/FgYl+aWL368bhwJGcEKCX6FfBBIO4vDAobhfEgeFWGExwr9ihk4MwrAEQEF7+Agt6GgIyi8PEzEmKnJyF4Bkjg7IhIbk14wdi8oBiEcrBzAE33x6MxgMhbYE0n4t5RcEgrJyQlleXMZhqlZCGpiYAPG1rNmzaNOqXcu2UsGTWivDAXjR44GMCAJaRAgxI8iPEgpqPHjAAaUIFQsewPhQQUaLZyGMUIjLT4kSlQ0bhtA1IRfRth1dGAHdwcmIF0civKjAw8berwxiHJBioYUFEToghPhsDy6iQAA7"
+                                                                              alt="Image 3" width="400" height="300"
+                                                                              data-original="img/3.jpg">
+            <figcaption>Description N&deg;3</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4AOYAAEw2bKyevIR2lGRKhNzS3FRCbOzq/Fw6hMS61FQ6hPz2/FQ+dGRWfGRGjMzG3FQ6bFxChOTi5LSqtJyKpPzu/NzK7Ew2fFxCdPz+9HRalGxShOTa9PTy/GRWjNTO3Lyu1Ew6dIx+pGROhNzW5PTu/Fw+fMS+1FQ+hPz69NTK3FQ6fFxGhPTm9LyyvKSatFxGfGxWlEw2dKymxIx2rGRKjNzS5FRCdOzu9MS63FQ6jFQ+fFQ6dFxCjOzm9KSStPzy/NzO7Ew6fFxCfPz+/Fw+hPz6/NTK5LyyxGxajAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwA4AAAH/oAwOoOEhYaHiImKi4yKJTqPkZCTkpWUl5aZmJuanY2foKGihp6lnKemqaijrK2uq6qxsLOer7a3ibK6tLymuL+/u8K9xJLAx6/DysW8yM6jy9HMtc/VjdLY05fW3I7a2dnd4qTf5eDj6IPn68TpoQCGKkSf7NJFQ/j5+L7unwv4GWjQGDAj36Jl5k7hg7EAEoQA+NRt6gfq3xBBj3T4wKciV0J29xh01GHxwCmKFfUNQYHvyAqPCOvpwKdBRYlHJIYU2TERpb97MEbqUMHxkMxsCyvhE2LJZ8ohSC5AUrFxiNGEHzERVZkvwjxjTkFR0Em2SIcSMSYRCsdu7aWOzhnVhmUE1q3dc1njuo1bd+7BbRLJHS2HiC9gvzAB692bF6tHiX0RM24qt9DgYXQnSxZ8srLmy6voad7czDPkxrtCGY7cKgSCIiYkpGglKzDnYT12JFBQYEhqUatNsyphA0GLDi5eAm8nHCG509SgjWb0IEeQFyosyBuqQsiKE48WQFDNzLblVQpuUCDxoUaKChuAEEhRhMUPBUWKqEo2fVGRCQLIgMIGKiSwwE4qKKACByMM4YFomDU3i20ZGVOEENAd5kpwi/1FoVs8dBQIADs="
+                                                                              alt="Image 4" width="400" height="300"
+                                                                              data-original="img/4.jpg">
+            <figcaption>Description N&deg;4</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,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"
+                                                                              alt="Image 5" width="400" height="300"
+                                                                              data-original="img/5.jpg">
+            <figcaption>Description N&deg;5</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4AOYAAORiJPyuhPSGVPRyLORmHPTazPRmFPRaFPzy1OyafPRmNPRaNPzSxPT6/OxmNPS6rOxmHPRuJPRiLPz67OxeJPSSbPR2TPRmJPSmlPzCpOySZPRiHPRuROxmLPz6/OxeNPxmJPzm3PxmPPxeLPy+pOyCXPSGZPzu9PyedOxqHPxiLPz+7OxiJPRqJPS2nPSKXOx+PORqLPTizPRaJPSejPRqNPReLPzWvPT+9OxuPPS+pPymhPxiJPyCZPT29ORiNPSynPSGXPx2PORmJPTe1PRmHPSadPRmPOxqNOxmJPRiNPz69OxeLPSSfPR2VPRmLPzCtPSOZPRiJOxqLPz+/OxiNPxmLPzq5PxqNPxeNPy+rPSCVOxqJPxiNPz+9OxiLPRqLPReJPReNPzWxPT+/PS+rPyqjPz2/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAASwA4AAAH/oBCT4MdhIZPhYiHiYyLjoqQjZGPkomIF09JTxcdmJqcnpudmaKhoKSnn6OqpqulqK5Sg0kSHRJPX0+1t7m7uLq2v769wcS8wMfDyMLFy4WMqa+ssK3V1NfT2dKiUh2y3rrMyc3K5eTn4+ni642Fmu/Y29HzrvTW2tHdsk8s6+bqxtYFHLiMoDlH0eDZi7cQX72H1vr1e9JN3T+BBTNeNIju16R4CiEyFOnwnjxwE/td3KixI0eALW+1I6UtpMmGJ2+SpAiOX7iVLmNiZElU0qVOSBOO1Ml06TWJiCqS8xe0KEyrHi1dopaUptOSX3PCktUPnEGqV6uqTSvTUCF7/l3hgZ0rlq6+Qf1ynQ2I9eVQtQhzxvWKs/DOhVB57rLFOBnav2whY5w0uNpgm2EN6yQ7qKK4xsIe+x0tNCCjRPi4JuxCxhOVL1So4PACO4qEAh4k4AB1eOddn/9A92Kmi0owKoig1BjkAQeXCVQuUFFwq68zR5g/qe60C7kmKhIuQFEU24YA5MiT9m7FOeVPdMLDvVUSu37yGrmMk+mAnnqwWix0EIFeQhl1FG/zUPPFBb0gdwtyUkABRifIkaCCcVTI8kUtSXTQxFuVxYJSVPGlA5olSdBH3n3FhfcEFRfakIQUskxhQRcL/tdRJYRYliAtDDL4xBA6DCKBFp0Y/hGgBDpMgQgJHZShgxZaSPGBFw8ooYgmIXJ2l1kafTYJJgcuNkiPSTAxyxQQkLEEAZlUB44yHzUCVyrhSQCkXhcshgl38ExBwxfcxXAGFV10AOKfB/p0V2J5DZWVIs9wstUv3SByDAVUwKCCBLGN8IkxQh5T55lvCRaknnnSgkuf3iCFFyq5MLAEGVR4oAImuZyCGk3hLchqkIo1Fp8jv0Lyy0TADHLBCAl4QIWrSPHSp6vD8YhIpfXQGqSwe+qyJ5kkfosLDwGIMMstpEQSCi3jstoZfLUc8pEmlPpU1iH4jpJLrLVwRmedljI07IIIX2utvIw8Cgysmyhi6a94/sIbrJDAnZOvstBAoslv7ipSES3BCNwMx/a6Q82wB38La7DNKgJVpJlSrGiP3rJqMbEqXZevUSDOsgnCHxUMlS93EfMIwUklzPK4RMuby1YO58LsVlxKDOjFOjMsVVvIftTuKsc8gzOJX4PjGY8XKDGFGAYwS7bL4LZ6MZ++JNX1q//izKg7XO95xQ4BvIBAEIpquPRMdmr9slb9biL1sjyd+mIAITBAxgqMrgq153YLGXWq5jr9KzyKhF43GRIA0YMHEMxqttiMCy206JQyeglf4GRtNiMqAFAFDwBYQUieoNOtsMJ8/6I3yVyrzJumtqjQgQ0qKLKgFBJAIEYM/n3eMvHPKbu1Vaqu1uusncfk0k0oGgABQpRjpJfDGUXI8MUZYVDvsJex+h+mGCM0i9kiXF0pxDDix4MLWEA62zpDC5RwhhF4IGiUoZ1bChauqQWtUqRyxRMWIAUmcIAFNnDADE4gAhp1QAkUYAEnbtEPAdYwgCOiIb/iVCrmwWIc39BT556QBS6IgAsX2IDteDQ7S0CjEHWTj9CgQaBrBM19B5TAF0zgABFsYRBWc9SIAKgPMOmuaaIzFylU0gzP/A0RKJDAAYhABjW1ixIbc+LQ+IY7iSnLVThTxbqyGCQfUKEEDUABBoyEwzJ6SYxltJ0fO6iwQkAlIPuK3CCQCWALAvxgAB0IBAA7"
+                                                                              alt="Image 6" width="400" height="300"
+                                                                              data-original="img/6.jpg">
+            <figcaption>Description N&deg;6</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4ANUAAISKtLzG1KSqxIyavISStNzm/JSWtISSxNTa5PT2/ISKxMzS3JyevIyStLzC1JSatIySxPz+9IyOvMTK5LS21ISOtKyq1ISWtOTu/Pz69IyWtJSaxIyWxMTK3OTm7IyOxMTO7JSevISKvLzG3KSqzIyaxISSvJSWvISWxNTe7PT6/ISOzJyivIySvLzC3JSavIySzPz+/MTK7ISOvKyuzISWvPz6/IyWvIyWzOTq7MzS9AAAAAAAAAAAAAAAAAAAACwAAAAASwA4AAAG/sCYcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/D4M1Xh0ORUDcfEOeDwUS0EJi0RNyYzgE4iJhANQ3ssiksNLTMDRRAck0k0BxwtNkKiMQctnEgrLRU2FJhCGwcAqEctJkKatzF8tEcXLScxNgeNERu9RackHDUCojOnyEQ4EDo2DDcoEjEcENJDjTcRQh+bJ3vj330vRTmDid8xEIikMQ8NByL10gjME6IhVpgQIURHvBgdZkAzxUveQSELGM17pALGwyEJZhwoMM7bRRsv0kVgYCLDRSEVXcSQUGHEySEaZkCYoeElERYcatokYmGnJs+fQIMKHUq0qNGjSJOS2XdRg4sJBWY8srlCxggEJjDsrMd0q5AgADs="
+                                                                              alt="Image 7" width="400" height="300"
+                                                                              data-original="img/7.jpg">
+            <figcaption>Description N&deg;7</figcaption>
+        </figure>
+        <figure class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center"><img class="center-block img-responsive"
+                                                                              src="data:image/gif;base64,R0lGODdhSwA4ANUAAISOtMzK7KSqxIyavISStKy61JyivOzy/JSWxISSxJSOtKSyzPT6/ISOxJSaxLzC3JyizIyStIySxPz69NTa5LS2zLS6zKSmxIyKzJSazIyWxPz+9IyOtNTS9KSu1IyazISWvJymxMTC7KSmzIyWvLS23LS+1IyOxISOvMzO5KSqzIyaxISSvJyixOz2/ISWxKyyzPT+/JSevLzC5Jyi1IySvIySzPz6/NTa7LS61JSezIyWzPz+/LS25IyOzAAAACwAAAAASwA4AAAG/kCdhiVhEY3FozLJRDqXzyZ0Kq2yhlZqdKvtZr/covg4LpPP5jR6rW5Dwd6wPE5vJufwPH7fdbr/bIGAg2xjSnV8eoh9hmaLipCJh42ClYSXlm9nRpOSj55Sm5ybjpGfn3eEfpmYraxalKemippTsqC4a5yuvK+qqaS7XJ23t3a6pavJxbS2o6GOW73TyWrBsU9EIIRDLDUJ3izg38PAx6ud1mM87O3u70cJ5GPfNZqx54H3ZDwTN+8AbxSxV0+cuHnXYKHDh+4IDwkQibQjUm9Dg3gF7ckzMs7WOYbqztTgcWbiRhSO5CUYqJIcuGMwlQlr2GTIvHYg6oFDYaRg/pONYuwZOiSMoSgzLTua9IlxXEegBw26KSozpMub7HKC2+jUG9QiG70S5GpP10KqWzLKWyr2SEGVTuDCfSu0qjSqYKGAw6mz6UGnY+lujXfWGjKviMVMTEKu8UaEL50wrUfpTjq0LJm2e7FGsEamcFkmTlgpbuOoEtqRQKxR25Ctn2FHPRPW7lA1jgmnZjeg60AWKFDU/S0SbtSVRK3cxlhcaLsGOlvvoHDxd+SySVq6PUxsuXEm29pVuAjbxgeSnreCVYsw5lR6f/vWgGHBxIMcDmyKkzHBNFmoiAF41oCV9QQOYgehFN8DPJCAAmCorfLYgcssFwyF8SUljgIg/pwgDgQ8ICCcEhqS419Cv7hFj2yZqcADAxn0owEJ28RnkE9MuVUbMQoxBxiG30iAgzuZMfcTgqIFuU+BPkYn1mBXuMDOatkR5NdwukWITWFPfiaVWN+QoMEBV2RoY4VtRXYNk3l5dmNXAEI2G4BJ1mbZcpRApWZ7TTJXT2xXhWaQPGUw2RmLRj7RF1J86mggQcDgRdOXJub4EUfhKMeaoGqKcthv1iTVl441uOSMI14OlMadpJHKFYKLvhmYSnkdmmo2Q9GG5Y91OXnMqKAeohINIeSQgAYOzDRVXLVouB6QT2h33SY1zOAiDx+koE8gY23nbViMyfXsrK0hJUICt9hqgKFMMj32JViZabhduFE52VG43R6l77jfjaYEaPW8QEINPNmwUgIoYMFCAyo1wJMGl2rqX2BvaiLtNw6AEEEIDhjAwgULANCAAyhcgIIBCYgoQA0CvHBCSAnFdmY4wHJCFgQswMBDCTNU0AEPNXDAgwcBbEASCzyA8NAOZUlqDjpv+VWkGfVEgAIA4vCAAQsOAsCDDyuQMBDBZCPH6qQYzvVUoMXd6FbCV6DwwjcahImcPTYFAQA7"
+                                                                              alt="Image 8" width="400" height="300"
+                                                                              data-original="img/8.jpg">
+            <figcaption>Description N&deg;8</figcaption>
+        </figure>
+    </div>
+</div>
+<script src="js/jquery.min.js"></script>
+<script src="js/bootstrap.min.js"></script>
+<script src="js/lazyload.min.js"></script>
+<script>
+    var myLazyLoad = new LazyLoad();
+</script>
+</body>
+</html>
diff --git a/demo/demo.php → demo/demo_blank.php b/demo/demo.php → demo/demo_blank.php
@@ -6,5 +6,5 @@
 $html = file_get_contents(__DIR__ . '/_demo3.html');
 $lazyload = new GlLazyLoadImg(__DIR__,GlLazyLoadImg::BLANK, 'data-original');
 $result = $lazyload->autoDataURI($html);
-file_put_contents(__DIR__ . '/demo3.html', $result);
+file_put_contents(__DIR__ . '/demo3_blank.html', $result);
 
diff --git a/demo/demo_lossy.php b/demo/demo_lossy.php
@@ -0,0 +1,10 @@
+<?php
+require __DIR__ . '/../vendor/autoload.php';
+
+use GlLazyLoadImg\GlLazyLoadImg;
+
+$html = file_get_contents(__DIR__ . '/_demo3.html');
+$lazyload = new GlLazyLoadImg(__DIR__,GlLazyLoadImg::LOSSY, 'data-original');
+$result = $lazyload->autoDataURI($html);
+file_put_contents(__DIR__ . '/demo3_lossy.html', $result);
+