How to Use Photos Properly in Your Website

My apologies for the following two clichés, but as the old saying goes, "a picture is worth a 1000 words" and content is king! Both are very true when it involves websites because people will "See" before they "Read" and if you do not present your website or web page in a visually pleasing way, why would anyone want to venture onward to page 2?

To be honest, whether it's graphical elements, illustrations, or photographs, images in general are part of your content and to use them correctly, I decided to write a little guide to help you get better at choosing the right images for your pages and posts.

Plan Your Content

When you are about to create a page that will contain images, careful planning may be required before you begin writing your amazing story. I find it's best to know what you are writing about and how to enhance your page with amazing images that catches the users attention even more. Case in point, as you read through this article, you will see what I mean by images and quality.

You don't have to fill your page up with images, but having at least one is always a nice touch. Remember, it doesn't always have to be a photograph, it can be a nice illustrative graphic, or even some form of video media.

Sizing Your Images

If I can provide one recommendation for anyone wanting to use images (photos) in their web page, I strongly suggest you consider using large quality photos. When I say large, I mean photos that are larger than 960 pixels in width. Height is not an issue here because anything that is 960 pixels wide will normally have a relative sized height. For example, the common 800 x 600 photo will amost always be 600 (or larger) in height if a person mentions a width of 800 pixels. Of course, that is my own assumption.

Most web pages have a content area width of around 960 pixels, although many are now exceeding this to 1000 pixels or more (high resolution monitors). I've seen many themes available that now incorporate full width background photos, so it's not uncommon to have very large images loading - although file size now becomes an issue - more on this later.

RECOMMEND: Always go for the photograph that is at least 960 pixels wide.

The reason why I prefer this size to be the required minimum is because you will maintain the quality at full width, but also when downsizing to a smaller dimension. However, it's very important that your original image of 960 pixels has the best quality possible. Quality will be based on colour tones, shadows, contrast, and most of all, it has great focus (sharpness) for details. Here is a great example of needing a 400 x 400 photo in your page, starting with an original size of 200 x 200 and then resizing it compared to the same image if the original size was 400 x 400 pixels:


As you can see, I would imagine you would prefer to use the second one for your website because it's higher quality and simply just looks better.

Where to Find Quality Images

Finding the best source of images can often be a very daunting task considering how many are available to people. So getting to the point, where can you find images?

  • Your own photos
  • An image stock house
  • The Internet
  • Hire a photographer

There may be others to consider, but the most common are the four I just listed.

Your Own Photos - The cheapest way is to use your own photos...providing you have good quality ones available? Most cameras today are digital and take amazing photos, not to mention large enough as well. If you are writing an article or creating a page, just make sure your photos are relevant to the subject.

An Image Stock House - These are often used by the commecial industry for websites, publications, video media, and other forms of marketing materials. Most are too expensive for the average person, but if you spend enough time searching the net and checking out the 100's of stock house resources online, you will find at least a few. For myself, I use which is well priced and offers so many photos, it would take you a lifetime to look at each one. Very high quality of various sizes. If you have a business, a stock house is the way to go.

The Internet - The internet obviously contains an unlimited selection of images, graphics, and even video, but just keep the word "Copyright" in your mind when looking to use any. Being online doesn't mean they are always free to use, but if you see one you would like to insert into a page, I recommend you contact the original author and request permission (preferably in writing). However, one good source of images that are - for the most part free - is the Wikipedia Commons site which has a ton of images you can use. Even I use this now because it's great for creating my theme demo websites.

Hire a Photographer - Unless you have a ton of money and need something very specific to your needs, hiring a photographer is great because you can get exactly what you want. But please note this is going to be very costly, so expect to pay $100's if not $1000's for one. Who uses a photographer for hire will normally be advertising agencies or publications such as fashion and editorial magazines.

Optimize Your Photos

Not everyone has the software to do this, but it's generally a good idea to optimize your images. This basically means make the file size smaller by reducing the quality level through a program like Photoshop...just not to the point it degrades the image. If your website has a lot of images, file sizes add up and can take your pages a lot longer to load. If you have a page with 5 photos where each photo is 1 MB in size, you might as well go for coffee while it loads.

To give you an example of image quality in relation to optimization to file sizes:
(Might take a moment to load because I had to keep this level at maximum quality


As you can see how each image begins to degrade once you start reaching the 30% point. The only benefit with this particular photo is file size. Some photos with different subject matter may still hold quality right down to 10% while others might only work to about 80%.


If you run a business website, you will want to have the best quality images, but for family or personal images, having the top quality photos is not paramount, but at least try to upload good looking images. For web site pages, I recommend at least 960 pixels in width and use the best images you can get with good colour and sharp focus.

Pin It