Displaying images on your site
Introduction
Several people have been asking me how to display their images. I decided
to expand this site, and make several tutorials. Today, I will show you
how to make your website more professional and appealing by editing images.
Not only will it improve your website's appearance, it will help you sell more product, if that's what your website is about. I will try to make this tutorial simple to understand for the average person. I will try to explain what works for me and why.
So, lets get started. I picked an image of cologne for this tutorial. Lets
pretend that you're selling this product on your website. You have a beautiful
image and a catchy sales copy. Everything looks great and you're taking
orders. A year later your sales drops, not because the cologne is out of
fashion, but because the number of competitors has increased. Like everyone
else you want to sell more, but how? There are other ways to increase sales,
but let's take a look at your webpage layout.
The
images are very important. When creating your website, text and images are
pretty much all you have to work with. If your page has only text, it would
be boring and many people do not want to read. So they scan the text, and
having images on your pages helps your visitors to quickly see what your
page is about. Images work as eye stoppers, but it helps to have the images
related to the text on your page. In other words, try to discard all unnecessary
files that are not related to your website. This will help to keep your
pages neat, relevant, and fast loading.
On the same note, loading time is very important. No one wants to wait forever just to see your pretty graphics. This is why I prefer to use a solid background. Of course, using a fancy gradient will make the image look better, but most people still use slow Internet connections. If you sell products on your website, you can't afford to lose visitors because your pages load too slow. One minute in Internet time is a long, long time. If you really want to use your fancy image, you can display a smaller and faster loading version of the same image, and then link it to a larger one. This way you'll get the visitor, and if they're interested enough, they can click on the thumbnail, and marvel at your larger version in full detail. This is very important and simple to do. This alone will increase your visitors and sales.
Displaying your images
So,
how can we improve the image above and make it better? The most common mistake
that people make is not giving their image breathing room. The text
is too close to the image, and it looks very unprofessional.
Of course you can use tables and layers to align your images on the page
where you want, but here is a easier way you can do the same thing without
the html, and save a couple of seconds in loading time.
An attribute of a professional and clean looking website is to use a white background throughout your pages. So assuming your background is white, now all you have to do is add extra white space around your images, in Photoshop or other software. This will give you a nice margin around your text and because your background is white, you simple don't see it.
The result is a beautiful appearance with minimum effort. In the second picture, I added extra white space to the left and bottom, to keep the image away from the text. Compare the difference with the first image. Click and drag your mouse over the picture to see it's borders.
Professional or Amateur
I would highly recommend hiring a professional photographer to shoot your products, not only because that's what I do and I want your business, but because good images will help you sell more of your products. Just to give you an example, my wife and I are big Ebay fans, and I have to take pictures for our auctions. Ebay is a huge marketplace, and before taking a picture of the item that I'm going to sell, I will study similar items that were already sold. I try to figure out why some items sold higher than others. Most often the reason is because the seller had a better image and description. So that's what we did, and the results were amazing. We had a ten to twenty percent increase in our sales.
Most people on Ebay take their own pictures, and have a limited knowledge
about photography. Often we would get e-mails from Ebay users asking what
kind of camera we used to take such beautiful pictures. The answer is always
- It's not the camera. It's the years of studying and experience. Therefore,
professional images will make you and your website look professional, which
will increase your sales.
In this third picture, we have the same image but without the fancy background.
I erased it to pure white - the same as the background of my page. I added
a price tag for those who don't like to read, and saved them a few minutes
to find out how much this item is.
Very simple and clean, yet - professional, don't you agree?
Software
If you are planning on doing this on your own, I recommend investing in Adobe Photoshop. No other software comes close to it, and every professional photographer or graphic designer uses it. You just can't go without it. The learning curve is steep, but it's fun and exciting once you learn a few tricks. The possibilities of this program are endless.
I hope you enjoy this tutorial, and I will be adding more useful information that will help you improve your website.