Tips On Using Images In Your Website
Images add concrete visual evidence to back up your text.
Whatever you write, it is always less convincing without images.
Numerous studies show that most people are more likely to
believe a story or idea if there is an image accompanying the
story.
Using images in your website can be tricky. Images can brighten
your website or destroy it completely. Many people are skeptical
about using images because of SEO and bandwidth issues. In this
article, I will explain why the worry is unnecessary if images
are used correctly and Intelligently.
Appropriateness A good image captures attention, conveys emotion
and tells a story. An image can make a webpage really effective
not only because of its quality as mentioned, but also how well
it fits into the context of the page. For example, it would not
be appropriate to use black and white images if your site is
about web hosting. Black and white images might work if you use
it in an artistic site.
Technical Issues There are 3 commonly used image formats in the
web today, "Gif", "Jpeg" and "Png". As we want the image size to
be as small as possible, the choice of using the different
formats becomes critical. Gifs are more suitable for images with
lesser colours while jpegs are more suitable for images with a
great range of colours, for example, real life images. The size
of jpeg images can be very small when compressed. Many photo
editing softwares nowsadays have a "save for web" feature which
can compress jpegs efficiently. Gifs on the other hand are very
effective when used as transparent overlays. However, the
quality of Gif overlays is not good. Pngs can produce very high
quality images or transparent overlays but the trade off is
their large file size.
Aesthetics Effective images need to have a focus. Except when
striving for a particular effect, fuzzy, vague or blurry
pictures look unprofessional. There should also not be too many
elements in an image because it distracts the reader from
knowing what the image is about.
A Balance of contrast and brightness is also important. Contrast
is important to make your main character in the image stand out.
For example, if you have a lady in green standing in front of a
forest, the lady will not stand out because of the green. If you
are using a black and white image, not enough contrast makes the
entire image seem gray and washed out. The image should also not
look too dark nor too bright, regardless of the subject matter.
Ocassionally, you might wish to intentionally add a special
effect on your image to create a dramatic effect. Silhouetting
an image can achieve eye-popping results for a minimum amount of
time and money. Ready made filters and special add-on modules
produce startling effect at a touch of a button. Shadows and
gradients can give an image, button or icon a 3d effect which
often makes it stand out prominently in your site. Using special
effects can be tricky because your image will cease to be
special if the effect is used too frequently. One typical
example is the use of shadows and gradients. Many websites are
using it so much so that the reader are focusing more on the
graphics rather than the content. You need to save your best
tricks for occasions that warrant them. In the worst scenario,
people might be pissed off because of the images used in your
website.
Cropping is one of the most powerful tool for improving the
quality and impact of images. Cropping an image trims away
unwanted elements and let you present the reader with only the
most important part of the image. A good crop heightens the
message, impact, and attractiveness of any image.
Lines of Action Each image has its own internal geometry which
can influence the look and feel of a webpage. Imagine every
image you use is telling a story. Like arrows, images can lead
your reader where to focus in your page. For example, if a
person in the image is looking or gesturing in a certain
direction, the reader's eyes will want to follow that gesture.
People are very used to horizontal and vertical lines. Unless
your site about design or creativity, you want the lines of
action in your images to be horizontal or vertical as well. For
example if you have straight objects like flag poles or tall
buildings in your image, you want to make sure that they appear
at a correct angle to the horizon.
Layout Placing images in different areas of your website can
have different effect on the reader. Dominant images tell
readers where to look at first and there should only be one
dominant image in every page. All images used in a page need to
spread out in a balanced way and be placed near to its relevant
content. The spacing around each images is important. Like
words, images need to breath as well. Too many images cluttering
together can have an adverse effect on the reader. Running
several images with a common theme close to each other, and with
sufficient space can impart a sense of movement and guide the
reader's eye to read the content.
Conclusion An image can convey alot more to the reader than a
full page of text and is paramount if you want to the reader to
believe in you. However, you have to be very careful of the
image size and format to use, ie "Gif", "Jpeg" or "Png". Big
image size over 50k can pissed off dialup users easily. Page
elements that draw the most attention also repel the most
attention if used inappropriately.