Images By Tara Frieszell

Adding images to your website will make it more interesting and add to the design.

However, some viewers aren’t able to see the images on your site, so choose how you use images carefully.

Images on the Web

To add images to your website, you need to use the correct HTML coding.

<img src=“image source here”>

Because we are using HTML5, there is no need to add a closing tag for images.

How to Add Images

Remember, some viewers will not be able to see your images. There needs to be an alternative if your images aren’t loading or for a blind user to know what is on your page.

Adding the alt attribute allows you to name the image. If the image will not display, the description added in the alt attribute will be displayed instead.

To add the alt attribute, the coding looks like this:

<img src=“image source here” alt=“image title”>

More HTML

You can also change how big your image shows up on the page. By adding dimensions, you can define the sizing you want your image to display.

This is done by adding the width and height attributes. The width and height is in pixels. Be sure to keep the correct proportions for the image!

<img src=“image source here” alt=“image title” width=“400” height=“600”>

Image Sizing

Now you should know how to put the HTML code into your site to add an image. But where does the image source come from?

There are multiple ways to upload the image to your site. You can use an image from another website (as long as you are not violating any copyright laws) by simply placing the image URL into the image source attribute of the HTML code.

You can also upload your files to Filezilla or Netbeans.

Uploading Images

To upload an image to Filezilla, first connect to your server. Once connected, find the folder where your image is saved on your computer on the left side. These are your local files.

Filezilla Choose which files you want to upload from here

Drag the files over to the right side of Filezilla into the folder you want it saved in. You should save it in your index folder. My index folder is called public_html, so I will drag my images from the left side to the public_html folder on the right side.

Your files will go into the queued files tab. When transferred successfully, they will move to the successful transfers tab. If the files do not transfer, they will go to the failed transfers tab.

Once you have successfully transferred your images to Filezilla, you can add the images to your website.

If you added the images to the correct folder, the image URL should be www.yourwebaddress.com/yourpicture.jpg

Test it out before adding it to your HTML code. If that works correctly, your HTML code will look something like this:

<img src=“www.yourwebaddress.com/yourpicture.jpg” alt=“your picture” width=“400” height=“600”>

Filezilla

The simplest way to upload an image through NetBeans is to first create a folder. Right click on source files and click new—folder.

NetBeans

Name it images or whatever you want the folder to be called.

Now find the folder on your computer. On a Mac, go to the finder window and locate where your NetBeans project is saved. You should be able to find your images folder in there. Copy and paste or drag the images you want into that folder.

The images should now show up in your NetBeans project in your images folder.

The HTML coding for this would be:

<img src=“/images/filename.jpg”>

As you can see, there are multiple ways you can easily add images to your site.

Things to Remember:• Always add an alt attribute to your image so there

is an alternative when the picture does not display correctly.

• Add the width and height attribute as well to get the correct size of your photo to display. This also holds the space for your image while it loads, preventing the website from changing its layout.

• Resize images that are large files before uploading them to Filezilla or Netbeans. This speeds up the process of loading images and keeps the webpage weight lighter.