How do I add a picture to my Web page?

I've been reading your Creating Cool Web Sites book, and what I'd like you ask you is how do I put a picture on website? Even though you have mentioned it I am not sure what to write in the <img src='__" />. I am not sure where you get that part if you want to download a picture from the Internet. It would be a great help.

Dave's Answer:

If you're trying to add a picture on your Web page that's already somewhere else on the Internet, there are two different ways you can accomplish this task.

The first one, the easier one, is to simply right click (or, if you're on a Mac, Control-click) on the image when you view that page that hosts it. Your Web browser will pop up a menu of options, one of which will be something like "Copy Image Location" or "Copy Image" or similar. Do that.

Now the fully qualified URL of the image is in your copy and paste buffer. Go to the source of the Web page where you want to add the image then use the menu option Edit --> Paste to copy the URL of the image into your own Web page. Save the page. Done!

Here's an example of this. Let's say you were visiting the Department of Homeland Security Web site and really liked its logo. You right click on the image on the page then choose "Copy Image".

Now your copy and paste buffer will have this:

http://www.dhs.gov/dhs/images/dhs-header-title.jpg

To include that graphic on your own page, you'll want to type in the following:

then place your cursor between the two quotes and choose Edit --> Paste. Now it'll look like this:

Add that to your page, load your page in a Web browser, and you'll see this:

Make sense?

The other way you can do this is to download the image to your own computer, then upload it to your Web server and use a local reference. It's more complicated, but that way the Government site doesn't have to serve up graphics for your personal page.

To do this, right click on the image as before, but this time choose "Save Image As..." and save it to your Desktop, naming it suitably for your uses. Now use whatever tool you use to upload your HTML files to your public server (probably an FTP tool of some sort) and upload the graphic file itself.

Let's say that it's called dhs-header-title.jpg for purposes of explanation. Since you've uploaded it into the same directory that will contain your HTML, your HTML references to the image are simply:

Before we leave this answer, however, a brief note that regardless of what type of site you're building, commercial or personal, you should respect the copyright and intellectual property ownership of images on other sites. Just because the Motorola logo looks cool doesn't mean you have a legal right to include it on your site, copied or otherwise.

Some sites don't have this restriction, notably governmental sites, but the vast majority of Web sites out there should be assumed to have protected or legally off-limits images. If there's any doubt, email the webmaster and ask for permission.

Hope this sheds some light on your puzzlement!

More Useful HTML, JavaScript and Web Site Programming Articles:

✔ How to Create Predefined Google Image Search Links?

Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....

✔ Can I embed a Facebook search box on my blog site?

I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...

✔ Can I use CSS for drop shadows on my blog?

I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....

✔ How can I embed interactive photo panoramas on my site/blog?

I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...

✔ How can I create a Twitter search URL shortcut?

I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!

Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!

Categorized: HTML, JavaScript and Web Site Programming (Article 4068, Written by Dave Taylor)
Tagged: html, images, web page design, web page graphics, web page images
Previous: What's typosquatting?
Next: Won auction on eBay, paid, but never received the goods?

Reader Comments To Date: 27

SANDY said, on February 22, 2007 8:46 AM:

REGARDING PUTTING IMAGES ON YOUR WEBSITE. I HAVE JUST STARTED LEARNING WEB DESIGN SO I HAVEN'T PUT ANYTHING ON THE WEB JUST YET, STILL WRITING PROGRAM. I AM USING PERSONAL PHOTO'S IN MY PICTURES FOLDER. WHEN I GO ONLINE AND OPEN MY HTML IT SHOWS EVERYTHING BUT THE PICTURE IS A RED X IS THIS OK OR IS MY PICTURE NOT GOING TO SHOW ON THE WEB SITE. IF IT'S OK HOW CAN I TELL IF THE POSITIONING IS OK, IF NOT DO YOU KNOW WHY I CAN'T GET IT TO FIND THE PHOTO'S? I PUT IN THE FULL ADDRESS OF THE FOLDERS. THANK YOU.

tayeb said, on March 11, 2007 4:05 AM:

hey Mr. Dave,

what can I do to get the pictures of my website ENLARGED on new window with clear resolution by simply clicking on it ??

thanks
tayeb

DaveP said, on July 24, 2007 1:42 PM:

How do I get a picture to show up in the tile bar of the web browser when my web site is up? I think this is a really classy touch and I would like to add it to my site - which I am currently building.

fuse1318933 said, on October 1, 2007 1:10 PM:

I got my cousin to take some pictures of me on her phone and email them to me so I could add them to My Space and I can't get them on there for nothing. I tried saving them to a folder called "Pictures to add to sites" but now I can't find that anywhere. Man this is driving me crazy. I'm about ready to throw this damn computer out of the window. Please help me man. I have several different sites that I really need to place these pictures so I can be seen but no matter what I do I'm still left looking at a blank space where my photo should be. What's worse is so are the ladies I want to see them. Please man. HELP!!!

Bassile said, on February 19, 2008 10:34 PM:

Hey there I just need some information , about enlarging phone photos downloaded on my computer through a D600 Samsung mobile phone , I was on holidays overseas and had to purchase a PREPAID CARD,at the mobile shop my phone was not switched off,to replace the original sim card with one off theres , so all the phone picture settings were lost I did not know it till i got back home. T he pic size is 240 x180 , Type JPEG, Size 3.78 kb some are at a higher up to 7 kb, is there any way to enlarge them without deforming the pic , I do hve quit a lot of pics. Please advice me best regards Bassile Anastasopoulos

costa said, on August 8, 2008 8:32 PM:

Hello

I am trying to post a picture on a webpage stored in a temp folder in the c drive.

Is it possible to give me an example in code how to do this

Thank you

beej said, on October 10, 2008 11:35 PM:

The first part of your article where you instruct folks to copy an image's location and paste it to our own websites is called hotlinking, and is a BIG no-no.

Hotlinking images from other web sites which are not your own is bad because the image does not belong to you and may not be in the public domain (and could be copyrighted).

Moreover, hotlinking is stealing bandwidth. Saying "It's more complicated, but that way [their] site doesn't have to serve up graphics for your personal page." Right you are. But you basically are using up this other web site's resources when you do that. Like hooking up your cable TV from your neighbor's, instead of your own.

A good web expert would advise against such tactics.

Thanks,

beej

Dave Taylor said, on October 11, 2008 8:27 AM:

You raise a good point, Beej, but I'm not sure I'd go for the rhetorical flourish of "stealing". If you're writing about a company and include a graphic from their site, it's more akin to free promotion or advertising than any sort of theft.

Anyway, yeah, everything being equal, it's better to host all images on your own server. And it's always a good idea to ensure that you aren't violating any intellectual property or fair use rules.

Mary said, on January 26, 2009 10:45 AM:

I followed your instructions on putting a picture on my website with html. Thank you, your wording was so easy to understand. Now the problem, when I viewed my website, the picture was huge. Just FYI, my husband viewed it on his pc and it was huge too, I am working on a Mac. So I reduced the photo and did all the same steps over again. It looks GREAT on my screen but only shows up as a square box with some kind of drawing inside it on all our pc's. I've tried everything I can think of. Do you know what would cause this? Thanks, Mary PS I had a friend with a Mac look it up and it was great on her screen too.

michael vizzari said, on May 3, 2009 5:16 AM:

How do I get a picture of myself to someone on a web site?

Ikedi ohaegbu said, on August 30, 2009 4:38 AM:

I want my picture from my phone gallery to the internet

hashif said, on November 24, 2009 4:18 AM:

REGARDING PUTTING IMAGES ON YOUR WEBSITE. I HAVE JUST STARTED LEARNING WEB DESIGN SO I HAVEN'T PUT ANYTHING ON THE WEB JUST YET, STILL WRITING PROGRAM. I AM USING PERSONAL PHOTO'S IN MY PICTURES FOLDER. WHEN I GO ONLINE AND OPEN MY HTML IT SHOWS EVERYTHING BUT THE PICTURE IS A RED X IS THIS OK OR IS MY PICTURE NOT GOING TO SHOW ON THE WEB SITE. IF IT'S OK HOW CAN I TELL IF THE POSITIONING IS OK, IF NOT DO YOU KNOW WHY I CAN'T GET IT TO FIND THE PHOTO'S? I PUT IN THE FULL ADDRESS OF THE FOLDERS. THANK YOU.

frank brancaccio said, on June 2, 2010 1:10 PM:

I switche my web page from a verizon host to a comcast host. Everything came up but the pictures. How do I get the pichures back on? I have all the photos on my computer. Please if you can help me. Thank Frank

Dave said, on June 21, 2010 1:45 PM:

Yeah it really is stealing. If someone pays for their web hosting based on bandwidth used, and you hotlink a bunch of their content - you are making their internet bill higher than it should be, so that really is like stealing. Because the person paying for the service is not even getting any benefit from it - you would be.

nick said, on July 23, 2010 12:34 PM:

i have simple button-OPEN-in my pics.i need a site to upload pic and embed an http address in it. my website has one page. i need to drop and drag the button where i want it. button will be clicked on to re-direct to my forum.please help! im so tired of searching. my hosting is running and i cant publish without this link!! please!!

shahid said, on July 24, 2010 4:00 AM:

please tell me the method that how do i store pictures in my web page?

Frank Martin said, on October 30, 2010 8:08 PM:

Mr. Taylor
How do I get a picture to show up in the tile bar before my URL martindollhouses.com in the web browwer so that visitors can see a picture of my product before they actually open my web page? I am using Front Page 2002. Front Page automatically enters data in HTML format. Would this have to be entered in the "head keywords, description" or somewhere else? Can you tell me how to do this. Thank You in advance.

Dave Taylor said, on November 14, 2010 8:31 AM:

Frank, what you're talking about is what's called a "favicon" and I have an article on how to set that up too:

http://www.askdavetaylor.com/how_to_include_favicon_ico_web_page_blog.html

Hope that's helpful!

waqas said, on November 23, 2010 8:01 PM:

how can i adding flash or media player on my web page .please tell me tags

andrew said, on April 1, 2011 10:39 AM:

how do you add pics to your website, that are on your computer already ?

maaz said, on July 5, 2011 10:58 PM:

how do i add browse option on my web page kindly told me code that a person can upload pic on web by browsing her/his computer.

Adelaide Fiske said, on July 10, 2011 6:54 PM:

Thank your explanation was very helpful.

martin warr said, on August 31, 2011 11:57 AM:

Hi Dave i have goole home page but google it self will not come up same with face book writing on outer edge but not sign in page could you help
Thanks
martin warr

monu verma said, on September 18, 2011 4:14 AM:

Hi. i want to add a picture on webpage from my computer using html.so please ask me that how to set path of image.
sorry my english is very poor.

Donald said, on September 18, 2011 11:44 PM:

How can I update my company website like pictures,new,,change of address and any sort of changes how can I do it please help

Ash said, on September 23, 2011 11:45 AM:

Hello Dave,

I'm using my computer as a server in this case and followed you instructions above by saving the picture in the same folder where my HTML is saved. I tried to link it in the page source but it didn't work.

legend said, on January 8, 2012 11:07 PM:

only for mozilla firefox

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!

How do I add a picture to my Web page?

Reader Comments To Date: 27

I do have a comment, now that you mention it!

Check This Out Too...