-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
+<!doctype html>
+<html lang="en">
<head>
- <meta
- http-equiv="Content-Type"
- content="text/html; charset=UTF-8">
- <title>ImageSqueeze</title>
+<title>ImageSqueeze - lossy image codec</title>
+<!-- 2017-07-07 Fri 14:07 -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="generator" content="Org-mode">
+<meta name="author" content="Svjatoslav Agejenko">
+<link href="https://bootswatch.com/darkly/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>"
+<style type="text/css">
+footer {background-color: #111 !important;}
+pre {background-color: #111; color: #ccc;}
+</style>
+<style type="text/css">
+/* org mode styles on top of twbs */
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+body {
+ font-size: 18px;
+ margin-bottom: 105px;
+}
+
+footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 101px;
+ background-color: #f5f5f5;
+}
+
+footer > div {
+ padding: 10px;
+}
+
+footer p {
+ margin: 0 0 5px;
+ text-align: center;
+ font-size: 16px;
+}
+
+#table-of-contents {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+blockquote p {
+ font-size: 18px;
+}
+
+pre {
+ font-size: 16px;
+}
+
+.footpara {
+ display: inline-block;
+}
+
+figcaption {
+ font-size: 16px;
+ color: #666;
+ font-style: italic;
+ padding-bottom: 15px;
+}
+
+/* from twbs docs */
+
+.bs-docs-sidebar.affix {
+ position: static;
+}
+@media (min-width: 768px) {
+ .bs-docs-sidebar {
+ padding-left: 20px;
+ }
+}
+
+/* All levels of nav */
+.bs-docs-sidebar .nav > li > a {
+ display: block;
+ padding: 4px 20px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #999;
+}
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+ padding-left: 19px;
+ color: #A1283B;
+ text-decoration: none;
+ background-color: transparent;
+ border-left: 1px solid #A1283B;
+}
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
+ padding-left: 18px;
+ font-weight: bold;
+ color: #A1283B;
+ background-color: transparent;
+ border-left: 2px solid #A1283B;
+}
+
+/* Nav: second level (shown on .active) */
+.bs-docs-sidebar .nav .nav {
+ display: none; /* Hide by default, but at >768px, show it */
+ padding-bottom: 10px;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 30px;
+ font-size: 12px;
+ font-weight: normal;
+}
+.bs-docs-sidebar .nav .nav > li > a:hover,
+.bs-docs-sidebar .nav .nav > li > a:focus {
+ padding-left: 29px;
+}
+.bs-docs-sidebar .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav > .active:focus > a {
+ padding-left: 28px;
+ font-weight: 500;
+}
+
+/* Nav: third level (shown on .active) */
+.bs-docs-sidebar .nav .nav .nav {
+ padding-bottom: 10px;
+}
+.bs-docs-sidebar .nav .nav .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 40px;
+ font-size: 12px;
+ font-weight: normal;
+}
+.bs-docs-sidebar .nav .nav .nav > li > a:hover,
+.bs-docs-sidebar .nav .nav .nav > li > a:focus {
+ padding-left: 39px;
+}
+.bs-docs-sidebar .nav .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav .nav > .active:focus > a {
+ padding-left: 38px;
+ font-weight: 500;
+}
+
+/* Show and affix the side nav when space allows it */
+@media (min-width: 992px) {
+ .bs-docs-sidebar .nav > .active > ul {
+ display: block;
+ }
+ /* Widen the fixed sidebar */
+ .bs-docs-sidebar.affix,
+ .bs-docs-sidebar.affix-bottom {
+ width: 213px;
+ }
+ .bs-docs-sidebar.affix {
+ position: fixed; /* Undo the static from mobile first approach */
+ top: 20px;
+ }
+ .bs-docs-sidebar.affix-bottom {
+ position: absolute; /* Undo the static from mobile first approach */
+ }
+ .bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav {
+ margin-top: 0;
+ margin-bottom: 0
+ }
+}
+@media (min-width: 1200px) {
+ /* Widen the fixed sidebar again */
+ .bs-docs-sidebar.affix-bottom,
+ .bs-docs-sidebar.affix {
+ width: 263px;
+ }
+}
+</style>
+<script type="text/javascript">
+$(function() {
+ 'use strict';
+
+ $('.bs-docs-sidebar li').first().addClass('active');
+
+ $(document.body).scrollspy({target: '.bs-docs-sidebar'});
+
+ $('.bs-docs-sidebar').affix();
+});
+</script>
</head>
<body>
-<h1>ImageSqueeze - lossy image codec</h1>
-<a href="http://www2.svjatoslav.eu/gitweb/?p=imagesqueeze.git;a=snapshot;h=HEAD;sf=tgz">Download</a>
-
-<a href="http://www2.svjatoslav.eu/gitbrowse/imagesqueeze/doc/index.html">Online homepage</a>
-
-<a href="http://svjatoslav.eu/programs.jsp">Other applications hosted on svjatoslav.eu</a>
- <pre>
-<b>Program author:</b>
- Svjatoslav Agejenko
- Homepage: <a href="http://svjatoslav.eu">http://svjatoslav.eu</a>
- Email: <a href="mailto:svjatoslav@svjatoslav.eu">svjatoslav@svjatoslav.eu</a>
-
-This software is distributed under <a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU GENERAL PUBLIC LICENSE Version 2</a>.
-
-
-Lossy image codec. Optimized for photos.
-I developed it to test out an image compression ideas.
-
-I believe my algorithm has following advantages:
- * Fast. Relatively few computations per pixel.
- * Easy to add support for progressive image loading. (Saving is already progressive)
-
-Current limitations / to do:
- * Documentation describing idea behind this algorithm is still missing (lack of time)
- * Code documentation is weak.
- * Better sample applications needed: Commandline image conversion utility. Image viewer.
-
-
-Below are original photo and the same image being compressed down to ~93 Kb and then decompressed.
-<img src="originalAndCompressed.png"/>
-
-When looking very closely, slight grainyness, loss of color precision and
-blurriness (loss of detail) could be noticed as a compression artifacts.
-Still sharp edges are always preserved. Also no blocks typical to JPEG are ever seen.
-I think that is awesome result for just ~ 2.5 bits per pixel on that color photo.
-</pre>
+<div id="content" class="container">
+<div class="row"><div class="col-md-9"><h1 class="title">ImageSqueeze - lossy image codec</h1>
+<hr >
+<ul class="org-ul">
+<li><a href="http://www2.svjatoslav.eu/gitweb/?p=imagesqueeze.git;a=snapshot;h=HEAD;sf=tgz">download latest snapshot</a>
+</li>
+
+<li>This program is free software; you can redistribute it and/or modify it under
+the terms of version 3 of the <a href="https://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a> or later as
+published by the Free Software Foundation.
+</li>
+
+<li>Program author:
+<ul class="org-ul">
+<li>Svjatoslav Agejenko
+</li>
+<li>Homepage: <a href="http://svjatoslav.eu">http://svjatoslav.eu</a>
+</li>
+<li>Email: <a href="mailto://svjatoslav@svjatoslav.eu">mailto://svjatoslav@svjatoslav.eu</a>
+</li>
+</ul>
+</li>
+
+<li><a href="http://www.svjatoslav.eu/programs.jsp">other applications hosted at svjatoslav.eu</a>
+</li>
+</ul>
+
+<div id="outline-container-sec-1" class="outline-2">
+<h2 id="sec-1"><span class="section-number-2">1</span> Overview</h2>
+<div class="outline-text-2" id="text-1">
+<p>
+Lossy image codec. Optimized for photos. I developed it to test out an
+image compression ideas.
+</p>
+
+<p>
+I believe my <a href="#sec-2-1">algorighm has interesting advantages.</a>
+</p>
+
+<p>
+Below are original photo and the same image being compressed down to
+~93 Kb and then decompressed.
+</p>
+
+
+<figure>
+<p><a href="originalAndCompressed.png"><img src="originalAndCompressed.png" class="img-responsive" alt="originalAndCompressed.png"></a>
+</p>
+</figure>
+
+<p>
+When looking very closely, slight grainyness, loss of color precision
+and blurriness (loss of detail) could be noticed as a compression
+artifacts. Still sharp edges are always preserved. Also no blocks
+typical to JPEG are ever seen. I think that is awesome result for
+just ~ 2.5 bits per pixel on that color photo.
+</p>
+</div>
+</div>
+<div id="outline-container-sec-2" class="outline-2">
+<h2 id="sec-2"><span class="section-number-2">2</span> Algorithm description</h2>
+<div class="outline-text-2" id="text-2">
+<ul class="org-ul">
+<li>Color image is split into three separate channels: Y, U and V.
+<ul class="org-ul">
+<li>Each channel is independently compressed.
+</li>
+</ul>
+</li>
+
+<li>Single channel compression method:
+
+<ul class="org-ul">
+<li>Algorithm is inspired by <a href="https://en.wikipedia.org/wiki/Diamond-square_algorithm">diamond-square algorithm</a> that is meant to
+produce random heightmap/plasma effect.
+</li>
+
+<li>During image compression: 2D image surface is iterated in the
+similar manner to diamond-square algorithm. Average color from
+neighbors is calculated and difference between neighbors average
+and actual pixel color is saved. As the pixel grid becomes
+gradually more dense, difference between neighbors tends to get
+smaller, thereby requiring less bits per pixel for storing the
+difference.
+</li>
+</ul>
+</li>
+</ul>
+</div>
+<div id="outline-container-sec-2-1" class="outline-3">
+<h3 id="sec-2-1"><a id="ID-1d917f74-e763-4a71-976e-4aa60732efa6" name="ID-1d917f74-e763-4a71-976e-4aa60732efa6"></a><span class="section-number-3">2.1</span> Algorighm advantages</h3>
+<div class="outline-text-3" id="text-2-1">
+<ul class="org-ul">
+<li>It can be applied to any amount of dimensions, even for sound and
+volumetric data.
+</li>
+
+<li>Algorithm can operate in lossy and lossless mode.
+</li>
+
+<li>Algorithm naturally handles progressive loading. That is: low
+resolution thumbnail of entire thing is immediately available and
+gets gradually more dense during entire loading process.
+</li>
+
+<li>Algorithm naturally supports variable resolution. That is: different
+areas can be encoded with different resolutions / pixel densities.
+</li>
+
+<li>Fast: Very little computations per pixel.
+</li>
+</ul>
+</div>
+</div>
+</div>
+
+<div id="outline-container-sec-3" class="outline-2">
+<h2 id="sec-3"><span class="section-number-2">3</span> <span class="label label-primary TODO">TODO</span> Things to improve</h2>
+<div class="outline-text-2" id="text-3">
+<ul class="org-ul">
+<li>Code documentation is weak.
+</li>
+
+<li>Better sample applications needed:
+<ul class="org-ul">
+<li>Commandline image conversion utility.
+</li>
+<li>Image viewer.
+</li>
+</ul>
+</li>
+
+<li>Add lossless support.
+</li>
+
+<li>Extract algorithm key parts into reusable library and make it
+variable dimensional. So that the same code can be used for sound,
+image and volumetric data compression/decompression.
+</li>
+</ul>
+</div>
+</div>
+</div><div class="col-md-3"><nav id="table-of-contents">
+<div id="text-table-of-contents" class="bs-docs-sidebar">
+<ul class="nav">
+<li><a href="#sec-1">1. Overview</a></li>
+<li><a href="#sec-2">2. Algorithm description</a>
+<ul class="nav">
+<li><a href="#sec-2-1">2.1. Algorighm advantages</a></li>
+</ul>
+</li>
+<li><a href="#sec-3">3. Things to improve</a></li>
+</ul>
+</div>
+</nav>
+</div></div></div>
+<footer id="postamble" class="">
+<div><p class="author">Author: Svjatoslav Agejenko</p>
+<p class="date">Created: 2017-07-07 Fri 14:07</p>
+<p class="creator"><a href="http://www.gnu.org/software/emacs/">Emacs</a> 25.1.1 (<a href="http://orgmode.org">Org-mode</a> 8.2.10)</p>
+</div>
+</footer>
</body>
</html>
projects / imagesqueeze.git / blobdiff