One commonly overlooked area when considering a new or updated website is the quality of the images that will be used. Over the years I’ve seen a number of posts and even been given advice that image quality isn’t that important and that higher-quality images will not result in a better-looking website.
While there are some instances where lower quality images will do just fine, there are other instances where image quality will make or break the overall design of the website. In order to understand why image quality matters, and more importantly define what image quality really is we first need to understand what goes into image quality.
What is Image Quality?
Depending on who you talk to and what you are planning on using it for “image quality” can be defined in a number of ways. One common measure or quality is the megapixel. This is a measure of how many pixels the sensor of the camera can capture. If you have purchased a camera or a phone in recent years this is the number that is supposed to represent the quality of the camera. However, megapixels aren’t the only measure of quality, and for many purposes, it’s not even a good measure of quality.
Other factors which have a greater impact on image quality include:
- Lighting
- Zoom Level
- Lens Size
- Processing
- Exposure
- Focus
Of these lighting, exposure, focus, and zoom level are the most important factors of image quality. While megapixels do matter, most cameras and phones produced in the last few years have more than enough to create images of sufficient quality to use on a website. If you are going to use the image in print or want to enlarge the images more megapixels might help with image quality.
Getting the lighting and focus right can be one of the most challenging tasks. Many of the images we see everyday feature artistic shots and creative blurs that create artistic representations of the subject. Some newer phones use software to recreate these types of images, but while these images might look great on Instagram and Facebook they rarely look good when used as background or hero images on a website. You can use these types of images to spice up a blog post or article, but for large images that span the page and hero images, you need a different approach.
Compression Artifacts and Image Size
Compression artifacts are created when your camera or phone takes an image and reduces its size in order to store it on your phone or SD card. These artifacts can be obvious like the images below, or they can be hard to notice. Either way, these compression artifacts make it impossible to edit the photos, change sizes, adjust colors or remove the background from an image.
Poor lighting and unfocused subjects make these artifacts even worse.
The 200% Test
One quick way to check if your images have artifacts is to look at them at 200% size. If you seek any blotchy blocks, image grain, corrupted colors, or out of focus areas you should consider taking a new shot. To do the 200% test you must start by getting the image to your computer. Doing this varies by device but it’s important that you don’t let your phone or camera reduce the resolution. The best way to do this is to plug the phone or camera directly into your computer and remove the image from the device like you would a flash drive. Put the image in a place you can find easily and then open it up in your favorite image viewer or editor. Once this is done, look for the zoom feature and zoom the image to 200%. Look at all areas of the image and make sure that everything you wanted to be in focus is, that there are no shadows or distracting backgrounds.
Checklist for Good Photos
- Find a well-lit area with even lighting and no shadows. Fluorescent lights can be used but often make the subject appear harsh. Make sure the light isn’t casting any shadows and that there are no colors being reflected onto the subject.
- Zoom with your feet and not your device. Unless your camera has a physical lens that zooms in and out zooming will create images that have many artifacts. When taking portraits for a web site, simply move closure to your subject.
- Learn your camera or phone. Google search on how to get the highest quality resolution images from your phone. Each phone and camera is different, but avoid allowing the phone or camera to process the images.
- Send the highest quality unprocessed images you have to the person building your site. Don’t apply filters or crops and make sure that portraits have an even background.
- Make sure to capture at least from the waist up.
- Take lots of shots and don’t give up until you get a high-quality image.
Leave A Comment