Choosing and Optimizing Images for Your Website


Whether you’re a photographer or not, the images you choose for your website can draw in or turn away your dream clients. The trick isn’t finding images – there is stock photography all over the internet – but finding the right images and making them work for your website.

Topics Discussed:

  • How to choose images for your website

  • Things to avoid when choosing images

  • Stock photography vs. custom photography

  • Why starting with design is so important when choosing images

  • My favorite places to find stock photography

  • How to optimize your images for the web

Resources Discussed:

Choosing Your Images

Start with the Design

Always start by designing your website before investing in any kind of images. Think of it this way: your website is the house you’re building and the images are the décor inside – they make a big difference, but they aren’t going to determine what your website looks like.

Whether you’re DIY-ing your website or working with a designer and developer, let the design dictate everything else. This will help you in your search for images because you’ll know exactly what to look for.

Once you’ve worked on your  design, you’ll know things like:

  • Image size

  • Image orientation

  • Types of images

Once you have the design in place, it’s much easier to narrow down your search and find the right images for your website. Maybe the flat lays you love on Instagram aren’t right for your header because they won’t convey what you need them to. It’s better to know that before you’ve spent any money.

You also want to consider which images will be overlaid with text for graphics and which will stand alone to add personality.

Choose the Right Photos

Choose stock photos that fit your brand colors and style.

Instead of choosing images that look great, but don’t fit your brand, start your search with your brand in mind. Then, even if you find other beautiful options, you won’t be tempted to spend your hard earned money on something that won’t work for your business.

Even if you’re using a stock library, don’t try to use every image available. They may be beautiful, but if they aren’t on-brand, you’re going to confuse your audience and make your website less inviting and streamlined.

And now for the not-so-fun legal stuff:

Make sure to double (and triple) check the usage rights to the images you’re buying. You want to make sure that you can use them on your website to promote your services, and you need to know how you need to give credit to the photographer.

You will also need to know what types of edits you can make to the images you choose (such as cropping, adding overlays, adding your own products, or changing or removing items) and where you can use them (social media, website, opt-ins, webinar slides, etc.).

Each photographer and website will have different guidelines and restrictions, so make sure you’re familiar with them so you won’t run into legal problems in the future. (Just a tip: keep the receipt after you download your new image so you have it for future reference.)

If you’re working with a designer to find these images, make sure that the correct person purchases them. If your designer purchases your image, they may or may not be allowed to transfer ownership to you. If you want to own the rights to use an image in more ways than just on your website, you may need to purchase it yourself so that you have that ability.

Customize Your Images

You can make even stock photography unique through overlays, added text, and cropping (as long as you’re following the rules).

Here are some fun ways to add interest to your images and make them stand out:

  • Add an overlay in a brand color.

  • Add text to create fun graphics or pinnable images.

  • Crop your image in a variety of ways to get multiple uses out of it.

  • Add your own products to the image to show off your work.

By using these techniques with your stock photographs, you can create images that people will recognize as yours without you having to take the photos yourself. This is also a great way to get the most out of the images you’re investing in so you can buy less, but still have just as much flexibility.

Mix Stock and Custom Images

By mixing stock photography with your own images, you can create a unique look that no one can copy.

Even if you’re a photographer or have great images from past projects, you can use stock photography to spice up your image library and get some great on-brand images that you don’t have to take yourself.

Stock images are really versatile and you can use them in a lot of places on your website:

  • Banner images.

  • Backgrounds for sections you want to highlight (in Squarespace, you can do this through creating Index Pages).

  • Blog graphics.

  • Links to other pages on your website.

  • In your content library or shop to show off your work.

  • On social media to tie everything together.

Optimizing Your Images

Get Some SEO Going

Prep your images for great SEO so that they can help people find you online.

Usually, stock images will have names that reflect the company or photographer they are from. After you purchase and download an image, be sure to rename it to something SEO friendly before adding it to your website (because having an image name that references where you got the image won't help your business).

You can also add some SEO juice by adding keywords and keyword phrases on the back-end of your website and by adding captions or alt titles. This works differently on each website platform, but you should be able to find tutorials to guide you. (In Squarespace, you can add a caption to your photo and then hide it to get the SEO without having a caption below your image.)

Resize Your Images for Web

1. Adjust the image size

  • Entered the desired size

  • Be sure to save the image so as “resample image” to preserve smoothness

2. Choose your format

  • JPEG – perfect for images with lots of colors and gradients such as photographs. You can control how compressed the image is when saving.

  • GIF – a lossless format that has a limited palette of 256 colors. Good for images with solid colors or limited colors.

  • PNG – similar to GIF, but supports more colors. Allows you to have a transparent background. This format is replacing GIF format for most people. Will be a higher size and quality

3. Reduce the Size

  • Try to keep images under 75 KB (some banner images may be larger at 150KB)

  • Save your image to the exact dimensions you need on your website

  • Reduce your dpi to 72 – website can’t display any higher than that