Image resizing

windows · Jan 9, 2008

I have an image that i want to put at the top of a frame, but the image is too long. What is the easiest way to make the image smaller. I do not have or even know how to use photoshop (yet that is). Any suggestions!!Get the free 30 day trial of PaintShopPro at <a class="postlink" href="http://www.jasc.com/Download">http://www.jasc.com/Download</a> _4.asp? and you'll be able to crop and/or resize your image. 
 
In the end it's worth buying either PaintShopPro or PhotoShop Elements. They're both brilliant and both about $80 - $100 (US). Unless you plan on getting into major graphix work or you have a very rich Santa then getting the full blown $600 version of PhotoShop isn't really necessary. 
 
NeilIrfanview can do the job 
<a class="postlink" href="http://www.irfanview.com">www.irfanview.com</a> 
Or: 
Download  Ultimate Paint v1.91f FREEWARE 
<a class="postlink" href="http://www.ultimatepaint.com/index.html">http://www.ultimatepaint.com/index.html</a> 
easy program :rocker: :rocker:while it is preferred to have small images on your page so it load faster, you can reduce the size of an image by setting the WIDTH and HEIGHT of the images. 
 
example: 
<img src=http://www.htmlforums.com/archive/index.php/"somepicture.gif" height=200 width=600> 
 
If a large image is loaded into memory it will load full size, even if re-scaled and displayed smaller than it really is. 
 
example: 
You can even have a full sized image loaded on a page and then a thumb nail image (smaller image) show on the page only. When the user clicks on the image it opens in a new window, but because it has already been preloaded it shows immediately. 
 
<a href=http://www.htmlforums.com/archive/index.php/"img1.gif" target="_blank"><img src='img1.gif' height=35 width=35></a>Sorry Kenneth, but that is a really terrible way to do things. 
 
Imagine a page full of thumbnails that in truth are all the full size image each of 50kb. Even on broadband I most certainly wouldn't bother waiting for 'em all to load before I was well and truly outta there. Especially since it's likely that on a page of thumbnails, I might only look at say 3 or 5 or so and I'd much rather wait for each of those to load than for the 10 or 20 or whatever ALL to load when opening the thumbnail page. 
 
If you're going to have thumbnails make sure they're resized down in an image editor like PSP or PS resulting in an appropriately reduced file size. Besides when you do create a thumbnail of a much larger image it's a good idea to crop around it a bit so that the main focus of the large image is clearly visible in the thumbnail - cut out the dead space. 
 
NeilRule of thumb: keep all thumbnail images below 10kb each (preferably much under 5kb each) unless you want your visitor to get bored and leave.Option 1, it certainly depends on what you are trying to ackomplish. 
 
If many thumbs are involved or the user is only to click on one before being transported to another page, then I agree with your comment. Also if the page is very heavily loaded with thumbnails (even if the larger pictures are eventually displayed on the page) it can be a bad idea. 
 
However, if only a few thumbs are involved and all of them are supposed to open on the same page eventually, you may as well get an early start with pre-loading the images. 
 
One example where I used it myself was a page where the user could click through a 4-step instruction manual (4 images). They had already navigated to the page for the specific purpose of going through the tutorial, e.g. I certainly expect them to click all 4 images while on the page. 
 
Above the large picture was 4 smaller thumb nails which were small resized images of the large images which would eventually open below. This meant that once you clicked the tumbnails on top the large image was already loaded and displayed immediately instead of gradually loading. 
 
It worked something like this: 
 
(4 images involved with original size: 200x300 pixels) : 
 
 
<table> 
 
<tr> 
<td>step1</td> 
<td>step2</td> 
<td>step3</td> 
<td>step4</td> 
</tr> 
 
<tr> 
<td> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript: navigate('1')"> 
<img src='http://www.htmlforums.com/archive/index.php/pic1.jpg' height=40 width=60> 
</a> 
</td> 
<td> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript: navigate('2')"> 
<img src='http://www.htmlforums.com/archive/index.php/pic2.jpg' height=40 width=60> 
</a> 
</td> 
<td> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript: navigate('3')"> 
<img src='http://www.htmlforums.com/archive/index.php/pic3.jpg' height=40 width=60> 
</a> 
</td> 
<td> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript: navigate('4')"> 
<img src='http://www.htmlforums.com/archive/index.php/pic4.jpg' height=40 width=60> 
</a> 
</td> 
</tr> 
 
<tr> 
<td colspan="4"> 
<img src='http://www.htmlforums.com/archive/index.php/pic1.jpg' name="tv" height=200 width=300> 
</td> 
</tr> 
 
<tr> 
<td colspan="4"> 
<a href=http://www.htmlforums.com/archive/index.php/"javascript: navigate('back')">Back</a> - 
<a href=http://www.htmlforums.com/archive/index.php/"javascript: navigate('ffwd')">Forward</a> 
</td> 
</tr> 
 
</table> 
 
<script language="javascript"> 
<a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"pic"+info+".jpg"; 
} else { 
var forward = (info == 'ffwd') ? true : false; 
var currImgSrc = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/document.images">http://www.htmlforums.com/archive/index ... ent.images</a>["tv"].src; 
var picNum = currImgSrc.substring(3,4); 
picNum = Number(picNum); 
var newNum = (forward && (picNum == 4)) ? 1 : (!forward && (picNum == 1)) ? 4 : picNum+1; 
document.images["tv"].src = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"pic"+newNum+".jpg"; 
} 
} 
//--> 
</script>Ah okay Kenneth, in those circumstances I can see preloading as being useful, but your original post was much broader in concept - at least to my warped and twisted mind.

NeilI didn't get this to work until changing java script in the links to be a single word: javascript 
 
Also don't forget to add the type="text/javascript" attribute into <script> tags.It is these boards that split the word javascript. The reason is to avoid bad code from messing up the forum. 
 
If you use code from this forum you should always use javascript in one word

Image resizing

windows

Guest