-
Notifications
You must be signed in to change notification settings - Fork 0
/
image-guide.html
101 lines (92 loc) · 4.72 KB
/
image-guide.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
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<link href="../css/styles-image-guide.css" rel="stylesheet" type="text/css">
<title>webDev02 image guide</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/sun/trunk/html5.js"</script>
<![endif]-->
</head>
<body>
<div id="header1">
<h1>Image guide with common size ranges</h1>
</div>
<div id="top">
<table>
<thead>
<tr>
<th></th>
<th>Small</th>
<th>Medium</th>
<th>Large</th>
</tr>
</thead>
<tbody>
<tr>
<th>240x240</th>
<td><a href="../images/colourful-windmill-small-240x180.jpg" width: "240px" height: "180px" alt="small .jpg image of a colorful windmall" target="_blank">.jpg</atd>
<td><a href="../images/giraffe-sticking-out-tongue-Small-240x223.png" width: "240px" height: "223px" alt="small .png image of a giraffe sticking out tongue" target="_blank">.png</a></td>
<td><a href="../images/flat-image-pug-Small-240x159.gif" width: "240px" height: "159px" alt="small .gif image of a pug dog" target="_blank">.gif</a></td>
</tr>
<tr class="even">
<th>400x400</th>
<td><a href="../images/colourful-windmill-medium-460x308.jpg" width: "460px" height: "308px" alt="medium .jpg image of a colorful windmill" target="_blank">.jpg</a></td>
<td><a href="../images/giraffe-sticking-out-tongue-Medium-460x428.png" width: "460px" height: "428px" alt="medium .png image of a giraffe sticking out tongue" target="_blank">.png</a></td>
<td><a href="../images/flat-image-pug-Medium-460x306.gif" width: "460px" height: "306px" alt="medium .gif image of a small pug dog" target="_blank">.gif</a></td>
</tr>
<tr>
<th>1024x1024</th>
<td><a href="../images/colourful-windmill-large -1024x768.jpg" width: "1024px" height: "768px" alt="large .jpg image of a colorful windmill" target="_blank" >.jpg</a></td>
<td><a href="../images/giraffe-sticking-out-tongue-Large-1024x953.png" width: "1024px" height: "953px" alt="large .png image of a giraffe sticking out tongue" target="_blank">.png</a></td>
<td><a href="../images/flat-image-pug-Large-1024x682.gif" width: "1024px" height: "682px"alt="large .gif image of a small pug dog" target="_blank">.gif</a></td>
</tr>
</tbody>
<tfoot>
<tr class="even">
<th>Best For</th>
<td>Full Color</td>
<td>Compressed</td>
<td>Flat Images</td>
</tfoot>
</tr>
</table>
<br/>
</div>
<hr>
<div class="main">
<h2><u>IMAGE TYPES</u><h2>
</div>
<div id="header3">
<h3><u>JPEG (JOINT PHOTOGRAPHIC EXPERTS GROUP)</u></h3>
</div>
<div id="content">
<p> Developed by the Joint Photographic Experts Group, this filetype(.jpg) is the Standard
for Professional Photographers. JPG's comress image data into blocks of pixels. Compressing makes
the image load faster, however, it is permanent so it degrades with every save. It should be used
whenever saving images with many different colors. </p>
<h3><u>PNG (PORTABLE NETWORK GRAPHICS)</u></h3>
<p> Filetypes ending in .png are are used almost exclusively for web images. It is not used for print images
because it creates a larger file. This filetype is good for images with text and art. While not as good as JPEG,
it compresses better, but works best with flat colors or images with large areas filled with the same color.</p>
<h3><u>GIF (GRAPHIC INTERCHANGE FORMAT)</u></h3>
<p> Filetypes ending in .gif have an extremely limited range of colors. This format will compress images without
losing detail like JPEG, but it cannot be made as small. GIF's are never used for photography due to the limited
number of colors but can be used for web images and animation.</p>
<h3><u>Image Optimization and Naming Tips</u></h3>
<ul>
<li> Save images in the correct format - The wrong format can cause slow web page loading and unclear images</li>
<li> Save images at the right size - Save at the same size as it will appear on the website</li>
<li> Measure images in pixels - Measure width and height in pixels, not centimeters or inches</li>
<li> Cropping Images - Important not to lose information - Source the correct shape when possible</li>
<li> Images should be relevent, informative, recognizable, convey the right mood and fit the color palette</li>
<li> Use plain english, descriptive, keyword-rich file names to help web page ranking and identification.</li>
</ul>
<div id="footer">
<h3><u>Other links</u></h3>
<li><a href="../index.html" target="_blank"/>WEBSITE HOME</a></li>
<li><a href="web-dev-portfolio" target="_blank"/> PORTFOLIO ASSIGNMENT HOME PAGE</a></li>
</div>
</div>
</body>
</html>