How to Find and Optimize Images for Your Website
Images are one of the most important elements of your website. They help you tell your story and they can make or break your design.
So, how do you actually choose images to use on your website and, more importantly where do you find those images? So that's what I'm going to cover in this post.
So without further ado, let's dive into today's topic.
Prefer to watch? Check out the video below:
Pay Attention to Image Colors
So, as I mentioned earlier images can make or break your website. Essentially, they not only help you tell your story, but they can also help your audience retain information better. But in order to do that, your images need to look cohesive with the rest of your website.
So my first tip for you would be to actually pay attention to the colors that you've chosen for your website and your brand, and make sure that those colors match the images that you're choosing for your website.
For example, if your website uses light blue as a primary color; then you want to make sure that your images have colors that are either light blue or different shades of blue. Alternatively, you can use images that have complementary colors.
So for example, orange and yellow would work well with blue because those are the complementary colors to blue.
Consider The Editing Style
The second thing you need to pay attention to is the way that your image is edited. Most images that you download from the internet are not a straight up shot from the camera. They have undergone an editing process. So if you want your website to be, for example light and bright; then you'll naturally choose images that are light and bright.
Otherwise, it would be it would create a disconnect if the entirety of your website uses pastel colors and then uses images that are dark and moody. This is going to look out of place and weird so avoid doing that.
Keep Your Target Audience in Mind
My third tip for choosing images would be to actually keep your target audience in mind. When it comes to your website, everything comes back to your target audience.
The number one thing you want to ask yourself is “Would this image resonate with my target audience?”
If it doesn't resonate with your audience. If it doesn't fit with their general demographic, psychographic, then you shouldn't be using it. It's as simple as that.
For example, if you're creating a website for parents of young children; then, obviously you're going to want to feature images of parents and young children. You're not going to want to use images of sport athletes, or mountains and landscapes.
So you need to keep in mind your audience as well as what you're offering, because if it doesn't make sense with those two, then your images won't connect well with your audience. Rather, they will just throw them off and confuse them.
Where to Find Images for Your Website?
Finding images for your website can be tricky, especially when you don’t know where to look. The most important piece of advice I have for you is not to grab any random image from Google.
You can't do that. It's stealing somebody else's work. It's not your image and it can get you into a lot of legal trouble. You may end up paying a copyright infringement fine or worse, your site being shut down for copyright infringement.
Instead, spend a few extra minutes to find and use images that come from reputable sources.
What are the best sources to find website images?
You have several options.
Free Stock Photo Sites
Free image sites include platforms like Pixabay, Pexels, Unsplash, Gratisography, and there are plenty of others.
I actually have a whole list of websites where you can find free photos in my website photography guide which is available as part of my Website Prep System.
Those images are usually free; which means you can use them without attributing the author. Although, some may require a credit line, like in your footer or on a separate page in your website saying that images came from that website.
So just pay attention to the licensing and what they tell you to do if they require credit or not.
Premium Stock Photo Sites
Then you also have websites such as 123RF, Getty, Stocksy, marketplaces like Envato Elements, Creative Market, Adobe Stock, and others. Some of these allow you to buy images on an individual basis so you can buy images one by one. Others allow you to buy credits, which then allow you to download a certain number of images off of their website every month.
You will need to research these websites and see what makes most sense for you in your budget.
Another option are subscription websites, which are provided by other business owners. The way they work is that for a monthly subscription; you can download either unlimited images or a certain number of images, kind of like credits. For example, if a monthly subscription is $25, you can download 25 images that month and then 25 the next month and so on.
A few examples of those include Styled Stock Society, Haute Stock, Pixistock, Ivory Mix, Social Squares, and there are plenty of others. I do link them in the Website Prep System that I mentioned earlier, so check that out if you're interested.
So what should you choose? Well, that depends on your budget. If you're on a tight budget, free stock images are fine. If you have budget to spare, then opt for paid stock photography as they are definitely more unique.
Professional Brand Photo Shoot
Finally, you can also set up a branded photo shoot. Usually, a professional photographer comes and takes photos of photos of you, your desk, your office, and any branded elements you want to include.
This is usually the most expensive option, but if you have the budget to spare; you can get a lot out of it because you’ll get images that are completely unique to you. Plus, with a little editing magic, you can end up with hundreds of photos for your social media, your products, your blogs, your whatever other marketing material you may use.
How to Optimize Images for Your Website?
So now that you know where to find images for your website and how to choose the best ones; let’s talk about optimizing those images for your website. And to do that properly, you need to pay attention to three things:
image format
image file size
image dimensions
Let’s go over those now.
Common Image Formats
When it comes to images, there are two basic image types: vector images and raster images. Vector images are images that are typically in SVG, AI, EPS, or PDF format. The beauty of those formats is that you can scale them as big as you want and they won't lose quality. The problem with those is only SVG and PDF are supported in all major browsers and you typically wouldn't use those images on your website. They're not only meant for web use.
This is where the second type of images, the raster images comes in. Raster images are perfect for web use. The most common formats for those images are JPEG, PNG, and GIF.
JPEG basically stands for Joint Photographic Expert Group, and it is the most commonly used format on the web. Typically, you would use JPEG images for background images, for images of your team members, your co-workers; even your products if they don't require a transparent background.
So whenever you don't need a transparent background, JPEG is the way to go. This will result in a small file size which is important when it comes to website loading times.
Then we have the PNG, which stands for Portable Network Graphics, and it is essentially a format that has slightly higher quality than JPEG. But, it is also bigger in terms of file size. You would use this format for things like logos, patterns, simple illustrations, any image that requires a transparent background.
Finally, you have the GIF format which is used whenever you need an animated image. GIF stands for Graphics Interchange Format, and it allows you to add animated images to your website. And the beauty of a gif is that it can be compressed, by a lot. The quality of the image, of course, degrades, but if you want to, for example, use an animated logo or show a scrolling website image, you can use the GIF format.
And of course I have to mention that there's also the WebP format, which was developed by Google with the sole goal of reducing the image file size without compromising quality. However, not all browsers support WebP just yet. And not all website platforms support WebP yet. So even if you have images in WebP format, if your website platform doesn't support it you are going to need to convert it into JPEG or PNG in most cases.
Image Dimensions
Now let's talk about image dimensions. How long, how wide, how tall should your images be? That depends on how you're using them. For example, if you're using image as a full width background, you'll want it to be at least 1500 pixels wide. I wouldn't go past 2500 pixels but, somewhere between is how I would size that image.
If you're using an image on the page itself; either to showcase your product, or to provide a visual cue for a service, or to have a picture of you on your website; then you'll probably want photos that are in a landscape format, or square format, or even a tall vertical format. For those scenarios, I would recommend that the smallest you go is 700 pixels in width.
Most website platforms will create different image sizes so that your image can scale nicely, depending on the screen it’s viewed on so don’t stress too much about it. What is more important is the image file size.
Image File Size
The smaller your image file size is the faster your website will load. So you need to pay attention to the file size more than you do to the image size when it comes to images that aren't used as a background images.
I would recommend keeping it ideally below 100 kilobytes, but in some cases that can severely degrade the quality of the image. If your image looks too blurry when it’s under 100kb, then I would go between 100 and 150 kilobytes. This typically is the best compromise between having an image that is super reduced in size but that doesn't look bad in terms of quality.
You can use platforms like TinyPNG or TinyJPG to compress the image size before you upload it to your website
Final Thoughts
So those are the three things that I would share with you on how to choose and optimize images for your website. If you want more website tips, be sure to check out the articles below.
For more tips and tricks, check out these articles:
