Images for the Web

 

Tips for how to properly add text to a photo, and how you should not try to make a small image larger.

 

 

 

 

 

 

Images draw people in. Most of us have spent more time than we’d like to admit browsing photos on Facebook, Pinterest, etc. While your site may not have large photo albums, using a few images can help tell your company’s story. They add visual interest to webpages and help break up large bodies of text.

When we put a physical photo in a frame, we make sure that the image isn’t too big or too small.  The same thing needs to happen with images for the web—the only difference is that we need to think about the frame size in pixels instead of inches.

Many of us aren’t used to thinking about how to fit photos into their online frames because so many websites, such as Facebook, do it for us. However, when loading photos onto your own site, it is important to size your images to fit the frame so that they aren’t too big and slow down your site, or too small and appear pixelated.

Best practices for using images on your site:

Choose photos with an appropriate subject matter.

The images on your site should help explain who you are, what you do, and why the user should care. Always use photos that are relevant to your content and informative to your user.

Start with high-quality images.

Use photos that are in-focus, well lit and professional. It is best to start with high-resolution photos so that you can crop them down to the correct size, instead of trying to blow them up. If you start out with an image that is smaller than the space you are trying fill, it will appear pixelated or stretched. On the other hand, do not try to upload an image that is bigger than what you need. It will not appear sharper; it will only slow down the time it takes for your page to load.

Re-size your images before you upload them.

Figure out the dimensions, in pixels, of the “frame” you are placing the photo in, such as a homepage banner. The content management system (CMS) will often tell you what dimensions the photo needs to be.  Open the photo in the photo-editing software of your choice (Carly recommends the free online photo-editor, picmonkey.com) and crop according to those dimensions.

Sometimes, there isn’t a “frame” with a set size, such as when you’re placing an image on a WYSIWYG page. In this case, it may take some trial and error to figure out the right size. Make sure that the photo doesn’t overpower the text on the page, and add a margin so that there is adequate space between the photo and text (10px should do it).

In some cases, the CMS can be used to resize large images, but it will only change the display size, not the actual file size. Large file sizes will increase the amount of time it takes for a page to load.

Maintain readability when placing text over an image.

Choose an image where there is little to nothing in the space where the text will be (i.e. a big open patch of blue sky or a white wall). Make sure there is enough contrast between the photo and the text. Always crop images so that the text doesn’t cover faces or other key elements in the photo

Make your photos accessible to everyone.

Always include alt tags on images and title tags on images that contain links. This allows people using screen readers to follow visual content. It also aids sighted users in finding their way through a site.

When used correctly, images help people connect with your company and understand what you do. These best practices should help you tell your story with images in a professional, web-friendly manner.

Return to current issue

Let's get the discussion going. Please comment on this article.

About the Author

Polly Thurston is TradeMark Media's UX Designer. She creates design concepts and interface designs on client projects.

Learn More about Polly

Discuss This Article

One Response to “Images for the Web”

  1. Posted July 11th, 2012 at 11:28 am , by Bill Halsell

    Polly, regarding the use of the ALT tag. Best practice for accessibility is that if the image is purely decorative and does not convey any information to a visually-impaired user, have the ALT tag there but leave it blank (alt=”"). This way screen readers don’t pass along text that might not really help the user (alt=”flower”). If you are trying to convey important information, such as a graph, then use an ALT tag that helps convey that information in text. At least that’s the standard I’ve seen, and been taught by accessibility authorities. Hope this is helpful.

Leave a Comment