Adding and Editing Your Website's Photos

First impressions are made in as little as seven seconds. But on your website, it’s even faster.

Like, six seconds faster.

So what makes for a good first impression in the blink of an eye? Compelling, professional-looking images. The presence and quality of your website’s photos can largely determine who engages with your brand and ends up buying your products.

In fact, studies have shown that if you clean up your images, you could visibly see increased growth. Content with compelling images averages 94 percent more total views than their text-only competitors.

And best of all? You don’t have to be a professional photographer or a Photoshop expert to make your site’s images look polished and attractive. With the following beginner-friendly photo editing tips, you can start reaping the benefits from day 1.

1. Prioritize Quality

Even if you ignore the science — that 65 percent of the population consists of visual learners, that 90 percent of information transmitted to the brain is visual, and that attention spans have now shortened to fleeting glances — you have to accept the reality that high-quality photos will make or break your site. In fact, 67 percent of people say that a site’s image quality was “very important” for selecting and buying products.

This may not seem like a “photo editing” tip per se, but take it from us: images that complement your site’s content contribute to a positive and persuasive user experience. Plus, they boost SEO. Google rewards your site’s rankings based on the relevancy and quality of your images, so don’t underestimate the power of winning photos.

If your budget doesn’t allow for your business to hire a professional photographer, take your own or invest in quality stock images (some like picjumbo, Pixabay, and Pexels are free).

2. Follow the Rule of Thirds

It’s okay if you don’t have an extensive photography background - we know you have other things to focus on. So let’s just start with the fundamentals of a good photo. A photo’s composition refers to the way elements in a photo are arranged within the frame. Composition helps guide viewers’ eyes through the photo and increases the impact of an image.

An example of this is the Rule of Thirds: the key parts of your photos (the interesting stuff) should be at the intersections of the lines dividing your photo into thirds.

Rule of Thirds Example.png

See how the women in this photo — who inexplicably chose a dry, weedy field for a game of telephone — are roughly lined up with the intersections of the lines? This is the essence of the Rule of Thirds.

You can even do it with a single object in a photo.

Girl Ocean Rule of Thirds.png

If your photos aren’t following the Rule of Thirds, you should choose a new photo or try to frame yours better by editing them to better adhere to the Rule of Thirds. Utilize the cropping tool (see No. 5 below) to realign the photo’s elements.

While rules are sometimes made to be broken, complying with the Rule of Thirds is a simple way to edit your photos for increased appeal and composition.

3. Focus on the Details

Believe it or not, there are a lot less flashy elements to photos that matter for your website. Paying attention to these little details makes for quick, easy fixes that will enhance your site and boost your SEO.

First, let’s talk about some of the most important ones.

Know the Right File Type to Use

First of all: PNG and JPG photo files are not the same.

Knowing how each one works can help you make wise web choices with your photos — and increase your site speed (just ask Google). The goal is to maintain a reasonable file size while not compromising the image quality.

Let’s start with PNG files. PNG files generally work better with high-resolution images with a limited number of colors because when compressed, they still contain more of the information than a JPG. PNG files produce higher-quality images and, therefore, come at a higher cost — a bigger image size. They are also the choice of designers who plan to do more fancy editing footwork, like effects with transparency.

All things considered, PNG files should be used sparingly for elements that absolutely require the highest resolution so you don’t put the brakes on your site speed.

Next, let’s talk about JPGs. JPGs are typically the choice for web images with lots of colors because their smaller file size allows for much smaller load times (photos actually end up taking a huge chunk of a site’s weight). However, with compression, some information is lost, meaning that photo quality is decreased — but you can still usually get a good balance between the two.

Photo File Name.png

Exporting your photo allows you to change the image file type.

While identifying which file type works best for your site images is a balance, it’s worth the effort to ensure that your site is optimized for speed and provides an engaging visual experience for your users.

Name Your Image File Correctly

With all of the day-to-day minutiae of running your website, you don’t need another to-do list task - we get it. Your time is precious and in short supply. Therefore, while it may be tempting to name your photos “asdfasdf.jpeg” or “photo1.png,” it’s important to give your photos a file name that relates to the image’s content. We’re not just being nitpicky — proper file names (like, hint: with your keywords) help Google know what your photo is about.

Use Captions and Alternative Text

Going the extra mile — even with seemingly-tedious tasks — helps tremendously with your site's traffic and improves your images and user experience. One of those must-dos is providing alt text for your images — the descriptive copy that details what the image will show if, for some reason, it cannot be displayed.

Next: captions. Good web images have accompanying captions that help optimize your images for search engines.

Yet another important reason to caption your photos? Captions are crucial for engagement. Captions are read about 300 percent more on average than the body copy of an article, so if you don’t have them, you’re losing out on readers. Web users are busy people. Give them small bites of text (like your captions) to grab their attention.

4. Flaunt an Authentic Style

Step back and consider all the images on your site. Together, do they match the unique essence of your site? Do they all align with your brand identity?

Consider the feel of your site. Is it clean and minimal? Artsy and boho? Whatever product or service your company brings to the table, ensure that the visual content you offer is true to your one-of-a-kind style and matches your brand.

Here are a few photo editing hacks to help you achieve that noteworthy look.

Utilize Filters

Filters aren’t just for Snapchat or Instagram. While they must be used with discretion (no dog ear overlays, please), filters can help enhance photos by giving them a specific feel. Used consistently across your site, filtered photos help you develop a brand style your users will recognize.

Play with Temperatures

You can also lean into the tone, mood, and aesthetic of your site by checking your images' temperature, so to speak. Any basic art class will make sure to mention warm and cold colors - red, yellow, and orange (warm) will come across as stimulating and vibrant, while cool colors like purple, blue, and green are said to invoke calmness and serenity.

Whatever you’re going for on your site, adjust colors to match your style. Different emotions can be communicated by playing with color balance, hue, or saturation settings in your photo editor.

Temperature.jpeg

The warmer colors of this photo give it a hint of adventure.

Temperatures 2.jpeg

The image’s cool tone adds on to the effect of the frigid landscape.

5. Crop It Like It’s Hot

Trimming your images can sometimes make the difference between having a decent photo and having the perfect one for your site.

Whether you’re resizing an image to fit specific dimensions or cutting out extraneous image details, cropping helps you eliminate clutter and better frame your images for clarity, appeal, and impact.

For example, take this basic stock photo:

Man at Computer cropping example.png

After being cropped:

Edit Website Photos

The image has a better composition that allows it to blend into your site more naturally.

The best part is you don’t even need expensive software. There are many web apps that allow you to crop (and many other editing tasks). You can sometimes even crop directly from your site’s CMS.

6. Sharpen

Think of sharpening your images like upgrading your contact lens prescription. When you do, things are just clearer. The same goes for your web photos. You want those images to be crisp and eye-catching, not blurry and painful to look at for too long.

Sharpening photos can be done easily with Photoshop, Pixlr, or PicMonkey. However, a word of warning. Don’t go overboard with your sharpen tool. You don’t want the dreaded image “noise” (which translates as graininess).

Hint: it helps to sharpen your image as a PNG file first and then convert it to JPG.

7. Embrace White Space

When it comes to your photos, the correct use of white space can make for visually appealing images.

In other words: don’t fear blank space. It’s a powerful design element that can provide visual relief for the eyes and draw a lot of attention.

Take Apple, for example. They are literally known for their clean, appealing, and visually strong image design.

Apple Quality 2.png

Apple is the king of cut-out product photos.

Cut-out images take a little editing know-how, but with practice, you can get the hang of it.

8. Correct Your Colors

Whether your photo’s colors are a little off, or you just want to adjust them to achieve a different vibe, altering colors isn’t beyond a beginner’s editing reach.

Most photo editing programs do the heavy lifting for you with color-adjusting presets, but it doesn’t hurt to know a thing or two about what options are available. Experiment with levels (adjust how light and dark your image is), contrast, and saturation to determine which alterations will help you produce powerful images.

Adjust the colors and exposure to turn this:

PicMonkey Colors.png

Into this:

PicMonkey Colors 3.png

Need a mobile tool? The Adobe Photoshop Express app (it’s free!) can help you make one-touch color adjustments and corrections on the go. Gimp is another great free tool.

9. Banish Blemishes

Even beautiful photography has hiccups sometimes (or, at least the occasional photobomber). But don’t fret, a dark spot does not an image ruin.

Fotor can help you remove unwanted objects with its easy-to-use clone tools (and a blemish remover!). Photoshop, of course, is the master software for cleaning up photos (consider it a virtual facial) with its healing and cloning tools.

Take a look at Fotor's clone tool:

Heal Tool Example Edited.png

The tool allows the photographer to remove some minor blemishes from an otherwise perfect photo.

Camera Ready

It’s been proven: sites with images get more views, build better brand awareness, boost SEO, and have more engagement. Want to reap those benefits? Outfit your site with quality photos and see growth — no photography degree needed. Implement these DIY photo editing tips and see the results for yourself.

If you still have questions about adding or modifying photos onto your website, feel free to contact us by opening a support ticket or use our live chat feature to chat with one of our live operators.

  • 3 Users Found This Useful
Was this answer helpful?

Also Read

How to Add a Cookie Bar

Almost all websites use cookies - little data files - to store information in peoples' web...

Difference Between Single, Multiple and Wildcard SSL

Secure Sockets Layer (also known as SSL) is the known industry standard used by millions of...

SEO-friendly URLs

Search engine optimization (SEO) is the process of affecting the online visibility of a website...

10 Ways to Make Your Website Accessible

Every website owner wants to attract as many visitors as possible. However, few take the steps...

A Complete Guide on TLDs

All about Top Level Domains (TLDs) Settling on a domain for your website can be an uphill...