How To: Making Images Web-Ready
The web is a very visual medium. As such, images can be quite effective on websites. They can immediately convey an idea, feeling, or point. On the flip side, text is often used to explain, but since the web is more of a visual medium it doesn't always work. A ton of text will bog down your website and turn off visitors. Remember – people eat with their eyes first. No matter how delicious – if it doesn't LOOK good, you won't want to eat it. Same thing goes for your website. You have to make sure it's visually appealing, or visitors won't stay long.
And that brings me back to images. In order to maximize the potential of images, there are a few things you need to be aware of.
ACESSIBILITY
When adding images to your website, be aware that some website users may be blind or have bad vision. If you do not make your images accessible, screen reading browsers that interpret websites for people with sight impairments will not read your website descriptively. You can make sure your images are accessible by adding alt text, short for alternative text, which allows you to add a description or explanation. You can add alt text to all images contained within a Rich Text Box on your website. To do that, double click on the image in the Rich Text Box. Toward the bottom of the image property box, there will be an “Alternative Text” field. Type in your alt text there, and save. Sometimes alt text should be descriptive, but other times an explanation is more appropriate. When writing alt text, think about how you can best represent the meaning of the image in words.
SEARCH ENGINE OPTIMIZATION (SEO)
One of the best strategies for driving traffic to your site is to optimize it for search engines. In basic terms, this involves adding descriptive text and titles to non-text elements of your website. The descriptions make it easier for people to find your website when searching online using Google, Yahoo, Bing, or other search engines. Adding descriptions to your images is an essential part of good SEO. Without descriptions, your images become blank and useless to search engines. Like issues of accessibility, adding alt tags (see explanation above) to your images will help resolve SEO obstacles. When using alt text for this purpose, try to incorporate the key words with which you want to be associated with on search engines.
SIZE
Most casual users of the web do not realize that whenever you go to a website, your Internet browser downloads content associated with the page. This includes text, images, and any multimedia embedded in the page (audio, video, flash content, etc.). Because of all the downloading, it can take time for some pages to load. The loading time depends on the Internet connection, the speed of the user's computer, and the amount of things on the page to be downloaded. Text downloads in virtually no time, but images and multimedia can take a lot longer. You want to make sure that the images you use on your website do not slow down the user's computer, and that they appear quickly enough to keep their interest. To do this, you must optimize your images for the web. This is a process of compressing the image to ensure that the file size is as small as possible without degrading the visual quality of the image. You can have a large image that downloads relatively quickly, as long as you make sure to optimize it correctly. To optimize and resize images you need an image editing program, such as Photoshop. For details on how to optimize your images with your image editing program, email me for help.
My #1 Website DON'T for Images is to add a large image and simply rescale rather than resize it. I see this all the time. If your image is too big to fit into an area of your site, there is a proper way of resizing. Many people will simply add a large image into a Rich Text Box and scale it down by dragging the corners in. This can work in a pinch, but the result is a sometimes squished, unclear version of the image. What's worse is that the image is not optimized, and although it may appear small on your screen, your browser still must download the large version of the image. This slows down computers like crazy! The images you get off your digital camera are way too large for the web. They will definitely slow down loading time and could even cost you leads, if website visitors do not have the patience to let them download (I wouldn't wait!).
If you have used the treatment described above for images on your site…email me! I can show you how to optimize images, or even do it for you if you don't have the required software or skills.
That's all for now, stay tuned for more design-related tips and tricks to improve your website!
Authored by: Tara, Client Relations