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.

For a cultural-psychological viewpoint see Don Pedro's How to Choose Website Colours.

Scanning your picture(s)

Before scanning the picture or photo, use a dry soft tissue paper to wipe the scanner glass and the picture surface. This will eliminate most of dust particles. When you later increase the contrast, every dust particle will stand out and "disgrace" your picture. To remove these from your scanned picture you use the "colour pipette" for cloning. It will take a lot of time and requires plenty patience. If necessary to do it, do it before you increase the contrast.

If you scan in a document, you need 150-200 dpi (dots per inch) to get a clear print-out later. If it is a photo you should use 240-300 dpi for a good print-out result.

Scan in the document(s) as read. This means the width of the print-out is maximum same as an A4 size paper including margins. Otherwise your next employer or agent may be have to adjust the printer to "landscape" orientation. Most agents are too busy to do that. These are documents not images.
More information on scanners and scanning.

Picture formats

There are only tree (3) formats suitable for the Internet. The most used web picture formats are GIF (Graphics Interchange Format) and JPG / JPEG (Joint Photographic Experts Group). XBM is used for icons because these have only one colour (also .ico). You can also (from the scanner) get TIFF (Tagged Image File Format) or BMP (BitMaP), but file size of these two is too large to be used on the net. When you get these from the scanner, convert to JPG, GIF, or PNG.

If you don't have a picture editing program you can change the format to .jpg or .gif easiest in "Paint". Go to "Start" --> "Accessories" --> "Paint".  Open the picture. When you save it you get several options. If it's a photo, save as JPEG (JPG), or if you plan to work with it save it as PNG.

GIF = "picture_name.gif" supports pictures and images with one "transparent" colour. When you have a complex GIF with transparent background, the background colour of the web page must match the colour that was made transparent. Otherwise you will get a "halo" between the transparent one and the other colours bordering it. To avoid the "halo" you use "anti aliasing", but every picture handling program doesn't have this. If your program doesn't have it, you can reduce it somewhat by reducing the contrast.

You can check number of colours and if necessary change that, for instance in Irfanview. Go to "Image" --> "Decrease color depth" - in other image editors you look for something similar.

The format also supports "interlaced" pictures, which will download slice by slice. This lowers the total display time of the page. GIF format gives a maximum of 256 colours. Therefore GIF is most suitable for pictures with strong contrasts and large blocks of colour, like logos and other images and graphics created on computers. With most logos and computer generated images just 16 colours is enough, which reduces file size by 50%. When you save your picture, in most picture handling programs it's best to choose format first, then if you want it as interlaced GIF you click on that option.

Do not, however, reduce the colours to less than 16 because some browsers ( versions ) can suddenly show the remaining colours differently. GIF is not so good for colourful images with strong shadows and many different shades ( photos ) - "millions of colours". For these pictures you use JPG. GIF images more than 5 KB are better saved as "interlaced".

JPG / JPEG = "picture_name.jpg" will keep many colours better than GIF. This format is intended especially for photos. JPG supports over 16 million colours and you can easily pack the pictures. When packing ( compressing ), the picture will loose some colours or colour shades and very small details the individual's eyes cannot distinguish. Still there can be a subconscious difference in effect, which is difficult to measure or even estimate. JPG does not support transparent colours. See Don Pedro's Computer Viruses and Worms for the risk of viruses with .jpg format picture files.

When you open, edit, and save a .jpg format picture it will be compressed. Some picture handling programs do re-compress every time you use "Save as ...". To be on the safe side it's better to save your photos as .png from the very start. Once you have finished editing and are ready to upload your very final version, then you save as "progressive .jpg", except if the picture is smaller than 5 KB, because in that case you don't gain anything. Small images you just compress only. When you save your picture, in most picture handling programs it's best to choose format first, then if you want it as progressive JPG you click on that option.

JPG is not suitable neither for screen shots with text and images with sharp lines and large blocks of colour nor images that will be edited repeatedly. For screen shots GIF gives better result in most cases and for repeated editing you should use PNG.

JPEG is the original and correct name for the picture format. Because Microsoft Windows uses three letter extensions (like .doc, .htm, etc) it was changed to .jpg. Because a majority of computers run on Windows everybody is now using .jpg instead of .jpeg.

PNG = "picture_name.png" ( Portable Network Graphics ) is not very common on web pages - I have seen only some B/W pictures in this format - because most browsers (like IE 6) doesn't fully support this format. Furthermore .jpg usually gives smaller picture file size. See List of Browsers supporting PNG, covers about 100 browsers and browser versions.

PNG supports transparent background without any "halo" effect, you can even use variable transparency. To use this on a web page you need a browser sniffing JavaScript and then you deliver either PNG or GIF pictures, depending on browser. Part of the script goes into the <HEAD> section of your code so it doesn't work on free servers.

Even with a browser supporting PNG there's a further problem. There is something called "Gamma Correction". It is meant to represent the relative brightness of the display on which the image was created and that way supply correction compared with other colours (specified either in CSS or the hexadecimal code). It doesn't work as intended. Unless you are a expert I suggest you don't touch the gamma correction at all.

PNG is a "no-loss" format, which means you don't loose anything at all, never mind how many times you save the image. PNG is therefore useful while editing a photo. More about browsers, see Web Browsers.

Once you have finished handling ( editing ) your photo you can change the final version back to .jpg. You can easily convert .jpg to .png and vice versa in "Paint", which can be found in "Accessories" in almost all computers.

How to Change Picture Format and DPI

When you save your picture, always use "Save as ...". If you just click on "Save" you cannot be 100% sure even where the computer puts your picture. When you use "Save as ...", you control it and can check: it's correct format, it's correct name, and it goes to the folder you want. Plus you can sometimes do some additional adjustments.

The easiest way to change picture format, for instance from .bmp to .jpg or .gif, is in Paint. This you find in most computers in "Accessories". When you save your picture, choose "Save as ...", look in "Save as type:" for different formats. Sometimes and in some versions of Paint you get only one option.

If Paint doesn't work for you, then you can do the same thing in either Word 2003 or FrontPage 2003, which both have a very basic picture editor. Go to "Help" and search for "Picture editor" or "Change format". Follow instructions given.

If none of those programs is available, you need a small picture editing program, for instance Irfanview, a small (1.3 MB), multilingual and free image viewer and manipulator. If you only need to change .bmp to .jpg, you can use My Web Toolbox, free 30 days trial demo, only 0.5 MB.

In almost all picture handling programs, look in the "Dialog box - Window", which gives image size or dimensions. Where you find the image size you can also resize the picture. To do the change, just change the numbers for the width only and click "OK". Save your picture in whatever format you want.

Dpi ( dots per inch ) is a printer property and have no effect on picture file size in the computer. The computer works with pixels. "Dots" are what a printer puts on the paper and dpi therefore is a picture quality measurement. For a photo 240-300 dpi gives a good quality. It's therefore useless to change dpi to get a smaller file size. In the computer dpi is used to determine the size of text on the screen and have no connection with pictures.

If, by any reason, you decide to change dpi for your picture, be sure you switch off "resample" first. Modern printer programs will do it for you when you adjust print size before printing. If you still want to do the change get exact advice first. You change the value for dpi at same place where you change picture size.

Sometimes it can happen a picture gets by mistake saved as a webpage, i.e. HTML (.htm or .html). Windows uses .htm by default. When you now try to open your picture, for instance: picture-name.jpg.htm your browser will display the picture code.

To correct this, return to the picture file, give a "right-hand-click", choose "Rename". The file name now appears "highlighted". Click once so the dark colour goes away and the cursor starts blinking. Move the cursor so you can delete .htm (or .html). Hit the "Enter" key. Now when you double-click on the file name Windows will open your picture in the "Picture and Fax Viewer". This is so because the file extensions tell the computer what program to use when opening a file (.txt, .doc, .htm or .html, .jpg, etc.).

Main factors determining image file size

• Big or small physical size of your picture (cm x cm, in x in, pixels x pixels).
  
• Great or small number of colours.
  
• Not-interlaced or interlaced GIF format. (background pictures always "normal")
  
• Non-progressive or progressive JPG format. Progressive JPG gives a slightly bigger file size BUT reduces display time. (background pictures always "normal")
  
• Non-packed or packed GIF or JPG (= "Save for the web").

One way to display big pictures is by using a thumbnail image as link reference. When the visitor clicks on the thumbnail picture (1.9 KB) to the right, he/she gets the bigger picture (9.9 KB). You write the link as a normal link, but instead of text you put the picture call-up code:

The "image page" is an extra page, which doesn't have anything else but the big picture. When you use border="1" or some other value (except zero), you will get a blue border around the picture indicating a link, instead of the blue underlining of a text link.
For info about the "alt" attribute see Don Pedro's "Alt" and "title" Tags.

When you use thumbnail pictures (about 100-150 pixels width) linked to bigger pictures, keep the big pictures full scree size, i.e. between 700-800 pixels wide. There's still a lot of people using 800x600 pixel monitors.

Then you tell the visitor how big the picture is (in KB). The long download time is then known and expected already before the visitor clicks on the link. While the picture downloads (on a slow dial-up connection) the visitor can, for instance, get up and stretch his/her back or run once around the house or whatever.

Especially if you are preparing product pages, i.e. sales pages ("landing pages") then don't minimize the thumbnail pictures' file sizes too much. The big pictures you only optimize ( compress ) and keep full quality.

Suggested Optimizing Procedure

When optimizing your image you try to get minimum file size (in KB) while keeping as good a quality as possible. The file size of your pictures determines the download time for your web page to a very great degree.

On average people wait only 8-10 seconds [ especially if an e-commerce site ] before leaving your page (with broadband even less). In this time your background, your logo, and at least some of the first text should be displayed. To check picture file size (in the browser), put your mouse arrow on the picture. Give a "right-hand-click" and choose "Properties" (1 KB = 1024 bytes).

1. After saving your original image you start with reducing shadows, when it's a photo. If it is a computer generated image you skip this step.
   
2. If you have a person in the photo, use his/her skin to get the colours more "natural". If the person is a Caucasian (a "white" person) this colour combination should be OK:
   - R (red) = 235
   - G (green) = 190
   - B (blue) = 165
   In Photoshop you find these values as follows:
   - "Image" --> "Mode" --> "Indexed Color", then you go back to
   - "Image" --> "Mode" --> "Color Table". The table consists of small squares of different colours.  Choose a white one in roughly same place as the person's skin.  Click on that square and you get the table.
   
   This combination gives in most cases an acceptable colour to the whole picture. If the person is of an other race you can keep the original photo beside your screen and try to approximate the skin colour. You can always try to start with the values above. When you do this, I suggest you note down the values before you start changing them. If you end up with an unacceptable result, then you can always go back to the original.
   These colours (R, G, and B) are known as the Primary Colours.
   
3. To adjust or sharpen the contrast you use the "Unsharp Mask" tool. Try to use an object in the foreground when you adjust the contrast. You have three values you can adjust (values given are suggestions):
   - Radius = 1
   - Amount = 20%
   - Threshold = 10
   The contrast is OK when there is no "halo" around dark objects and flat colour areas do not turn to a grainy surface. If grainy, then try to increase threshold value step-by-step.  When increasing contrast of .jpg pictures the file size increases, while a slightly unsharp version gives smaller size.
   
4. Cut out what you don't want in the picture or cull (= crop) what you want and/or change the physical size to smaller. When you reduce the size, all colours will be pushed together and the effect will be same as increasing contrast.
   Do not increase the (photo) size, that makes the picture more "blurry", because the computer doesn't know how to fill in the new colourless pixels (pixel = picture element). Only if you have computer generated graphics based on mathematical vectors, then you can increase the size without any distortions. To increase size of photos see below.
   
5. Try to reduce number of colours. For photos you should leave it at 256 colours. For computer generated pictures you can usually go down to 16 colours only. This reduces file size with 50%.
   
6. Pack your picture = get minimum file size = "Save for the Web". When you save your image choose either interlaced GIF or progressive JPG, whenever either option is open for you, except for background pictures or pictures less than 5 KB. Always make background pictures "normal". Otherwise your visitor's browser can get confused or your visitor can get a kind of "flashing" effect on his/her screen.

Instead of the suggested procedure above, you can use Webgraphics Optimizer, free 30 day trial. If you have already minimized the picture file size, it's quite possible this program offers you a new version with bigger file size. If you try to optimize a .gif picture with transparent background, click on "IntelliOptimize" --> "GIF settings". It's possible your .gif turns into a .jpg, which cannot have transparent background, be careful not to overwrite your original.

You get the best result with the Web Optimizer (trial version) if you first optimize your original picture. Then from a copy of this you prepare a smaller webpage version, and then you minimize the file size of this small copy (see below). You can also process batches of several pictures at a time in the optimizer. I don't recommend that, because you loose control of individual pictures and mistakes always come easily.

When you compress your picture files you will find that different programs use different ways to indicate degree of compression. In some programs "100" means full quality, i.e. no compression, in other programs the same figure means full compression and "no quality". Try what numbers give an acceptable quality in your program.

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 are optimizing animated GIFs you have to be even more scrupulous about picture file size and especially number of different colours you use from frame to frame.

See example of enhancing a photo: Don Pedro's Clearing Shadows and Bright Light.

Remember, you can always "Undo" when you make a mistake ("Edit" --> "Undo"). It's not always possible to adjust all the values in every program.

If you are a professional photographer or you handle a lot of photos, see description of the "Curvemeister" program. It gives you some extra "colour space" to work with.

You can check the final result of your page in anybrowser.com/ for free. An other solution is to use those public computers you can access in your hometown. Using some other computers is the only way you can see your pages as others see them.

How to Change Picture Colours

To find the "Colour Balance" options window in most Image Editors you go to "Image" --> "Color Balance". In Irfanview you go to "Image" --> "Enhance Colors". The picture below is from Irfanview.

The "Colour Balance" window is divided into two parts. At the top to the left you have a thumbnail version of your original picture - to the right you have the same picture as "preview". When you change something you can see the effect directly in preview.


You do your changes by sliding the small scale buttons to left or right. Put the mouse arrow on the button, keep your click and move the button. Left is always = decrease (-), right is always increase = (+).

If your picture is dark, then first increase the "Brightness" until the picture is suitably light. The colours you either increase or decrease as needed - if needed. Look at the preview all the time when you are changing something.

The primary colours are also at the left hand side, just below "Brightness". You have three scales: R (red), G (green), and B (blue). When you decrease blue you in fact increase yellow.

Once you have finished click OK and then use "Save as ..." to save your new version under a new name. If you just click on "Save" the program will overwrite your original.

How to Reduce Picture File Size

When you include pictures on your webpages the picture file sizes will determine the download time for the webpage. You can always put small pictures on your webpage and thus keep download time at minimum. If you offer the original good quality picture in full size, you can further reduce the quality of your small pictures. In a small size picture you cannot see many details anyway.

After you have optimized the picture you can further minimize the file size (in KB):

1. Reduce physical size, you can make a separate smaller version for your webpage. Often a picture width of 200-150 (or even less) pixels is quite enough for a webpage. Smaller physical size means less pixels, which means smaller file size. (Both .jpg and .gif format)
   
   Cut anything unnecessary out of the picture (both .gif and .jpg) - a further reduction of physical size. See How to Reduce a Picture Size.
   
   
2. Reduce contrast. Keep both original and preview version in sight. Reduce the contrast as long as you don't notice any difference in the preview. Less contrast means less picture code, which means smaller file size. (only .jpg format)
   
   
3. Reduce saturation. Less colour definitions gives also less picture code, which means further reduced file size. Sometimes reducing saturation gives a slightly darker picture. If so, increase brightness just a little - the increase in file size of this is very small. (only .jpg format)
   
   Saturated colours are intense, pure colours without any gray. When you "de-saturate" you make the colours more dull but human eyes are not very sensitive to this.
   
   
4. Reduce number of colours. This you do only for .gif format images. For most .gif images you can reduce number of colours to 16. Don't go below that (except for black and white ones = 2 colours), the result can be unpredictable in some browser versions.
   
   
5. Increase compression. This means in fact you reduce quality - often you can reduce quality by 50%, i.e. you use 50% compression instead of 10% or 20%.
   
   
6. Digital photos. When you get a photo taken with a digital camera in .jpg format it can be difficult to reduce file size. What you do is you change to .png format first, then proceed as suggested above.

You need a picture editing program to do this. I use Irfanview. See picture in section above: "How to Change Picture Colours". You find "Contrast" and "Colour Saturation" on the right hand side in the "Enhance Colour" window.

On one webpage I had three pictures (.jpg format) about 8 KB each. I reduced these three to between 2-3 KB each and shaved 20 KB off the webpage's file size. On a slow internet connection that can mean up to 10 seconds less download time.

You can reduce file size also in some Microsoft Office Programs, get advice how to do.

Optimizing programs

There are several picture optimizing programs. While teaching yourself how to use such a program try to use all free trial options you can find. This way you learn how to do and at the same time you will find out which program is most suitable and likable to yourself. Basically all programs do the same things, but in a slightly different way.

Once you have exhausted all the free trials available on the net you can try to buy an older version of your favourite program. An old version you can probably get either free or almost free. It's not a very good investment to buy a new version, which may be is only little bit faster and only a little bit more efficient than the old one. Not while you are still learning.

Before you start using the free trials, reserve a lot of different photos to work with. The free trials are usually time restricted (for instance 2 weeks). If you work out 10-15 photos on each different program you start knowing very well which one you prefer. May be you can even find one of the picture handling programs on a public computer - if you do, then use it!

Many servers have free picture handling programs available once you have activated your site (= uploaded your "index" page).

Handling Pictures in Frontpage

Frontpage "Normal" page works pretty much the same way as World. When you want an image onto your page go to "Insert" --> "Picture" --> "From File ...". Once you find your picture click on "Insert" button. And there it is.

Once the picture is on the "Normal" page you can change the size to a more suitable one. Click on the picture and move the double arrows in the corners to change size symmetrically.

If you have the full version of Frontpage you can add the "transparency" pointer to the toolbar. See transparency below

In FrontPage 2003, the "Normal" page is called "Design". This version includes a basic picture editor. To find the editor you go to "Help", search for: "picture editor". You get several options on what you can do. If you just want to change the size, click on "Design" label in the lower left corner, give a right-hand click on the picture and choose "Picture properties". You can then change the size either in pixels or percent.

Before you upload your code page onto your server check your picture call-up code. Especially after you have inserted a picture or screened your page by "Preview in Browser ..." you have to change your code, because may be your Frontpage editor has made it according to the requirements of your computer. That means a "full path" file address, because on your computer all folders are available. The code looks like:

<img border="0" src="file:///C:/Documents%20and%20Settings/donpedro/
My%20Documents/My%20Webs/donpedrowebdesign/images/sunset.gif" width="..." height="...">
The server has a different operating system and when a visitor comes to your site he/she stays within your site folder. So on the server you use a "relative" file address, like:

<img src="images/sunset.gif" border="0" width="..." height="..." alt="...">
The "file: etc." code comes from Frontpage/2002, older versions use a backward slash instead (\). It is a good rule to always check your code, after handling a page in Frontpage but before uploading it. You can never trust a HTML editor 100%. For the "alt" attributes, see Don Pedro's "Alt" and "title" Tags.

How to make Transparent Background

Both PNG and GIF format supports transparency.  JPG was especially developed for photos and can take over 16 million colours.  GIF is for all pictures that are not photos and takes 256 colours only.  If you change a .jpg picture to .gif you loose many shades of colour and usually the picture turns grainy.  This can sometimes give a dramatic effect.

The easiest way I know to make a transparent background is with Irfanview. When you save your GIF or PNG picture you are offered an "extra" window ("Options dialog") with adjustable settings. Click on "Save transparent background" and "Choose transparent colour when saving". If the "extra" is on top of your "Save as ..." window, put mouse arrow on the blue ribbon at top, keep your click down and "drag" (move) the window to the side.

Choose picture file name and check it shows correct format, click on save. The picture will appear as some kind of rough copy, click on the colour you want as transparent. That's all.

In Photoshop 7 or 8 you go "Image" --> "Mode" --> "Color Table". Click on "Eye dropper" tool, then on "Magic Wand" and last on the colour you want to make transparent. Save your new GIF picture in the folder you want. You can use email to transfer pictures between different computers.

Transparent Background with JPG Format

JPG format does not support transparency. BUT if you have a simple JPG picture with only a few colours - and a flat colour background (for instance white) you can change it first to PNG, which takes transparency.

Make background transparent as above and change to GIF. If the picture turns a little bit grainy, reduce contrast until acceptable. The reason for going via PNG is, PNG doesn't make it grainy and once the background already is transparent it cannot change anymore.

The picture to the right has been changed this way.

How to Add Colours to BW Photos - Sepia

When you want to change your black and white photo to a "colour" photo, for instance to an old looking brownish or reddish brown tinted ( Sepia ) version, you need a picture editing program (see List of Programs above).

You can usually change black and white photos to GIF format, there's not much colours to loose, are there now? Then you make the white background transparent first before start adding colours. If you have a greyish background it's better to make the black and white photo JPG format because you will get a smaller file size. It's important to start with as small file size as possible because when you add colours the file size increases.

Photoshop

• You go to "Image" --> "Mode" --> "RGB".
  
• Then back to "Image" --> "Adjust" --> "Variations". Choose one variation at a time and go back again and again. Mainly you would be choosing "more yellow" or "more red". Each "variation" adds to the file size.
  
• Change back from "RGB" mode to whatever it was before.

If you don't have Photoshop available, you need another image editor. See how to do in: How to Change Picture Colours above.

Once you have got the colour as you like it, minimize the file size as shown above. The top two pictures to the right are of Isaac Newton. The coloured one has been made with the procedure above.

Or you can get your sepia picture with just a few clicks in PhotoFiltre, which is a free photo manipulating program. Open picture in the program, go in the toolbar to "Filter" and then "Color" --> click on "Sepia" and there you are. The picture of Einstein to the right is done in PhotoFiltre but not optimized (4 KB). This program is available in 25 languages.

How to protect my Pictures

After Google and the other big search engines commenced their image search the stealing of pictures on the internet has increased strongly. If your text is more important than your pictures you can always reduce the quality in the hope very few people will bother to take them.

You can reduce the quality by reducing the contrast a little bit. At the same time you get a smaller picture file and you save some download time. Additionally you can choose a lower quality (higher compression) when saving your picture, this also reduces the file size and therefore also the download time.

It's impossible to completely stop people from taking the pictures on your web pages, you can only make it a little bit more difficult. There are some additional ways to make the stealing more difficult and time consuming, see Don Pedro's How to Protect my Pictures and Images.

Picture Copyright on the Internet

When you download or copy pictures, be careful with copyright, especially on the Internet. If you download a photo from a website, you have to check: Is there any note about picture copyright on that webpage or website ? Even if there is not - better still be careful. You have to follow the Copyright Law in the country where you are when you download the picture.

If you photocopy (xerox) a picture, for instance from a book, and then download that picture on your computer, you have still done nothing wrong. The picture is still for your own consumption only! It's only when you upload this picture on a server (= publish it) you have to be careful. In this case you follow the Copyright Law in the country where your are when uploading your copied picture.

International copyright for photos is valid for 70 years from the time each photo was made. If the picture is in a book, which is copyrighted ("no part of this book may be copied .." etc), the time counts from the time when that edition was printed. So if you scanned in, downloaded and uploaded a picture in the year 2005 from a book printed 1934 or before, then you are on the safe side.

For more info on copyright see WIPO, and Janice Byer. Details on background of copyright and international problems with copyright on the Internet, see also copyright related news and information ( US and EU ).

Google has published their own "rules" for handling copyrighted material (text content only). These will probably be more strict in the future.


Languages available: ( Arabic ), ( Chinese ), Deutsch, Español, Français, Icelandic, Italiano, ( Japanese ), ( Korean ), Nederlands, Português, Pycckий.