How to Add JPG, GIF, or PNG Images to Your Site

Easy Guide to Showing Pictures

Uploading image
SpiffyJ/E+/Getty Images

Most images online are in formats like JPG, GIF, and PNG. You can upload photos like these to your own website to share with others or to further explain something, to showcase an idea, or for any other reason.

When you link an image on your website, you don't even need to host the picture yourself. You can upload a photo to a different web server and then link to it from your own website.

Check the Image Size

Some hosting services don't allow files over a certain size. Make sure that what you are about to upload to your website is under the maximum allowed size by your web hosting service. This is true no matter if the image is in the PNG format or GIF, JPG, TIFF, etc.

The last thing you want is to work hard on creating the perfect picture only to have it be too large to upload. Fortunately, you can reduce the size of your photos to make them work.

Upload the Image Online

Upload your JPG or GIF image to your site using the file upload program that your web hosting service provides. If they don't provide one, you'll need an FTP program to upload your images. Another option is to avoid using your own web server to host the image and use a different image hosting service.

If you're adding an image to your website that you downloaded or that you've packaged into an archive like a ZIP file, you'll most likely need to extract the pictures first. Most web hosting platforms do not allow image uploads unless they're in an image format like JPG, GIF, PNG, etc.—not archive file types like 7Z, RAR, etc.

On the other hand, if your image is already hosted elsewhere, like on someone else's website, you can link to it directly with the next step below—you don't need to download it and then re-upload it to your own web server.

Locate the URL to Your Image

Where did you upload the JPG or GIF image? Did you add it to the root of your web server or to another folder like one made specifically for holding pictures? This is necessary to know so that you can identify the permanent location of it, which you'll need later to actually serve the image to your visitors.

Here's an example of a direct link to a PNG file, this one hosted here on Lifewire:

https://www.lifewire.com/static/2.49.0/image/hp-howto.png

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. This is similar to our example where the image is called hp-howto.png and the folder it's in is called /static/2.49.0/image/.

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 that picture from the navigation bar in your browser.

Insert the URL Into the Page

Now that you have the URL to the image you want to link to on your website, you need to pick where it should go. Locate the specific part of the page where you want the JPG image to be linked from.

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 should point people to the picture. It might be called insert link or add hyperlink.

There are many ways to 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.

If you're wanting to link to the image using the page's HTML code, you can do that, too.

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. What this means is that your visitors will see the image when they open the page, so there won't be a link like you see in the examples above. 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">