Please note: Every link on this page opens in a new window. If your "Pop-up killer" is too efficient it can also stop new windows. When this happens, please press "Ctrl" and click on the link you want.

Basic Problem

The computer screen is made up with small squares that can take on any colour. These are called "pixels", short for "picture elements". Depending on your computer settings how wide your screen is: 800, 1024, 1152, etc, what ever pixels, the pixels are of different size - smaller or bigger.

When you increase the picture's size the total number of pixels in the picture increases because the picture's total area increases while the size of pixels stay the same ( the screen width doesn't change ). The computer cannot "know" what colour to fill in the new pixels that are needed to fill the space. The big version of your picture therefore loses some quality or sharpness. Of course, if you don't mind a slightly less sharp quality, you can use it on your webpage.

Generally computer generated pictures in GIF format can be more easily increased in size if they have been generated with vectors, because then the computer can recalculate the picture for any size. But photos in JPG format cannot be increased - at least not very much.

There is a program which can increase size of photos and other images - "Blow Up". This is an image resizing plug-in program, which can increase size of photos and other images up to 10 times the original. It works only with Photoshop CS+ or Elements 3+ and is not cheap - USD 199.

If you, however, accept the lesser sharpness, there are several ways how to make it appear as if the picture would increase in size. Below we discuss what can be done on a webpage.

Use Microsoft Word

Open Microsoft Word ( or Open Office Writer ), go to "Insert" - choose "From file" and find the picture you want to work with. Click on the picture name and "Open" your picture. It's now in your Word / Open Office document.

Now you put the mouse arrow in the lower right corner and you get a double arrow, press your click and hold it down. Drag the arrow diagonally downwards and outwards until you get the size you want. Release the click and you have your bigger picture version. You will now see greenish rectangles in each corner and in the middle of each side. If you want to change it further, you get the double arrow again by placing the mouse arrow on any one of the rectangles. Click anywhere on the document outside the picture and the rectangles disappear.

If you have been careful and increased the size in same proportion both horizontally and vertically, it has increased symmetrically. If it's too blurry, click on the picture and you get the rectangles back. Get the double arrow and push it back inwards until the picture is acceptable for your purposes.

To save this picture you can not use Paint. If you paste the copy into Paint you get only the original small picture. You can take a Screen Shot: Press "PrtScr" at the right hand side of your keyboard. After that you press "Ctrl" and "C" at the same time. To cut out this picture I used Artweaver, then you save as .jpg. Get advice on how to cut a piece of a picture

Instead of going over Word and a screen shot you can do it also in Paint or an Image Editor ( for instance Irfanview ). You increase the picture size in % instead of using pixels or cm or whatever. Start with 110%, then 120%, 130%, etc until the quality is just only acceptable any more. Each version you save under a new name, for instance add a number to the file name: 1, 2, 3, etc.

To the right the small picture have a blue frame around it indicating it's a link. When you click on that you get the bigger picture in a new window. This works by first making a new webpage with nothing else but the bigger picture version on it. The you make a link to that page.
The code is:
<a href="razorfish-b.html" target="_blank"> <img src="images/razorfish-s.jpg" width="140" height="91" alt="Original small picture"></a>
All written on one line.

razorfish-b is the big version and razorfish-s is the small one.

This is the way you use Thumbnail pictures. The usual way is to show the small picture version and on the click download the big high quality version. When the big picture is over 25 KB, please be polite to your visitor and give the picture file size in brackets. Then he/she can decide whether download it or not.

In fact both pictures give the same result, whether going via Word or by using the HTML picture call-up code, where you give the picture size specifications. The code for the right hand picture is same as the one above.

In the new webpage with only the big version you call up the small version but let the visitor computer recalculate the bigger size. The picture call-up code on the extra page looks like this:

<img src="images/razorfish-s.jpg" width="295" height="315" alt="Original small picture increased"> All on one line only

The difference is in the original picture. Going via Word and then downloading both big and small picture takes longer time than downloading only the small picture and letting your visitor's computer resize it. In the code [ <a href= ] calls for the big picture "razorfish-b.jpg" and the "link picture" [ img src= ] for the small picture. The code above uses the small picture for both.

Long time ago I saw a recommendation not to have the visitor's computer recalculating picture size - but that was long ago and it works.

Use CSS

This doesn't work in Explorer 6 or older. This picture will "increase" in size when the visitor's mouse hovers above it. This easily upsets your display so you must leave enough empty space around the small picture to accommodate the bigger size. This is therefore shown in the right hand column where it doesn't change the display.

Now when you put your mouse arrow over the picture to the right it will change into an bigger version. In this case only the small picture with transparent background has been downloaded.

The code in the right hand column ( where the picture is ) is like this:

<img class="cellphone1" src="images/cellphone.gif" height="90" width="70" alt="Old style cellphone" title="Old style cellphone">
All written on one line. This time we have included also "title tag", because Firefox doesn't display the "alt text" except when picture is missing.

The rest of the code goes into the <HEAD> section. Therefore this doesn't work if your website is on a free server, see code below:

<style type="text/css">
cellphone1{
width:90px;
height:70px;
}
.cellphone1:hover{
width:160px;
height:140px;
}
</style>

Since April 06, 2010, according to
Free Counter