5 Easy Tips To Help You Create Stunning Website Images

Fashion model at the beach


Have you ever seen a website with models’ heads unintentionally cut off?


people at an art expedition


With photos that are blurred or weirdly cropped?


InSource Loading GIF


What about images that take so long to load that you have time to go make yourself a cup of coffee before the website finishes loading?


Do you remember the names of the companies? Or their services or products? Probably not. Or if you do, it is unlikely you do so for positive reasons.

Here are some statistics that quantify the importance of images (from Jeff Bullas):

  •  Views: Articles with images get 94% more total views
  •  Search: 60% of consumers are more likely to consider or to contact a business when an image shows up in local search results
  •  Impact on Purchasing: For ecommerce sites, 67% of consumers say the quality of a product’s image is “very important” in selecting and purchasing a product
  •  Product Quality: In an online store, customers think that the quality of a product’s image is more important than product-specific information (63%), a long description (54%) and ratings and reviews (53%).

Don’t rely on your website’s template or plug-ins to automatically crop or resize your images. The results can be disastrous. Images can be distorted or poorly cropped. It’s better if you edit your images before you upload them to your site.

Preparing an image to be used online requires selecting the right size and file format. Here are some basic pointers that will help you post eye-catching images.

  1. Cropping Images: Before you upload a photo to your website, take the time to crop it properly. Get rid of InSourceRuleOfThirds-Focusdistracting elements and spaces that you don’t need. Make sure the focal points of your picture are in the right place. Your goal is to optimize the photo’s impact. Some experts recommend using the “rule of thirds:”  Imagine that your photo is divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines. You should place your points of interest along these lines or where the lines intersect. For more on this rule, check out this post: http://digital-photography-school.com/rule-of-thirds/. Some image editors provide a rule of thirds overlay to make this easier for you.
  1. File Formats: Be sure you know what file formats work best on websites and when to use them.

JPGs: Excellent for photographs. Handles a multitude of colors to provide a great looking image in a reasonable file size. Most photo editors provide tools that will let you balance the size of the file with the image quality.

GIFs: Great for logos and flat colored graphics. They have a limited range of colors, are good for smaller files, and are used primarily for animation because of the ability to save multiple frames within a single file. When saving a file in this format, you may have to select the number of colors (from 8 to 256) you want in the file. The fewer the colors, the smaller the file.

PNGs: Wonderful for graphics. Like JPGs, PNGs handle a large color range. Plus, they support both full and partial transparency.

  1. Image Editor: You are going to need a picture editor that works for you. Photoshop is one of the most popular but there are others. Costs vary, as does quality. One powerful free image editor is GIMP (GNU Image Manipulation Program). GIMP is open-source software with versions for Windows, Mac or Linux. It can do everything Photoshop can, but tends to be a bit clunkier. Be sure to take time to get acquainted with your editor’s functions and tools. They are not all the same. Some provide far less flexibility than others. For example, Photoshop gives you more options in how you save your aspect ratio than does Photoscape (a free editor). Playing around with a photo before you start working on one for your website will give you confidence in what you can do and ideas on how to make your images pop.
  1. File Size: Once you have cropped your picture, you need to consider file size, which is the amount of space a file takes on a hard drive or server. A smaller file loads more quickly—which is important for websites. Visitors get impatient. You only have a few seconds to capture their attention so don’t make them wait for large image files to load.
  1. SEO: Remember, search engines don’t just crawl the text on your website. They are also looking for keywords within the names you give to your image files. So optimize those images to enable them to help drive traffic to your website. When naming your images, use your company name and keywords that are in plain English and describe the image. For example, for the business “Les’s Best” which sells gluten free biscotti and macaroons, a photo of packaged biscotti could be named “Les’s Best gluten free biscotti”.

You should also add alt text to your images. Search engines use InSourceLes'sBestGluttenFreeBiscottialt text (text alternative) to understand images and that helps them point people to your site.

It is simple to do. Just add to your image tag a keyword describing the image. Again, the description should be in plain English and descriptive. “alt=”Les’s Best gluten free biscotti”. Fill out each alt tag for every product on your page. You can include product or serial numbers. But avoid keyword stuffing.

Images capture the imagination and interest of your viewers. They represent you and your business. Make sure you are optimizing their value by using only high quality images, properly named and tagged on your site.

What is your favorite image editor? What tricks have saved you time when editing your photos?



2 thoughts on “5 Easy Tips To Help You Create Stunning Website Images

Leave a Reply

Your email address will not be published. Required fields are marked *