SherryG
asked on
Need to descrease download time
I would like to put a picture on my company webpage and have the picture then randomly changed. I have created the page and added the coding to randomly display the pic's. The problem is that they are causing my page to download very slowly. I am new to web development and am not sure what the best solution would be. Each of the pic's is only between 30 and 40KB.
Any suggestions?
Any suggestions?
If the page has only one pic and that is 30-40KB, then that is not a really serious problem.
You need to look at the other graphic on the page I think!
You need to look at the other graphic on the page I think!
A couple of options you can try to decrease the file size are.
1. Try reducing the palette of colors.
2. Try a different file format, whilst JPG or PNG are the best for photo type images sometimes you can get away with a gif depending on the complexity of the image.
3. If you are using JPG files then try increasing the JPG compression to make the file smaller, but be sure to watch for the quality of the image, anything too low on the quality and the image will look bad if it has lots of sharp angles or lines.
Hope these help,
Regards,
Peter Witham.
1. Try reducing the palette of colors.
2. Try a different file format, whilst JPG or PNG are the best for photo type images sometimes you can get away with a gif depending on the complexity of the image.
3. If you are using JPG files then try increasing the JPG compression to make the file smaller, but be sure to watch for the quality of the image, anything too low on the quality and the image will look bad if it has lots of sharp angles or lines.
Hope these help,
Regards,
Peter Witham.
Hi SherryG,
I would not advise you to use images larger then 20kB, even if it is the only image present in the page, this is a rule I use for any webpage, speed is still an issue on the web.
As others have said before you can really optimise images a great deal by reducing the palette, size, if possible, and compression type.
An alternative option is to preload the images with a simple JavaScript, and show them when they are fully loaded, this is however an option I would never use myself, 'loading' messages are never inviting to visitors.
Tumashja
I would not advise you to use images larger then 20kB, even if it is the only image present in the page, this is a rule I use for any webpage, speed is still an issue on the web.
As others have said before you can really optimise images a great deal by reducing the palette, size, if possible, and compression type.
An alternative option is to preload the images with a simple JavaScript, and show them when they are fully loaded, this is however an option I would never use myself, 'loading' messages are never inviting to visitors.
Tumashja
There's good advice from everyone. Here's some more info: if the images are photos or have a lot of detail it would be best to use jpeg compression. And yes, 40kb is big for a picture. I try to keep mine under 20 too. If the images are vector--like clip art or something with solid colored shapes and defined lines--save the images as gifs with the minimum number of colors it needs. You don't need 256 colors for a black and white logo. pngs are good too, however, they generally make for larger files since they are lossless. Transparency in gifs and pngs also increase file size so make sure you don't have that on if you don't need an alpha channel. And Daleoran is right. Try 'save for web' in Photoshop. Otherwise, make sure your script is calling the images using a relative path, not an absolute one.
"Otherwise, make sure your script is calling the images using a relative path, not an absolute one. "
that would have nothing to do with dowload time... It only takes a server a millionth of a second to compute a relitive path as compaired to an absolute one. You should stick with relative paths when ever possible in case you need to move your files and folders around...
Unless you are using a 28K modem, then the problem probably has to do with your coding. Are you trying to load all of the images into the page all at once?
post your code here so we can take a look at it...
rp
that would have nothing to do with dowload time... It only takes a server a millionth of a second to compute a relitive path as compaired to an absolute one. You should stick with relative paths when ever possible in case you need to move your files and folders around...
Unless you are using a 28K modem, then the problem probably has to do with your coding. Are you trying to load all of the images into the page all at once?
post your code here so we can take a look at it...
rp
If you really want to make it easy Use Flash..
This was what flash originally was made for. You can then create fade in and out effects and the image size is lower.
This was what flash originally was made for. You can then create fade in and out effects and the image size is lower.
ASKER
Please keep in mind that I am a beginner and that this code could be very bad...but, here the code for my homepage. What I want to do is have rotating pictures on the page. The problems is that the page is downloading pretty slowly and I believe it is the pictures. I have 12 pictures total that rotate. They are all approximately 12KB in size.
Any suggestions for getting this page to load faster would be much appreciated.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="ProgId" content="FrontPage.Editor.
<meta name="Description" content="Penn State Industrial Engineering">
<meta name="KEYWORDS"
content="industrial engineering, Penn State Industrial Engineering, operations research, human factors, manufacturing, optimization, deformation processing, foundry, probability, statistics, solidification processing, welding, production planning, metal casting, metal cutting, engineering economy, methods, work measurement, manufacturing processes">
<title>Industrial and Manufacturing Engineering</title>
<style type="text/css">
<!--
a { text-decoration: none}
a:hover { color: #009933; text-decoration: none}
-->
</style>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && document.getElementById) x=document.getElementById(
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Original: Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site: http://astrogate.virtualave.net -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var interval = 3.25; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("/images/cadlab.
image_list[image_index++] = new imageItem("/images/fame1.j
image_list[image_index++] = new imageItem("/images/fame2.j
image_list[image_index++] = new imageItem("/images/found1.
image_list[image_index++] = new imageItem("/images/found2.
image_list[image_index++] = new imageItem("/images/found3.
image_list[image_index++] = new imageItem("/images/found4.
image_list[image_index++] = new imageItem("/images/kids.jp
image_list[image_index++] = new imageItem("/images/lab1.jp
image_list[image_index++] = new imageItem("/images/lab2.jp
image_list[image_index++] = new imageItem("/images/leonhar
image_list[image_index++] = new imageItem("/images/robot1.
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imag
return(imageObj.image_item
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imag
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')"
setTimeout(recur_call, interval);
}
// End -->
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && document.getElementById) x=document.getElementById(
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" background="/images/bg.gif
<font color="#000000"></font>
<div align="left">
<!--- Master table --->
<table border="0" width="738" height="575">
<tr>
<td valign="top" width="145" rowspan="2">
<!--- Table for navigation buttons --->
<table width="145" height="30" border="0">
<tr>
<td width="15" rowspan="15"> </td>
<td width="120" height="13" valign="top"></td>
</tr>
<tr>
<td width="120" height="70" valign="top"> <a href="http://www.psu.edu"><img src="/images/Pennstate.gif
</td>
</tr>
<tr>
<td height="10" valign="middle" width="120"> </td>
</tr>
<tr>
<td height="10" valign="middle" width="120"> <a href="http://www.ie.psu.edu/index.htm" onMouseOut="MM_swapImgRest
</tr>
<tr>
<td height="15" valign="middle" width="120"><a href="http://www.ie.psu.edu/welcome.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="15" valign="middle" width="120"><a href="http://www.ie.psu.edu/whatsnew/whatsnew.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="35" valign="middle" width="120"><a href="http://www.ie.psu.edu/undergrad/undergrad.htm" onMouseOut="MM_swapImgRest
</td>
<tr>
<td valign="middle" height="35" width="120"><a href="http://www.ie.psu.edu/grad/grad.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/courses/courses.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/people/people.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/labs/labs.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/research/research.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/orgs/orgs.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/studyabroad/studyabroad.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td valign="middle" height="40" width="120"><a href="http://www.engr.psu.edu" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td valign="top" height="63" width="15"> </td>
</tr>
</table>
</td>
<td height="10" width="572" valign="top" align="right"> <font color="#CC0000">
<!--- Table for page title and content --->
<font face="Arial" size="-2">
<script>
/*Current date script credit:
Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","T
var montharray=new Array("January","February"
document.write("<font color='#CC0000' face='Arial' size='-2'>"+dayarray[day]+
</script>
| <a href="/contact.htm">Contac
| <a href="/leonhard/directions
</tr>
<tr>
<td height="668" valign="top" width="572">
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="658">
<tr>
<td colspan="3" height="66" valign="top"><a href="http://www.ie.psu.edu/welcome.htm" onMouseOver="window.status
<td width="2" height="66"></td>
</tr>
<tr>
<td colspan="3" height="12" valign="top"> </td>
<td width="2" height="12"></td>
</tr>
<tr>
<td width="398" height="285" valign="top" align="middle">
<center>
<img name="rImage"src="/images/
</center>
</td>
<td width="10" rowspan="4" valign="top" bgcolor="#CCCCCC"> </
<td width="173" rowspan="4" valign="top" bgcolor="#CCCCCC">
<p><b><font color="#6699FF" face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
</font></b><font color="#6699FF" face="Verdana, Arial, Helvetica, sans-serif" size="3"><font color="#000095"><b><font size="2">Penn
State IE Facts</font></b></font></f
<p><font face="Arial" size="1"><b><font face="Verdana, Arial, Helvetica, sans-serif">One
of the top five <br>
Industrial Engineering<br>
programs in the country, according to <i>U.S. News</i></font><font face="Arial" size="1"><b><font face="Verdana, Arial, Helvetica, sans-serif"><br>
</font></b></font><font face="Verdana, Arial, Helvetica, sans-serif"><i>
& World Report</i></font></b></fon
<p><font face="Arial" size="1"><b><font face="Verdana, Arial, Helvetica, sans-serif">First
Industrial Engineering<br>
department in the world <br>
(founded in 1908)</font></b></font></p
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Degrees
offered: B.S., </font><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1"><br>
</font></b></font><font size="1">M.Eng., M.M.M., M.S.,<br>
and Ph.D.</font></b></font></p
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Full-time
faculty: 26</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Students:
319 under-</font><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1"><br>
</font></b></font><font size="1">graduate and 154<br>
graduate (Fall 2002)</font></b></font></p
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Spacious,
new $12<br>
million building with<br>
state-of-the-art <br>
facilities, including a <br>
working manufacturing<br>
facility, robotics lab, and<br>
4 computer labs (more<br>
than 100 networked <br>
computers)</font></b></fon
<p><b><font color="#6699FF" face="Verdana, Arial, Helvetica, sans-serif" size="3">
</font></b></p>
</td>
<td height="285" width="2"></td>
</tr>
<tr>
<td width="394" height="117" valign="top">
<p><font size="2"><b><img src="/images/News&EventsSm
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">  
590 Distinguished Lecture Series</a>-01/06/03</font>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">  
S. Kumara Named "Distinguished Professor"</a>-12/15/
<a
Chapter 128 December 2002 News Release</a>-12/1</font><fo
</td>
<td height="117" width="2"></td>
</tr>
<tr>
<td width="394" height="226" valign="top">
<p> </p>
<p align="center"><font face="Arial" size="1">The Harold and Inge
Marcus Department of Industrial<br>
and Manufacturing Engineering<br>
310 Leonhard Building, University Park, PA 16802<br>
Phone: 814.865.7601 | Fax: 814.863.4745
| E-mail: <a href="mailto:IEinfo@psu.ed
<br>
<br>
</font>
<p align="center"><font face="Arial" size="1">Questions or comments
about the IE web site, contact <a href="mailto:ieweb@psu.edu
</font></p>
</td>
<td height="226" width="2"></td>
</tr>
<tr>
<td height="2" width="394"></td>
<td width="2"></td>
</tr>
<tr>
<td height="2" width="394"></td>
<td width="19" height="2"></td>
<td width="168" height="2"></td>
<td width="2" height="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Any suggestions for getting this page to load faster would be much appreciated.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="ProgId" content="FrontPage.Editor.
<meta name="Description" content="Penn State Industrial Engineering">
<meta name="KEYWORDS"
content="industrial engineering, Penn State Industrial Engineering, operations research, human factors, manufacturing, optimization, deformation processing, foundry, probability, statistics, solidification processing, welding, production planning, metal casting, metal cutting, engineering economy, methods, work measurement, manufacturing processes">
<title>Industrial and Manufacturing Engineering</title>
<style type="text/css">
<!--
a { text-decoration: none}
a:hover { color: #009933; text-decoration: none}
-->
</style>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && document.getElementById) x=document.getElementById(
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Original: Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site: http://astrogate.virtualave.net -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var interval = 3.25; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("/images/cadlab.
image_list[image_index++] = new imageItem("/images/fame1.j
image_list[image_index++] = new imageItem("/images/fame2.j
image_list[image_index++] = new imageItem("/images/found1.
image_list[image_index++] = new imageItem("/images/found2.
image_list[image_index++] = new imageItem("/images/found3.
image_list[image_index++] = new imageItem("/images/found4.
image_list[image_index++] = new imageItem("/images/kids.jp
image_list[image_index++] = new imageItem("/images/lab1.jp
image_list[image_index++] = new imageItem("/images/lab2.jp
image_list[image_index++] = new imageItem("/images/leonhar
image_list[image_index++] = new imageItem("/images/robot1.
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imag
return(imageObj.image_item
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imag
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')"
setTimeout(recur_call, interval);
}
// End -->
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && document.getElementById) x=document.getElementById(
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" background="/images/bg.gif
<font color="#000000"></font>
<div align="left">
<!--- Master table --->
<table border="0" width="738" height="575">
<tr>
<td valign="top" width="145" rowspan="2">
<!--- Table for navigation buttons --->
<table width="145" height="30" border="0">
<tr>
<td width="15" rowspan="15"> </td>
<td width="120" height="13" valign="top"></td>
</tr>
<tr>
<td width="120" height="70" valign="top"> <a href="http://www.psu.edu"><img src="/images/Pennstate.gif
</td>
</tr>
<tr>
<td height="10" valign="middle" width="120"> </td>
</tr>
<tr>
<td height="10" valign="middle" width="120"> <a href="http://www.ie.psu.edu/index.htm" onMouseOut="MM_swapImgRest
</tr>
<tr>
<td height="15" valign="middle" width="120"><a href="http://www.ie.psu.edu/welcome.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="15" valign="middle" width="120"><a href="http://www.ie.psu.edu/whatsnew/whatsnew.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="35" valign="middle" width="120"><a href="http://www.ie.psu.edu/undergrad/undergrad.htm" onMouseOut="MM_swapImgRest
</td>
<tr>
<td valign="middle" height="35" width="120"><a href="http://www.ie.psu.edu/grad/grad.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/courses/courses.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/people/people.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/labs/labs.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/research/research.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/orgs/orgs.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td height="25" valign="middle" width="120"><a href="http://www.ie.psu.edu/studyabroad/studyabroad.htm" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td valign="middle" height="40" width="120"><a href="http://www.engr.psu.edu" onMouseOut="MM_swapImgRest
</td>
</tr>
<tr>
<td valign="top" height="63" width="15"> </td>
</tr>
</table>
</td>
<td height="10" width="572" valign="top" align="right"> <font color="#CC0000">
<!--- Table for page title and content --->
<font face="Arial" size="-2">
<script>
/*Current date script credit:
Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","T
var montharray=new Array("January","February"
document.write("<font color='#CC0000' face='Arial' size='-2'>"+dayarray[day]+
</script>
| <a href="/contact.htm">Contac
| <a href="/leonhard/directions
</tr>
<tr>
<td height="668" valign="top" width="572">
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="658">
<tr>
<td colspan="3" height="66" valign="top"><a href="http://www.ie.psu.edu/welcome.htm" onMouseOver="window.status
<td width="2" height="66"></td>
</tr>
<tr>
<td colspan="3" height="12" valign="top"> </td>
<td width="2" height="12"></td>
</tr>
<tr>
<td width="398" height="285" valign="top" align="middle">
<center>
<img name="rImage"src="/images/
</center>
</td>
<td width="10" rowspan="4" valign="top" bgcolor="#CCCCCC"> </
<td width="173" rowspan="4" valign="top" bgcolor="#CCCCCC">
<p><b><font color="#6699FF" face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
</font></b><font color="#6699FF" face="Verdana, Arial, Helvetica, sans-serif" size="3"><font color="#000095"><b><font size="2">Penn
State IE Facts</font></b></font></f
<p><font face="Arial" size="1"><b><font face="Verdana, Arial, Helvetica, sans-serif">One
of the top five <br>
Industrial Engineering<br>
programs in the country, according to <i>U.S. News</i></font><font face="Arial" size="1"><b><font face="Verdana, Arial, Helvetica, sans-serif"><br>
</font></b></font><font face="Verdana, Arial, Helvetica, sans-serif"><i>
& World Report</i></font></b></fon
<p><font face="Arial" size="1"><b><font face="Verdana, Arial, Helvetica, sans-serif">First
Industrial Engineering<br>
department in the world <br>
(founded in 1908)</font></b></font></p
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Degrees
offered: B.S., </font><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1"><br>
</font></b></font><font size="1">M.Eng., M.M.M., M.S.,<br>
and Ph.D.</font></b></font></p
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Full-time
faculty: 26</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Students:
319 under-</font><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1"><br>
</font></b></font><font size="1">graduate and 154<br>
graduate (Fall 2002)</font></b></font></p
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">Spacious,
new $12<br>
million building with<br>
state-of-the-art <br>
facilities, including a <br>
working manufacturing<br>
facility, robotics lab, and<br>
4 computer labs (more<br>
than 100 networked <br>
computers)</font></b></fon
<p><b><font color="#6699FF" face="Verdana, Arial, Helvetica, sans-serif" size="3">
</font></b></p>
</td>
<td height="285" width="2"></td>
</tr>
<tr>
<td width="394" height="117" valign="top">
<p><font size="2"><b><img src="/images/News&EventsSm
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">  
590 Distinguished Lecture Series</a>-01/06/03</font>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">  
S. Kumara Named "Distinguished Professor"</a>-12/15/
<a
Chapter 128 December 2002 News Release</a>-12/1</font><fo
</td>
<td height="117" width="2"></td>
</tr>
<tr>
<td width="394" height="226" valign="top">
<p> </p>
<p align="center"><font face="Arial" size="1">The Harold and Inge
Marcus Department of Industrial<br>
and Manufacturing Engineering<br>
310 Leonhard Building, University Park, PA 16802<br>
Phone: 814.865.7601 | Fax: 814.863.4745
| E-mail: <a href="mailto:IEinfo@psu.ed
<br>
<br>
</font>
<p align="center"><font face="Arial" size="1">Questions or comments
about the IE web site, contact <a href="mailto:ieweb@psu.edu
</font></p>
</td>
<td height="226" width="2"></td>
</tr>
<tr>
<td height="2" width="394"></td>
<td width="2"></td>
</tr>
<tr>
<td height="2" width="394"></td>
<td width="19" height="2"></td>
<td width="168" height="2"></td>
<td width="2" height="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I saw that you created this page using Macromedia Dreamweaver and it doesn't give you the fastest code possible :)
Try grabbing javascript tutorials for better and faster code like 'rascalpants' gave you.
For another performance enhancement you could try to download ACDSee Classic (it's free), which can make your images smaller than they are. Just open your image with ACDSee and save it again. As a result the picture can turn out smaller than it was keeping the same quality, otherwise the size should stay about the same.
Cheers
Try grabbing javascript tutorials for better and faster code like 'rascalpants' gave you.
For another performance enhancement you could try to download ACDSee Classic (it's free), which can make your images smaller than they are. Just open your image with ACDSee and save it again. As a result the picture can turn out smaller than it was keeping the same quality, otherwise the size should stay about the same.
Cheers
A tip: Browsers process everything but tabs! :p get rid of all your spaces and unnecessary stuff!
It seems to be loading all the images when you access the page/image/button and therefore is dloading 30-40KB x however many pics.
no way around that with what you want to do (think of doing it another way.
P.S. a 56kb modem downloads around 3.5KB/sec so just one 30KB image is gonna take some time; how many you loading ? :D
i suggest you listen to the other dood and create a flash movie - not easy for a novice - SWISH 2 is better / easier.
or just look for an animated GIF creater and it will decrease the overall file size dramatically, let you include fades and wipes also etc, and you dont need that horrid applet thing called flash player or quicktime player - blargh! :D
no way around that with what you want to do (think of doing it another way.
P.S. a 56kb modem downloads around 3.5KB/sec so just one 30KB image is gonna take some time; how many you loading ? :D
i suggest you listen to the other dood and create a flash movie - not easy for a novice - SWISH 2 is better / easier.
or just look for an animated GIF creater and it will decrease the overall file size dramatically, let you include fades and wipes also etc, and you dont need that horrid applet thing called flash player or quicktime player - blargh! :D
Sherry -
Lots of good advice here - I would recommend trying rascalpants' code before changing horses completely to a flash animation.
But the question I have is what is really your desire for these images? I was wondering from the start if you wanted the images to change like a slideshow while a browser is parked on your page or whether the intent is to have a single main image, that changes when a browser comes back to the page from somewhere else.
If you're worried about download time, (and you should be, especially if this is your main page that all visitors need to wade through) you might consider the latter, even if you had originally envisioned the former. The relative difference will be greatly simplified code, enormous reduction in data download, and a 'fresh' view for visitors when they return to your site, without requiring you to do updates every 10 minutes.
Just a suggestion.
Good Luck
Lots of good advice here - I would recommend trying rascalpants' code before changing horses completely to a flash animation.
But the question I have is what is really your desire for these images? I was wondering from the start if you wanted the images to change like a slideshow while a browser is parked on your page or whether the intent is to have a single main image, that changes when a browser comes back to the page from somewhere else.
If you're worried about download time, (and you should be, especially if this is your main page that all visitors need to wade through) you might consider the latter, even if you had originally envisioned the former. The relative difference will be greatly simplified code, enormous reduction in data download, and a 'fresh' view for visitors when they return to your site, without requiring you to do updates every 10 minutes.
Just a suggestion.
Good Luck
I agree with barnz1... use my code :)
no really, I think you should get rid of the "slide show" effect and just use a random image each time someone "hits" the page. Unless the effect is a "MUST HAVE" from a client then do overload the users connection with heavy graphics and code...
I believe in the less is more(minimalist) approach...
But I do think you have received a wealth of good information from these experts and should come back and comment or award the points...
let me know if you have any other questions...
rp
no really, I think you should get rid of the "slide show" effect and just use a random image each time someone "hits" the page. Unless the effect is a "MUST HAVE" from a client then do overload the users connection with heavy graphics and code...
I believe in the less is more(minimalist) approach...
But I do think you have received a wealth of good information from these experts and should come back and comment or award the points...
let me know if you have any other questions...
rp
If i get time i'll do it for ya... but i think a solution is to name all the images incrementally such as 1.gif, 2.gif, 3.gif etc then in your code generate a random number, then simply change the document.blarg.src to the new image (OnWhatever event you want)- this can be applied in a variety of formats i believe, either when the user first hits the page or after a specified / random time... just a matter of coding which i don't have time for at the mo' just enough time to make the suggestion.
i.e. the real problem is in that you are loading every image when you load the page... so loading one image at a time would be fine.
the download time has nothing to do with your code. all you must do is save or export each image with compression. meaning if they are jpg then compress them like 40%, if they are gif then save them with all unused colors removed from the gif pallet and no more than 128 colors total. thats all you need to know to speed up your image loading time. let me know if that helps.
I'm afraid i'm right:-
notice this piece of code and its name is the give away...
MM_preloadImages - PRE LOAD! - in the body tag - so it fires when the page is loaded...
<body bgcolor="#FFFFFF" background="/images/bg.gif
If not then what is it doing ?
notice this piece of code and its name is the give away...
MM_preloadImages - PRE LOAD! - in the body tag - so it fires when the page is loaded...
<body bgcolor="#FFFFFF" background="/images/bg.gif
If not then what is it doing ?
yes thats correct that it is preloading all the images, but if it does not there will be lag on the page when the images change. thats why i suggest just making the images as small a file size as possible. if you take off the preload the page will load faster, but it also may pause and lag during each image download. chose the lesser of the two evils which ever that may be for you.
mjefferson96... I think file optimization is a moot point to this topic, because by default a web designer will make sure the files are as small as possible... In this particular case the images are large in dimension as well, so preloading in an onLoad tag will make the browser hang...
anyway...
I think Sherry got all the important information s/he needed...
rp
anyway...
I think Sherry got all the important information s/he needed...
rp
Hope i helped... "Peace will out"
Do u have Photoshop - it will allow u to optimise the image for the web. If not try and download an image optimiser from the web.
try
http://www.tucows.com/
http://download.com.com/2001-20-0.html
Michael