Back to steps 1-16
Write your webpage in Kompozer
Back to steps 17-21
Load your webpage to the internet server

Make your own website for free  

Steps 22-34 > Chose image editor > Re-size image > Load image into Kompozer & Filezilla > Web Location


Before Starting
1. You need a web hosting service <> for example, IX Web hosting with 24-hour help with even tiny details <> or search 'web hosting'
2. You need to register a domain name <> for example: <> and this is done at the web hosting company

3. Click images [pictures] to see larger
4. If there are words you don't understand, check wikipedia


Drag the image with mouse and drop on the Photoshop icon showing on desktop
Larger image
Website requires 'image editor' to re-size photos
Choose a program to resize photos:
    <> Photoshop Elements $50-80 > Free trial
    <> Gimpshop photo editor is a Free Download
    <> IrfanView is a Free Download
     The free downloads are solid programs, especially Gimp

Why do images need to be resized?
All websites use re-sized images so images fit on page and pages load fast.

Rule of thumb: you want your images approx 300 to 500 pixels wide & quality 10 Kb to 50 Kb > this will help your webpage load fast.
For example, images on this page are 300 pixels wide, with about 20 Kb quality.


Larger image
Here is how to re-size image in Photoshop
(For Gimpshop instructions: See how to resize images with gimp)

1. Drag and drop image into Photoshop > here, a house picture is loaded
2. Go to File at top
3. Click: Save for Web [this is different than Save or Save-as]
4. Save-for-Web box appears ...
See next step below ...


Larger image
Here is the Save-for-web box in Photoshop

The original image appears on left side of screen
The re-size image appears on right side of screen

Notice the original starts out 4000 wide x 3000 pixels high , and 34,000 Kb quality

Notice the re-size is the same 4000 x 3000 pixels. but it is only 1,970 Kb quality

Your objective is to resize to 300 pixels wide, and 20 Kb quality


Larger image
Exact steps to re-size image

1. Select Width 300 pixels [or whatever width you choose]
2. Notice check mark in 'Constrain Proportions' means that Photoshop automatically fills in proportional Height when a width is entered > here the Height automatically fills in 225 pixels
3. Select Medium Quality to achieve about 20 Kb quality
4. Select JEPG so image is saved in .jpg format
5. Look at Re-size progress at bottom where you can see Re-size is 19.8 Kb quality
6. After reaching target goal, click OK at top to save image >>> this will bring up the final Save Optomized box shown in next step


Larger image
Here is the Final step in re-sizing: the Save Optimized box

After re-sizing image in Photoshop, you are ready to save image as follows:
1. Save-in: desktop was selected for location
2. File name: enter title of image [internet tip: fill spaces with a dash: for example:
<> my-image <> special-bargain-2 <> houses-for-rent <> jumping-horses]
3. Save as type: the .jpg format was entered automatically by Photoshop
4. Click Save and remember where image is located [here, image is located on desktop]


Here is actual re-sized photo from Photoshop shown on a webpage

The image is 300 pixels wide x 225 pixels high, and about 20 Kb total size
To see actual size: Right-click image and select 'properties' -or- 'image information' 

Each image is different, some look okay small, while others need to be bigger
Notice that all images on this page are 300 pixels wide and about 20 Kb quality > but you can vary your images as needed


Here is resized photo from Gimpshop
See how to resize images with gimp

The image is 300 pixels wide x 225 pixels high, and about 20 Kb total size
You can vary pixels and Kb
The key thing is how it looks on your page

Here is 75 x 56 pixels image > experiment and find best size and quality


Larger image
Ready to put image into Kompozer

Drag-and-drop house image into Kompozer, and the program automatically writes the correct code <> here the image is placed in a table cell


Larger image
Image location:

Important detail
: The image appears in Kompozer
> Since the image came from your computer, Kompozer automatically writes the 'image location' as your computer > in other words, Kompozer identifies where the image is located so the image can appear on the Kompozer screen

Next step is to load the house image into your website <> and then change the image location from your computer to your website > steps are shown below


Larger image
Ready to load house image into Filezilla

Open Filezilla


Larger image
Here is Filezilla, open and ready: Enter Host name, User name, and Password

Filezilla log-in requires specific website information available from your web hosting service
Your web hosting service will help you with the information

Here the host name is:  [without http://]
Your user name will be assigned by the web hosting service
Your password is established on the web hosting control panel

Your hosting service will guide you through the steps, and they understand novices


Larger image
In steps 20 & 21, we showed how to drag-and-drop .html webpages into folder

Images are put into folder titled: images with an 's'
Drag and drop house image into the images folder

Here is the exact web location for your images

>  ... is the web location of your website
>  ... is the web location of your images
> ... is the web location of that image

Image icon


Larger image
OK > In the step above, we put the house image in your website folder

Now it's time to enter the web location of that image in Kompozer so the code writer can match up the image with your web location. This will finish the work on images.

1. Click mouse on house image to activate image in Kompozer
2. Click Image icon on toolbar
3. Images Property box appears
4. In Image Location enter:
5. Everything must be exact


Larger image
Image Web Location
This is the most important step for putting your image on the website

The actual house image is named: Jan-18-09-PS.jpg
Therefore the exact web location is:

Very important detail: no spaces in the name
This is because web code requires spaces shown as: %20%
If there are spaces in the name: for example: Jan 18 09-PS.jpg
Then the web location is:
With the extra numbers and percent signs, it's easy to make a typo mistake

The image location has to be exact or image won't show in Kompozer > and it won't show on your website

The real-life web location for example house image is:    > is my website  > is location of all images on my website

Quick test of image location : paste location into browser > if it brings up error page, then the location contains errors > if it brings up image, then it's a good location

Common mistakes with image location: Remember the image location must be exact
> here's what happens when image location has error: after you enter image location, the image disappears in Kompozer. What to do??? Check that your internet connection is turned on. Load image again in Filezilla > make sure it's put in images folder > and then check Image Location for common mistakes:

> a capital letter instead of lower case
> missing a period, or a comma where period should be
> word misspelled

> missing the forward slash or dash
> extra space before-or-after slash or dash
> here's a tricky one > some images are not .jpg >> they are .JEPG or .gif or .PNG
       > to find exact format, drag-n-drop image into browser and look at URL

> missing last or first letter, for example: .jp instead of .jpg or ttp:// instead of http://
> forget to include the folder location:   /images
> forget %20% rule for spaces

> sometimes Kompozer stops receiving data, especially if more than 1 Kompozer page is open > save work, restart Kompozer again > don't forget to save work frequently while working and back up all files on your flash memory or external hard drive!!

Gas and electric water heatersSupport the economy:
Buy water heaters  from my associate links:

50 gallon Gas water heaters at Amazon
40 gallon gas water heaters at Amazon
50 gallon Electric water heaters at Amazon
40 gallon electric water heaters at Amazon
Hybrid / heat pump/ water heaters at Amazon

How to install gas water heater
How to install electric water heater
Troubleshoot gas water heater
Troubleshoot electric water heater
Point of use water heaters
Intermatic control centers Intermatic control centers:
+ manuals and parts

Including Z-wave
box timers Compare box timers

Control with Z-wave
programmable timer Compare programmable timers

Control water heater with programmable wall timer
Countdown timers Compare countdown timers

Control water heater with countdown timer
Compare power packs

My response might end up in spam folder, check email folders
Site map
Follow newest idea on twitter
Privacy policy