As the old saying goes, “a picture is worth a thousand words,” and it's no less true online. Websites that take advantage of striking imagery are much more visually appealing than those that don't.
When you have a business website, appropriate imagery can increase sales when your users relate to it. Images help establish an emotional connection between your website and your users.
In this article I will explain how to find images, how to optimize them for the Web, and what to consider when choosing your images.
Where to Find Imagery
There are many different ways to get imagery. Some are free, some are paid, and others simply require some effort on your end.
Buy Images from Stock Image Websites
The fastest way to get stock images is to simply buy them from one of many stock image websites such as iStockPhoto or Shutterstock. They both have subscription plans where you pay a monthly fee in order to get a specific number of downloads per month. It ends up being a much better deal if you need stock images on a consistent basis.
Hunt for Free Stock Images
Although most stock images are not free, there are still plenty of resources you can use to find free stock images. Generally speaking, they will not be as good as premium ones, but you might get lucky.
My favorite free stock photo websites include Morgue File, WikiMedia Commons, Unrestricted Stock, and Flickr.
Shoot Your Own Photos
If you’re a bit creative and have some available time, then you can always shoot your own stock images. You just need a decent camera, an understanding of how lighting works, and a mini photography studio.
Although there’s a lot of things to learn in this regard, the two most important things are (1) never use flash and (2) never take photos outside during overcast weather conditions.
You are not limited to only one of these methods for getting stock imagery. For example, at AdFicient we use all three when looking for the right images. If you stick to only one method, you are greatly limiting your options.
Optimizing Images for the Web
Now that you know where to find your images, the next step is to optimize them for the Web. Even though Internet speeds are much faster than they have ever been, you still have to take into account mobile devices. Although mobile Internet speeds are fast these days as well, you don’t want to be draining 50 MB of your users’ mobile data each time they load your website.
Size Your Images Appropriately
There are no concrete rules as to how big your images should be, but keep in mind that your main marketing message should be above the fold. If a ginormous image is taking up all the space above the fold, then you’re not doing it right.
Let the images support your message, but not necessarily tell the message itself. There’s only a few types of websites where images should speak for themselves.
Image Formats and File Size Compression
The fastest way to shrink the file size of your images is to use Photoshop’s “Save for Web” feature. You can get to it by going to File, and then “Save for Web…” menu option.
Since we’re talking about stock images, which are usually photos, you will either use JPG or PNG file format. JPG tends to be the lowest size for photography and you can lower the size even more by moving the quality down to 70-80%. In most cases, you won’t even be able to tell the difference.
Another way to optimize your images is to use an online tool such as Yahoo’s Smush.it. You simply upload the image and let the tool do its work. In fact, you can use both Photoshop and Smush.it to compress your images significantly.
Here’s what I was able to do with this image I found on WikiMedia Commons by Diego Delso. I resized the original image so that it was only 200 x 335 pixels for easier display in this example.
Photo Credit: Diego Delso, Wikimedia Commons
Design Considerations
When you decide to use imagery on your website, you need to come up with a holistic plan. How many images will you have on each page? How big of a file size should they be? And the most important question: Do you really need all those images?
As mentioned earlier, images are great to support your primary marketing message, but you shouldn’t use images alone to tell the story. Different images mean different things to different people. That’s exactly why you should use well-written content to convey your message.
It is perfectly fine to use oversized images that fill the entire screen, usually as backgrounds. You just need to make sure to lower the quality on that image as much as possible without making it look pixelated. Images used as backgrounds have a much lower focal point so the quality is not as important.
If you take all these things into consideration and make it part of your workflow, then you are on a good path of using well-optimized and fast-loading images on your website.
Do you have any tips or tricks when it comes to image selection and optimization? If so, let us know in the comments.
