Louise Thomason

Taking Better Photos For the Web

April 25, 2018

Most websites really come to life with good photos, but not everyone has the budget for a professional photographer. That doesn’t mean you can’t have excellent images though.

Depending on your business, you might need a variety of different images, from product shots to those of activity or a service you provide, and many of these can be done yourself.

There are a few general points to bear in mind, so we’re sharing our top tips on how to make the best of photos for the web.

The camera

The quality of cameras – and the cameras on smartphones - has drastically improved in recent years. Because of this, what type of camera you use is less important than some other factors (such as lighting) which will impact on the quality of your images.

Smartphone photography tips

There are some simple tips you can employ to get the best of your smartphones camera:

  • Turning grid lines on will help you to compose your shot. Consider the “rule of thirds”: divide your image using the two horizontal lines and two vertical lines. Try and position the important elements in your scene along those lines, or at the points where they meet.
  • Shooting with HDR (HDR stands for High Dynamic Range) mode on will help with tricky lighting conditions. The camera will take several shots at different exposures and blend them into one image with better balanced exposure.
  • Tapping the area of the screen you want to capture will help with the exposure (you can also adjust the exposure by sliding the sun icon that appears up and down;
  • Holding down the area of the screen you want to focus on activates AE/AF Lock – which locks the focus and exposure that area.

For taking vertical images or flat lays, making sure the cross match up will ensure the image is completely level.

You can get a number of reasonably priced bits of kit to help with smartphone photography: a Gorilla Pod is a small flexible tripod, which will help keep your camera still, for example; a Bluetooth remote control can be good if you want to be in the shot or keep the camera absolutely still. There are even a good range of lenses you can add to your smartphone.

Layout and content

Try to think about the layout of the images required on your site: for example, if the website requires a shot which is wider than it is tall, shoot in landscape, not portrait.

Consider the environment in which you take the shots, and for product photography, how you style them. Style is subjective, however considering elements such as the background (does it clash with your product, will it look professional?) and using simple props (depending on your product this could be flowers, some hands, a cup of tea) to make your product stand out and show it off in an attractive way.

A simple white sheet can be a good place to start for a backdrop, or get inventive with wallpaper, newspaper – or anything which could be made to look interesting. You can also source reasonably priced “fake” backgrounds such as these.

Image Quality

Your images will help to make your site look professional. They should be clear, in focus and not pixelated.

Good lighting will help to make sure your photos look good, but things that will also affect this are image size.

Trying to use to an image that is too small will result in it appearing blurry or pixelated on screen. Dimensions can vary, and you also don’t want to use a very large image that will affect your website’s loading speeds!

Resolution and Format

While websites don’t need large file sizes, they do need high res images.

Digital images are made up of thousands of pixels (blocks of colour), and the number of pixels in the image will determine how high the image’s resolution is and how clear the image will look – the higher the resolution, the clearer the image and the better it will look.

High res images are best for websites, as a good CMS (content management system) will do the work in resizing and compressing for you. All of the CMS that NB Communication use will do this.

This screenshot demonstrates the crop and focus elements of ProcessWire. This makes it easy to ensure the specific parts of an image you want to include are always in the frame.

The format you save your images also matters: it’s best to use JPEG for photos, and PNG files for graphics.


Lighting is a crucial factor in getting images that are clear, and look good. Natural lighting works best in most cases, however if you can’t use daylight, or are taking product shots, read on for more details.


Once you’ve taken your photos, there are simple edits you can make to improve them. Most smartphones have pretty decent editing tools, but there are countless apps with advanced functions which - VSCO or Snapseed are both good free options.

Basic edits like straightening to make sure landscapes or products are level; temperature, to reduce the warmth of an image and avoid too many yellow tones – making sure whites look white; and crop, to resize your image or alter the composition, will all help you get the best from your photos.

Tools such as the TouchRetouch app, which can remove unwanted objects or blotches from the photo, are also useful in getting a quality image.

Product shots

Your products are at the heart of your business, and it’s vital that they’re presented in the best way possible. It’s also important that potential customers get a realistic idea of what your products look like, and feel they can trust you as a business.

You might want to invest in a few simple bits of kit which will help you produce quality images of your stock: things like a light tent, a tripod or simple studio lights. (Shopify has a great blog post all about taking better product shots using a smartphone, too).

So there you go! These are our tips that should help you get the best from your photos, and take your website up a notch.

April 25, 2018

You may also be interested in...

Download our FREE guide:

5 Problems Causing Your Website To Underperform