How to Upload a Photo to Your Website

Add GIF, JPEG, or PNG images to your page

Uploading image screenshot of progress bar

SpiffyJ / Getty Images

If you have your own website or blog for personal or professional reasons, adding images can create a more welcoming and appealing impression.

It's easy to add images online in standard formats such as JPEG, GIF, and PNG. Here's how to upload photos and other types of images to share with others, explain something, showcase an idea, or just make your website more appealing.

You can also make an image a clickable link to bring users somewhere else in your website.

Check the Image Size

Before you begin, check the size of the image you want to upload. Some hosting services don't allow files over a specific size. Make sure the image is under the maximum allowed by your hosting service. Image size restrictions apply to all formats, including PNG, GIF, JPEG, TIFF, etc.

If you've worked hard on the perfect image, but it's still too large to upload, it's possible to reduce the size of your photo to make it work.

Upload the Image Online

Upload your image to your site using your web hosting service's file-upload program. If they don't provide one, you'll need an FTP program to upload your images, or use an image hosting service.

If your image is in an archive format, such as a ZIP file, extract the pictures first. Most web hosting platforms allow uploads of only traditional formats, not archive file types.

If your image is already hosted elsewhere, such as on someone else's website, link to it directly (see below). You don't need to download it and then re-upload it to your own web server.

Locate the URL to Your Image

It's important to know where you uploaded the image, for example, did you add it to the root of your web server or another folder, perhaps one made specifically for holding pictures? You must be able to identify the image's permanent location to be able to serve it to your visitors.

For example, if your web server's folder structure for images is <root folder>\images\ and the photo you uploaded is called new.jpg, the URL for that photo is <website>\images\new.jpg.

If your picture is hosted elsewhere, just copy the URL by right-clicking the link and choosing the copy option. Or, open the image in your browser by clicking on it, and then copy the location to the picture from the navigation bar in your browser.

Insert the URL Into the Page and Link to It

Now that you have your image's URL, decide where on your website you want it to go. Locate the specific part of the page where you want the image to be linked.

When you've found the right place to link the image, use your web server's hyperlink function to link your URL to the word or phrase in the sentence that points people to the picture. It might be called Insert Link or Add Hyperlink.

There are many ways to phrase a link to an image. Maybe your new.jpg image is of a flower and you want your visitors to be able to click the link to see the flower. Here are some examples: "Look at this new flower growing in my yard!" "I would like to plant this flower this year." "My flowers are thriving. Look!"

You can also link to the image using the page's HTML code:

I have a <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Red_Hibiscus.jpg/250px-Red_Hibiscus.jpg">very pretty flower</a> growing in my garden.


Another way to link to an image on your website is to post it inline with HTML code. This means your visitors will see the image when they open the page, so there's no need for a text link. This works for images on your own server and for images hosted elsewhere, but you need to have access to the HTML file of the web page in order to do this.

<img src="\images\new.jpg" alt="Flower">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Red_Hibiscus.jpg/250px-Red_Hibiscus.jpg" alt="Flower">