Psst.. new poll here.
Psst.. new forums here.
Microsoft is blocking us again (TY IP Reputation!) so just use oauth login instead. :)
Paste
Pasted as PHP by S ( 9 years ago )
<?php include("head_nav.html")?>
<!-- Main Content starts here -->
<div class="main">
<h1>Welcome</h1>
<p>
Compression is where you reduce the size of an image to reduce
the amount of space needed to store it. If you halve the size
of a file, you can store twice as many files for the same cost,
or you can download the files twice as fast.
</p>
<p>
Image compression is very important when you create websites
particularly if you have images of friends via email/social
media. The image size on my camera is too high (4928 x 3264).
By making it smaller it won’t take so long to download and
this also makes the cost smaller (especially if my friends
are looking at the content on their cell phone) as it doesn’t
use as much data.
</p>
<p>
Lossy compression is where some of the quality of the image is
lost in order to make the file size smaller and the image can
look different. Some of the data is lost and it is impossible
to convert the file back to exactly the original image. A JPEG
can reduce an image to a tenth of its size but you end up with
a much poorer quality that can be pixelated.
</p>
<p>
Lossless compression is where the as the file is compressed the
picture quality remains the same. None of the data is lost from
compressing the image, and the compression can be undone.
</p>
<p>
On this page we will discuss...
</p>
<ul>
<li><a href="rle.php">Lossless compression</a> (run length encoding)</li>
<li><a href="bw.php">Black and white</a> image compression</li>
<li><a href="colour.php">Simple Colour</a> image compression</li>
<li><a href="photos.php">Compressing photographs</a></li>
</ul>
<!-- Main Content ends here -->
</div>
<?php include("footer.html")?>
</div>
</body>
</html>
<?php include("head_nav.html") ?>
<!-- Main Content starts here -->
<div class="main">
<h1>Run Length Encoding (RLE)</h1>
<p>
An example of lossless compression is run length
encoding. Runs of data (that is, sequences in which
the same data value occurs in many consecutive data
elements) are stored as a single data value and
count, rather than as the original run. Each row
is replaced with numbers that say how many
consecutive pixels are the same colour, always
starting with the number of white pixels.
</p>
<p>
An uncompressed image of 225 digits can be compressed
to 121 digits and this would only require around 54%
as many characters.
</p>
<p>
Fax machines commonly use run length encoding. RLE
compression is supported by most bitmap file formats,
such as TIFF, BMP, and PCX.
</p>
</div>
<div class="center_it">
<img src="images/rle_pic_2.png" width="549" height="360" alt="Run Length Encoding">
</div>
<!--MAIN ENDS HERE-->
<?php include("footer.html") ?>
</div>
</body>
</html>
<?php include("head_nav.html")?>
<!--MAIN STARTS HERE-->
<div class="main">
<n1>Black & White</n1>
<div class="image_info">
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/02_bw.php" width="950" height="150" alt="Black and White - 24 bit, 156 KB">
<div class="caption">
<!--CAPTION GOES HERE-->
24 bit, 156KB
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/02_bw.png" width="950" height="150" alt="Black and white - png, 1.77KB">
<div class="caption">
<!--CAPTION GOES HERE-->
png, 1.77KB
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/02_bw.jpg" width="950" height="150" alt="Black and White - jpg, 28.9KB">
<div class="caption">
<!--CAPTION GOES HERE-->
jpg, 28.9KB
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/02_bw.jpg" width="950" height="150" alt="Black and White - jpg, 28.9KB">
<div class="caption">
<!--CAPTION GOES HERE-->
gif, 3.88KB
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/02_bw.gif" width="950" height="150" alt="Black and White - gif, 3.88KB">
<div class="caption">
<!--CAPTION GOES HERE-->
gif, 3.88KB
</div>
</div>
</div>
</div>
<!--MAIN ENDS HERE-->
<?php include("footer_html") ?>
</div>
</body>
<!--footer starts here-->
<div class="footer">
<p class="footer">© Sheann Dela Cuesta, 2017</p>
</div>
<!-- Footer ends here -->
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="description" content="Image Compression">
<meta name="keywords" content="image, compression, jpg, length, encoding, png, bitmap">
<meta name="author" content="Sheann Dela Cuesta">
<meta charset="UTF-8">
<title>The Art of Image Compression</title>
<link rel="stylesheet" href="aoclayout.css" title="style1"/>
</head>
<body>
<div class="content">
<!--BANNER STARTS HERE-->
<div class="banner">
<img src="images/narrow_banner.png" width="750" height="140" alt="banner">
</div>
<!--BANNER ENDS HERE-->
<!-- Navigation starts here -->
<div class="navigation">
<a class="nav" href="index4.php">Home</a> |
<a class="nav" href="rle.php">RLE</a> |
<a class="nav" href="bw.php">Black & White</a> |
<a class="nav" href="colour.php">Simple Colour</a> |
<a class="nav" href="photos.php">Photographs</a> |
<a class="nav" href="contact.php">Contact</a> |
</div>
<!-- Navigation ends here -->
body{
font-family: Arial;
background-color: #38B2CE; /* Light Blue */
color: #000000;
}
div.content{
width: 750px;
margin: auto;
}
div.navigation {
background-color: #33CC66; /* Light Green */
color: #000000;
padding: 10px;
text-align: center;
}
div.main{
background-color: #ffffff; /* White */
padding: 10px;
}
div.footer{
background-color: #4867D6; /* Pale Blue */
color: #ffffff;
padding: 10px;
text-align: right;
}
/* Navigation Links */
a.nav{font-weight:bold} /* page link */
a.nav:link{color:#ffffff;}
a.nav:visited{color:#ffffff;}
a.nav:hover{color:#000000;} /* Black */
a.nav:active{color:#000000;} /* Black */ /*when you click on it*/
/* Page Links*/
a{font-weight:bold} /* page link */
a:link{color:#FF7F00;}
a:visited{color:#767676;}
a:hover{color:#80B966;} /* Light Green */
a:active{color:#80B966;} /* Light Green */ /*when you click on it*/
<?php include("head_nav.html")?>
<!--MAIN STARTS HERE-->
<div class="main">
<h1>Simple Colour</h1>
<div class="image_info">
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/09_simple_colour.php" width="950" height="150" alt="Black and White - 24 bit, 154 KB">
<div class="caption">
<!--CAPTION GOES HERE-->
24 bit, 154KB
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/09_simple_colour.php" width="950" height="150" alt="Black and White - 24 bit, 154KB">
<div class="caption">
<!--CAPTION GOES HERE-->
24 bit, 154 KB
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/09_simple_colour.php" width="950" height="150" alt="Black and White - 24 bit, 154 KB">
<div class="caption">
<!--CAPTION GOES HERE-->
24 bit, 154 KB"
</div>
</div>
<div class="cap_pic">
<!--IMAGE GOES HERE-->
<img src="images/09_simple_colour.php" width="950" height="150" alt="Black and White - 24 bit, 154 KB">
<div class="caption">
<!--CAPTION GOES HERE-->
24 bit, 154 KB
</div>
</div>
</div>
</div>
<!--MAIN ENDS HERE-->
<?php include("footer.html") ?>
</div>
</body>
Revise this Paste