-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeatures.html
127 lines (123 loc) · 5.96 KB
/
features.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Online service that optimize images (PNG, JPG, GIF, BMP and TIF) using lossless and lossy compression to shrink images to the minimum possible size while keeping the required level of quality. lossless compression keeps 100% quality of image.">
<meta name="keywords" content="'image optimizer', 'image compressor', image, images, picture, pictures, 'picture optimizer', 'picture compressor', 'image opimization', 'image compression'">
<meta name="author" content="Ankit Kumar Jat">
<link rel="apple-touch-icon" href="/assets/icons-192.png">
<meta name="theme-color" content="#fff"/>
<!-- Preload -->
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="preload preconnect" as="style">
<link rel="preload" href="css/main.css" as="style">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<!-- <script src="https://kit.fontawesome.com/0c4c850759.js" crossorigin="anonymous"></script> -->
<!-- My css -->
<link rel="stylesheet" href="css/features.css">
<!-- Title -->
<link rel="shortcut icon" href="assets/favicon.svg" type="image/x-icon">
<title>Image Optimizer</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="./index.html">
Image Optimizer
</a>
<div class="navbar-toggler" id="navbarToggle">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="navbar-nav" id="navbarManu">
<li class="nav-item active">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a href="./contactus.html" class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<div class="container">
<h1>Features</h1>
<hr class="hr">
<div class="features">
<h2>Compression</h2>
<div class="container">
<p>you can specify your optimization level for JPG compression. To do so, just set quality value by slider with a value between 25 and 100. For having a good image quality, please remain above 90. And default value is 92.</p>
</div>
<h2>EXIF data</h2>
<div class="container">
<p>EXIF data are remove by default, reducing file size. However, these data can be keeped while compression by keep EXIF data checkbox.</p>
</div>
<h2>Limitations</h2>
<div class="container">
<p>It limits its use to PNG, JPG, GIF, BMP and TIF pictures up to 5MB.</p>
</div>
<h2>Library used</h2>
<div class="container">
<p>it provides a FREE optimization of pictures, for the most standard filetypes (PNG, JPG, GIF, BMP and TIF). It allows reductions until 80% by using differents algorithms :</p>
<ul>
<li>
<p>OptiPNG</p>
</li>
<li>
<p>PNGQuant</p>
</li>
<li>
<p>JPEGOptim</p>
</li>
</ul>
</div>
<h2>Optimization examples</h2>
<p><strong>PNG comparison</strong></p>
<div class="container">
<div class="example-imgs">
<img src="./assets/optimiztion_example/mountain.png" alt="" >
<div class="space"></div>
<img src="./assets/optimiztion_example/mountain-optimized.png" alt="" >
</div>
</div>
<p class="img-data"><i>Original picture (left/first) 482,6 Kb, Optimized picture (right/second) 153,1 Kb</i><strong> : gain 68%</strong></p>
<p><strong>JPEG comparison</strong></p>
<div class="container">
<div class="example-imgs">
<img src="./assets/optimiztion_example/loin.jpg" alt="" >
<div class="space"></div>
<img src="./assets/optimiztion_example/loin-optimized.jpg" alt="" >
</div>
</div>
<p class="img-data"><i>Original picture (left/first) 262,1 Kb, Optimized picture (right/second) 154,1 Kb</i><strong> : gain 41%</strong></p>
</div>
</div>
</section>
<footer>
<div class="container">
<ul class="footer-manu">
<li class="footer-item"><p>© Ankit Kumar Jat </p></li>
<li class="footer-item"><p>Made with ♥ by <a href="https://github.com/ankit-kumar-jat" class="footer-link">@ankit-kumar-jat</a></p></li>
<li class="footer-item right"><a href="./privacy.html" class="footer-link"><p>Privacy</p></a></li>
</ul>
</div>
</footer>
<!-- Js Libraries -->
<script src="js/jQuery.js" defer></script>
<!-- My scripts -->
<script src="js/main.js" defer></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-METM77P72Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-METM77P72Z');
</script>
</body>
</html>