How To Add Graphics

I added graphics to my website today. In the background, here’s what happened.

I downloaded the graphics that I was going to use for the site.  Then, I also edited the code that was going to put the hyperlinks into the graphics. For each graphic that shows up beneath the opt-in form on the right, there is a link to the social media websites that are represented by those images.

Things You Should Know About Adding Graphics

First, you’ll need snazzy graphics.  I cannot express to you how cool Steve is over at GFX-1. He has done all my graphics and I cannot imagine anyone else providing them.  If you don’t have a graphic designer that can help make professional, crisp, clean graphics, please consider finding one.  (‘Course I would highly recommend Steve’s work.)

Next, you’ll need to know what pages you want visitors to arrive at once they click on the image.  It is easiest to do this by having the pages open in other tabs in the browser window.

Finally, you’ll need to edit the html code that actually adds the link to the image.  If you don’t feel comfortable creating html code, there are multiple tutorials online that provide the format of the code.  The challenge will then be making sure that the code works.

If, however, you’d rather have someone else prepare the html code for you, please feel free to consider outsourcing as one of your options.  There are multiple people that I am aware of that love programming and enjoy managing websites.  Although the amount of coding I’m referring to (just to add the images and the links behind the images) is minimal, it is nice to have someone familiar with html to make sure that the code is correct and will work before you go through the effort of adding it to your website.

Summary: Steps To Add Graphics

  1. Get high-quality graphic images from a “professional.” These graphics will be how visitors “see” you.  Homemade graphics will give people the feel that either you can’t afford a real graphic designer or you don’t take your site serious enough to actually have a graphic designer.
  2. Edit the HTML to add the graphics to your website.  I added the graphics to my sidebar.  Because I added three graphics, I have three links (one per graphic) that I used.  Each link goes to my page on the site as shown in the graphic.
  3. Test your links.

If you can’t click on your links and go to the expected page, your visitors will not get to the expected page either.  Testing your links is like making sure your food is cooked.  If it doesn’t work for you, it won’t work for anyone else.  There is nothing online that happens without someone planning it to be that way.


  • David Bay

    Reply Reply April 15, 2014

    Hi Rachel

    Your header image is great and this is a nice concise post. Good luck with the course. I am enjoying it so far.

    • rachelbock

      Reply Reply April 16, 2014

      Thank you! I appreciate your feedback. I’m really happy with Steve’s creativity.

  • Jeff Ackerman

    Reply Reply April 17, 2014


    A good post on graphics. I agree with you that Steve produces great graphics and is well worth the cost and your header looks great. The most important thing about adding graphics and HTML code is as you said testing. Too many people forget that step and only find out later by someone else that their pages are coming up correctly.

    Here’s to living free.

    Jeff Ackerman

    • rachelbock

      Reply Reply April 17, 2014

      As a person who has worked in quality control and multiple highly detailed areas, testing results is always something I encourage. Also, I love sites where I can see what my site looks like in different browsers and on other devices. Apparently, not everyone sees the world the way I do. 🙂

      Thank you for your feedback!

  • Jamie Miller

    Reply Reply April 17, 2014


    I really like your header image, it is really cool looking. I have not added a header image to my site, but after seeing yours I am going to contact Steve at GFX-1 graphics and have one made. One question for you, do you have to have an idea of what you want your header to look like before you contact Steve, or does he work with you to help you come up with an idea for your header image?

    • rachelbock

      Reply Reply April 18, 2014

      Steve totally played with various ideas that I tossed at him. I had fun letting him create!

Leave A Response

* Denotes Required Field