The Ultimate Handbook for Using Photos in Websites

If you're looking for a guide that can answer how to insert photos alongside your website content, how to find those images, how to upload your images, and even how to create effects with your images? This guide has got your back! There are three sections:

  • Image sources (where you can get images, and any limitations)
  • How to insert images (hosting and HTML)
  • Making the most of your photos (tips on the effect of placement, captioning, etc)

Each section contains vital tips for using photos on your website. It may sound complicated at first, especially if you have to write your own HTML code from scratch, but if you do it often, you’ll soon find yourself doing it automatically.

Image Sources

There’s no point in learning how to insert photos into your website if you don’t have any photos to use. Of course, you can always take your own photographs and make your own graphics, but you may need a photo for a specific topic you can’t get photographs of – something on culture, perhaps, or about a specific area.

Your first instinct might be to go straight to Google, but if you do that, you’ll run the risk of using a copyrighted image. If the owner of the image finds out, you could end up having to take down your website in a hurry. Fortunately, you can avoid that by searching archives of free stock photography, or even getting a subscription to a website that offers stock photos. There are tons of them out there, and many of them offer free, uncopyrighted Creative Commons images – that means you can use them without attribution as much as you like, without paying a cent.

  • StockSnap.io: All absolutely free and with no need of attribution. Looking for a photo of a beach? Just type in “beach” and browse.
    Screenshot of StockSnap.io
  • Life of Pix: Same simple search method – pick a keyword and go.

    Screenshot from Life of Pix
  • Unsplash: Same idea, and there are some quite unusual photos available.
    Screenshot of Unsplash.com

You can find other suggestions here.

How to Insert Images

The first thing you need to do before you can insert a photo or other image into your Web page is to host it somewhere. If you have Wordpress or something like that, you probably have your own hosting. The methods to upload are usually similar, so I’m just going to give the examples of Wordpress and then a free image host, Tinypic.com.

To upload an image to Wordpress:

  • You can do this straight from editing a page or post! Click on the “add media” button:
    Screencap showing the add media button
  • Go to the “upload files” tab.
  • You need to have the image on your computer for this step. If you don’t, go and download it, transfer it from your camera, or whatever you need to do.
  • You will now see a large box which says “drop files anywhere to upload, or select files”. You can find the image on your computer and drag and drop it into the window, or use “select files” to navigate to it. Whichever you find easier!
    Screencap showing the upload screen on Wordpress
  • Now you can actually do all the HTML automatically by filling in the fields below the image: 
    Screencap of image description window

 

If you don’t have a Wordpress site or your own place to host images, something like Tinypic.com will work just as well.

To host a photo on Tinypic:

  • Go to Tinypic.com.
  • Click “choose image”, and find the image on your computer. 
    Screenshot showing tinypic's uploading page
  • Once you’ve done that, click “upload now”. You may have to fill in a captcha – this is to prevent spam uploads, and shouldn’t be too difficult.

Now you have the URL of the image and you’re ready for the next stage!

To add your photos to your website using HTML is quite simple. At its most simple, all you need to type is: <img src=”URL”> Between the quotation marks, you insert the URL where your image is hosted.

But there are actually all kinds of extra attributes you can add to the HTML to make your site look just the way you want it. There’s also a tag to help people with visual impairments by providing a description.

  • Add a description: <img src=”URL” alt=”Description of image”>
  • Alter the size of the image: <img src=”URL” height=300 width=400>
    (This will be in pixels. If you just set height, width will automatically scale to make sure your picture isn’t stretched.)
  • Move your image to the left, right or center: <img src=”” style=”float:right”> or  <img src=”” class="alignright">
    (Float:right allows you to position your image amongst your text. Experiment with the two styles to figure out what looks best.)
  • Add a border: <img src=”” border:”8px”>
  • Create a marquee: <marquee><img src=”URL”></marquee>
  • Add white space around the image: <img src=”URL” style=”padding:8px”>

You can combine as many of these as you like to create the effect you need!

Making the Most of Your Photos

There are all kinds of ways you can make your photos stand out from or complement your text. You can cause your text to wrap around the image using the float attribute already mentioned, or you can center your image on its own line and use a border to make it really stand out. Whatever you do, make sure it looks right to you. You need to choose a size and placement of the image that makes the page look harmonious. You could add a caption to the image to draw attention to whatever feature you think is key.

Stock photo of a workspace with a computer and a blank piece of paper
Choosing a relevant, high quality photograph can really enhance your page!

Another important tip is to check the resolution of your photos. Higher resolution photos will look better zoomed in or scaled up, and high quality images look better. You can tell low resolution/low quality images from the pixilation you can see. It looks lazy and cheap, so even if you’re using a stock photo, make sure you download a high resolution image. That’s another reason to avoid just picking an image from Google Images – they’re often low quality, and with low resolution.


Example of a badly resized image

Finally, it’s a good idea to check how things look on a couple of different browsers. Sometimes, pages are displayed differently on Internet Explorer and Chrome, and it’s worth checking to make sure that that everyone will see your site at its best.

Nicole Walters
Nicole Walters Hire Me

Transcriptionist - Proofreader - Writer

I carefully choose projects I know I have the time, expertise and interest in completing. When I make a bid, I have already scheduled the work I could do for you. I currently work for the transcription company, Global Lingo, on a freelance basis, and I have previously worked for Dr Crockett of Dewsbury Hospital. I have a wide range of experience in transcription, research, writing and data entry ...

Hire Me

Next Article

5 Mobile Apps to Keep You from Wasting Your Time