Follow these three rules to choose your website images
Without images, your website would be very boring, but I find most of my clients are more confident with the text they want to add to their websites than they are with selecting images. There are many intricacies to using images, but these three rules will get you started with choosing and preparing images for your website.
Choose images that you have permission to use
Images can be photos, artwork, icons, or other custom-designed graphics. You will almost always use files in the .jpg image format. Never use images you find in a Google search. Most of them are copyright-protected and not allowed for use on a business website. Instead, try these ways to find images.
Use commercial images
Several companies offer free, beautiful images for commercial use without needing to credit the photographer. I use and recommend the Squarespace free images library and the stock photo sites Unsplash and Pixabay. If you can't find free images on those sites, Shutterstock has low-cost stock photos.
Use your own photos
If you or someone you know is a good photographer, you can also take photos on a smartphone or a digital camera. Horizontal photos give you more flexibility for using the images in a variety of places on your website. Make sure the photos are focused and well-lit and are free of distracting or cluttered backgrounds if possible. If you use photos of other people, be sure to get their permission to use the photos on your website.
Create your own images
If you want to try your hand at creating your own custom images, Canva is an image design product that has a free version. It offers templates of different designs for adding text, backgrounds, or frames to your own photos or stock photos.
Keep color and mood in mind
When I work with clients, I start with a questionnaire that helps me understand their goals. One of the questions I ask is about the words that they want customers to associate with their business. A website that evokes the mood of "artistic" would look different from one that shows your business as "dependable."
Choose colors in images intentionally
The large horizontal banner image on your website's Home page gives people their first impression of the message and the personality of your business. You should choose a pleasing, attractive image that suits your business and has colors that evoke the mood you want.
Maintain the mood with banner images
Choose just two or three colors for your website and try to repeat those colors in other images throughout the website. If you use stock photos, also try to keep the same kind of style and mood if you vary the banner images used across your website.
Optimize images for size and speed
If you're a do-it-yourselfer, you'll need to know a few things about setting image size and quality so your website images look as good as possible while still loading quickly on large monitor screens, laptop screens, tablets, and smartphones.
Resize images to the optimal dimensions
Pixels are a measurement of image size used by professional designers, where 1,000 pixels equal about 20 inches. Squarespace recommends resizing images to be between 1,500 and 2,500 pixels wide. Weebly recommends images to be sized to be about 2,000 pixels wide if they are banner images that appear across the top of a page or 1,000 pixels wide for other images. For best quality, avoid image sizes that are smaller than the recommended size and for fast loading, avoid images sizes that are larger than what is recommended.
When downloading from a stock photo site, try to choose a .jpg format image that has an image size that is close to the recommended size, but for best quality, always choose a larger size and shrink it to the correct size, rather than trying to enlarge an image. If you only have the choice of a .png format image, download that and then resave it with a .jpg format.
Smartphones take pictures at several thousand pixels each, so you'll need to resize camera images also.
Speed up image loading
Images that have large file sizes can slow down how fast a website page loads, which can discourage website visitors and also hurt your Google search rating. Image dimensions affect how big the image file is. An image that is 2,500 pixels wide will have a larger file size than one that is 1,500 pixels wide. You'll want to look for the best balance between image dimensions and file size so that the website page that shows the image loads within a few seconds but retains its quality and clarity.
I try to keep image file sizes to about 100K to 200K. You can check a file size in your image editing program or in your file finder window.
If you keep these rules in mind—you have permission to use the images, they match your website style, and the files are the right size—you’ll have met the most important criteria for having professional-looking images on your website.
