Manual image loading means uploading files directly to your website instead of using a drag-and-drop builder or content management system

When you manually load images, you are working with the actual files and code behind your website. This gives you more control over where images appear, how they are named, and how fast they load. Most people do this through an FTP program (a tool that connects your computer to your web server) or through a file manager in your hosting control panel. The process involves three main steps: preparing your image files, uploading them to the right folder on your server, and then adding the code that tells your website where to find them.

Manual loading is different from using WordPress, Wix, or Squarespace, where you click an upload button and the system handles the rest. If you are building a website from scratch with HTML code, or if you need to move images between servers, or if your website builder is not cooperating, manual loading is the skill you need.

Key Takeaways

  • Image files must be in a web-friendly format (JPG, PNG, GIF, or WebP) and should be resized before uploading to keep your website fast.
  • You upload images to your web server using either FTP software like FileZilla or a file manager built into your hosting control panel.
  • After uploading, you add an HTML image tag to your website code that points to the exact location of the file on your server.
  • Organizing images into a dedicated folder (like /images/) makes your website easier to manage and prevents files from getting lost.
  • File names matter for both organization and search engines — use descriptive names like "product-photo.jpg" instead of "IMG_2847.jpg".

Prepare your image files before uploading

Start by making sure your images are in a format your website can use. The most common formats are JPG (for photographs), PNG (for images with transparent backgrounds), GIF (for simple graphics or animations), and WebP (a newer format that is smaller and faster). If you have images in other formats like TIFF or BMP, convert them first using free tools like Pixlr, Photopea, or even Paint (built into Windows).

Next, resize your images to the dimensions you actually need on your website. A full-width banner image might be 1200 pixels wide, while a thumbnail might be 200 pixels wide. Uploading a 4000-pixel photo when you only need 800 pixels wastes server space and makes your website slower for visitors. Use free tools like Pixlr, Canva, or even Windows Photos to resize before uploading. Aim for file sizes under 500 KB for most images — if your JPG is 2 MB, reduce the quality setting when you save it.

Finally, rename your files to something descriptive. Instead of "IMG_2847.jpg", use "blue-widget-front-view.jpg" or "team-photo-2024.jpg". This helps you find files later and also helps search engines understand what the image shows.

Connect to your web server using FTP or a file manager

To upload files to your website, you need to connect to your web server — the computer that stores your website files. Your hosting company provides the connection details. Log into your hosting account (usually through a website like GoDaddy, Bluehost, HostGator, or your company's own hosting provider) and look for "File Manager" or "FTP" in the control panel.

If your hosting panel has a built-in File Manager, click it and you will see a folder structure on the left side. This is your website's file system. If you prefer to use FTP software, download FileZilla (free, works on Windows and Mac). Open FileZilla and enter your FTP credentials — your hosting company will give you a username, password, and server address. Once connected, you will see your local computer files on the left and your server files on the right.

Navigate to the folder where you want to store images. Most websites have a folder called "images" or "assets" in the root directory (the main folder of your website). If this folder does not exist, create it by right-clicking in the File Manager or FileZilla and selecting "Create Folder". Keeping images organized in one place makes your website much easier to manage.

Upload your image files to the server

In File Manager, click the upload button (usually a button labeled "Upload" or an arrow pointing up) and select the image files from your computer. You can usually select multiple files at once by holding Ctrl (or Cmd on Mac) and clicking each file. Then click "Open" or "Upload" and wait for the progress bar to finish.

In FileZilla, drag your image files from the left panel (your computer) to the right panel (your server) into the images folder. You will see a transfer log at the bottom showing the upload progress. If an upload fails, check that your internet connection is stable and try again.

After uploading, refresh the File Manager or FileZilla window to confirm the files are there. You should see your image files listed in the images folder with their file names exactly as you renamed them. Make a note of the full path — for example, if your website is "mysite.com" and your image is in the images folder, the path is "/images/blue-widget-front-view.jpg".

Add the image to your website using HTML code

Now that your image is on the server, you need to tell your website where to find it. You do this by adding an HTML image tag to your website code. The basic tag looks like this: <img src="/images/blue-widget-front-view.jpg" alt="Blue widget front view">

The src part tells the browser where the image file is located. Use the path you noted earlier. The alt part is text that describes the image — this appears if the image fails to load and also helps search engines and people using screen readers understand what the image shows. Always fill in the alt text with something descriptive.

If your website uses HTML files, open the HTML file where you want the image to appear using a text editor (Notepad, Visual Studio Code, or any plain-text editor). Find the spot in the code where you want the image and paste the image tag. Save the file and upload it back to your server using the same FTP or File Manager method. If your website uses a content management system like WordPress, you may have a code editor or HTML block where you can paste this tag directly without uploading a separate HTML file.

Troubleshoot images that do not appear

If you upload an image but it does not show up on your website, the most common problem is an incorrect file path. Double-check that the path in your src tag exactly matches the location of the file on your server. Paths are case-sensitive on most servers, so "Blue-Widget.jpg" is different from "blue-widget.jpg". If the file is in a subfolder, include the full path: <img src="/images/products/blue-widget.jpg" alt="Blue widget">

Another common issue is that the image file did not upload successfully. Log back into your File Manager or FileZilla and confirm the file is actually there. If it is not, try uploading again. If the upload keeps failing, the file might be too large — try reducing the file size or compressing it further.

If the image appears but looks blurry or stretched, you may need to add width and height settings to your image tag: <img src="/images/blue-widget.jpg" alt="Blue widget" width="400" height="300"> Adjust the numbers to match the actual dimensions of your image file. If the numbers do not match, the browser will stretch or squeeze the image, making it look bad.

Organize and maintain your image files over time

As your website grows, you will accumulate many images. Create a folder structure that makes sense for your content. For example, you might have /images/products/, /images/team/, /images/blog/, and /images/backgrounds/. This keeps files organized and makes it easy to find and update images later.

Keep a record of which images are used where on your website. If you delete an image from the server but forget to remove the image tag from your code, visitors will see a broken image icon instead of the photo. Before deleting old images, search your website code to make sure no pages are still trying to use them.

Periodically check that all your images are actually loading by visiting your website in a browser and looking for any broken image icons. If you find one, check the file path in your code and confirm the image file still exists on the server.

Frequently Asked Questions

What is the difference between uploading through FTP and using a file manager?

A file manager is built into your hosting control panel and works through your web browser — no extra software needed. FTP software like FileZilla is a separate program you download and install. Both do the same job, but FTP is often faster for uploading many files at once. Use whichever your hosting company supports and you find easier to use.

Can I manually load images if I use WordPress or Wix?

Yes, but you usually do not need to. WordPress and Wix have built-in upload buttons that handle the manual work for you. However, if you want to move images between servers or work directly with files, you can still use FTP or a file manager to access the server behind your WordPress or Wix site.

What image size should I use?

It depends on where the image appears on your website. A full-width banner might be 1200 pixels wide, a sidebar image 300 pixels wide, and a thumbnail 150 pixels wide. Resize your image to the actual size you need before uploading. This keeps your website fast and saves server space.

Why does my image look blurry after I upload it?

This usually means the image dimensions in your HTML tag do not match the actual image size. If your image is 400 pixels wide but your tag says width="800", the browser stretches it and it looks blurry. Either adjust the width and height in your tag to match the actual image, or resize the image file itself before uploading.

Can I use images from other websites on my site?

You can link to them, but you should not download and re-upload them without permission. If you want to use someone else's image, either get their permission or use images from free sites like Unsplash, Pexels, or Pixabay that allow reuse.