Page 

Introduction

The old saying 'a picture is worth a thousand words' remains as true as ever. Pictures and graphics are one of the main reasons for the success of the web and are one of the best ways to make an attractive web site.

There's a dilemma that faces everyone when putting photos on the web. You want nice large, high quality, photos on your web because that makes you website attractive. On the other hand it also makes it slow, which can be very frustrating to your visitors. So how do you solve this dilemma ?

This website will explain everything you need to know about putting pictures and photographs on your website and explain step-by-step how to get the best from your photographs and at the same time de-mystifyies the jargon. It introduces the novel 'Smart Photos' Modules system and demonstrates how to use these on your website and the benefits of this system.

Throughout the website there are highlighted 'golden rules' that if you follow you are almost guaranteed to get the best quality photographs, as well as the fastest possible website

Background

There are just a few basic rules you need to follow in order to get the best from your photos on the web.

Photo file formats

There are dozens of different ways of storing photographs, each with a different file type. However on the web there are just 3 main file formats that are used for graphics, and only one is designed specifically for photographs. This format is the JPG, pronounced 'jay-peg' and has a .JPG or a .JPEG label or file type.

The other two types of file sometimes used for photos, but more often for other types of graphics, are GIF and PNG, rather oddly pronounced 'jif' and 'ping'. These formats are not good for photos because they produce files that are much larger. They are not formats designed for photographs. If you have a photograph that's in GIF or PNG format then convert it to JPG - the Modules photo editor can do this.

GIF and PNG should only be used for other types of web graphics such as illustrations, logos, headings and things like screen pictures.

Size matters

The web can be tediously slow and web graphics and photos are the main culprit. Small is beautiful when it comes to files on the web. The smaller the file the faster your website will download and the better the experience will be for visitors to your website. JPG files are far and away the best way to produce the smallest files while maintaining the best quality. So how big should a typical JPG file be? There's a rule of thumb that says any image much over 30Kbytes is not a good idea.

There's a simple way to estimate how long it will take for a visitor to see a picture. Assume that most users are using a standard modem and typically that means they will be able to download pictures at about 3 Kbytes per second. So a 30K image will take around 10 seconds to view. So you can see why having even a few medium sized photographs can make your website very slow. How big is a 30K byte picture?

A typical example photo, 30K bytes

It follows from this that you should never have too many photos on a single page either. There's another rule of thumb that all good web designers try to stick to and that's to have a web page no more than 50k in total per page if possible. This would mean no more than one medium sized photo per page.

Thumbnails

There is a way around this size dilemma, and that's to use thumbnail photos. These are small photographs that are quick to download, but allow the visitor to click on them to see a larger version. Being really small means their file size is small and so you can have more on your web page without slowing it down. The visitor can then choose to view the photos that interest them, one at a time, and so decide whether or not to view and wait for the big versions of the photo. The Modules 'Smart Photos' will automatically create thumbnail and large versions of the same photo for you website. This is explained in detail later.

Photo resolution

This is one of the trickiest areas and the source of most problems when trying to get photos on the web. Scanning photos is one of the most popular ways of obtaining photos, but scanners have been designed to capture very high resolution images indeed, typically for printing on high resolution printers. High resolution means large file size, and so most typical files from scanners are unsuitable for use on web pages.

The rule of thumb to remember when scanning photos is to scan at around 72dpi to 100 dpi as that's the approximate resolution of your computer screen. So if you have a 5" by 7" photo and you want it to come out about the same size on your web page (which is probably too big to be honest) then scanning at 72dpi will be about right. Typically modern scanners can scan at 300dpi or more and produce huge files. Increasing the resolution can make a huge difference to file sizes. 300 dpi is more than 4 times the 72 dpi resolution, but because a photo is square this results in files than are typically 16 times the size!

The only reason for scanning at resolutions higher than 72 dpi is when you want to enlarge a photo or a part of a photo.

Scanning at over 200 dpi is almost always too high a resolution. If you don't want to bother about resolution and find it all too confusing, then stick with this simple rule of thumb; If you're producing a JPG file that's more than, say 100k, that's almost certainly too big for the web.

When to scan at higher resolutions

If you want to show just a part of a photo, or you plan to use photo thumbnails that open a separate window onto a higher resolution version, then it can make sense to have larger files. Also sometimes it's better to have a larger, higher resolution photo and reduce its size before you use it on the web - this can produce better quality images. The Modules 'Smart Photos' system can accept larger images and reduce them to be the right size for the web.

Pixels - a much simpler way

A more straightforward way of understanding photo sizes is to measure them just by pixel sizes and forget about resolution. At least 80% of all web users are using computer screen of 800 pixels across or more (you can find out exactly what pixel size screens visitors to your website are using with the RealTracker Module). 60% have screen sizes of exactly 800 pixels across, so you can see that making photos larger than 800 pixels across is probably not a good idea.

So how large is a 'typical photo'. There's no such thing of course and it depends on whether you want to use the thumbnail feature or not. But assuming not, then a photo 200 pixels across will take a quarter of the screen width on most computer screens. 400 pixels would be half the screen width and so a guideline would be not more than these values. There's nothing stopping you having photos that fill the entire screen of course - and if you're using the thumbnail technique then the 'enlarged' version might well be that large, but please do not put pictures this large onto a web page that contains text and other items.

JPEG quality & compression

Another confusing area is that JPG files are compressed. In fact the whole benefit of JPG files and the reason for the format being invented was to enable photos to be compressed so they take a fraction of the file space the would otherwise require.

The reason JPG format is better than GIF or PNG format is precisely because they compress much better in this format without losing quality. Most scanning software or digital cameras have a quality or compression control that varies the degree of compression. Too much compression and you lower the quality of the photo (but it makes your website quicker to view). This is the central dilemma mentioned at the start.

To be honest there's no simple answer. You should try to create the smallest file size, which means the highest compression level that produces a photo quality that you can accept. It's not uncommon to find JPG photos that are way larger than necessary because they have not used the optimum compression level. This means a slow website. It's a balance between quality and speed, you want both, but unless your photos are really small you can't have both.

Most photo processing software allows you to control the JPG quality. This is sometimes expressed as a quality level between 1 and 100% and sometimes as a compression level between 1 and 100. These two are usually the same scale but the opposite way round. So a quality level of 75% will be the same thing as a compression level of 25. And this number is nearly always the optimum number.

You might think 100% quality is what you want, but as you can see from the above examples, this is just wasteful and makes for unnecessarily slow download speeds. What's more there is typically no perceptible difference in the quality settings higher than 75%.

Cumulative distortion

This is a result of applying a number of photo operations to the same photo, one after another. Because each time you load and save a JPG photo it distorts very slightly; the more often you do this the worse it gets. Worse, if you perform other operations such as rotating, brightening or even enlarging or reducing a photo this also distorts the image each time the operation is applied. The more you change the photo, the worse it gets.

The solution is to use the original photo always whenever you want to change it - do not use one that you've already altered or changed. Secondly avoid loading an image, doing a few operations on it, then saving it, then loading it again to do some more.

Note: Smart Photos do not suffer from cumulative distortion no matter how many operations you apply.

Design guidelines

In addition to the rules regarding image size above, there are a couple of simple rules that will make your web pages look better.

Golden Rule Try to make photos the same width when used on the same page, especially if they are in a row or column

Golden Rule Put a margin space around your photos of between 5 and 10 pixels. Never allow text to touch right up to the edge of a photo

Smart Photos - a step-by-step tutorial

The web page module system supports what we call 'Smart Photos'. Instead of placing a plain JPG photo file on your web page, by placing a 'Smart Photo module' instead you gain a number of benefits. Smart Photo modules are one of a wide range of different web page modules that you can easily add to any web site.

Smart Photo benefits

	By placing a 'smart photo' on your website you can change the photo afterwards without altering any HTML on your web page, so no more uploads or re-publishing of your website when you want to alter your photos
	Easy to use online photo tools. Enlarge, reduce, crop, rotate, apply effects and enhance you photos in a number of ways
	Optimize the photo for the best balance between quality and download speed
	Thumbnails. Creating thumbnail photos that display a larger version when clicked overcomes one of the basic dilemmas for good web pages. This can be a tedious and complex process that photo Modules simplifies and completely automates
	All the photo tools, and indeed the online photo storage, management and hosting are controlled using a web browser and accessed via a password protected entry. You can access, edit and manage your photos from anywhere in the world. The photo module can be your central management and storage of all your web photos
	Animated photos. You can apply a variety of Java animations to your photos
	All photo editing tools are non-destructive. No matter how much you crop, distort or mess with your photos you can always 'undo' back to the original unmodified photo. Unlike most typical photo processing software your photos do not suffer cumulative distortion
	A number of other benefits such as a mechanism for photo distribution

Select the upload option from your module store

So how do Smart Photos work?

First you upload your photos to your private, password protected, online store. From there you can manage, edit, enhance the photos using the online photo processing tools. When you want to add a photo to your website you select the 'save and publish' option which will return a simple HTML snippet (half a line of HTML). By adding this snippet to your website you are adding a smart photo to your website.

So instead of embedding the actual JPG file into the web page, you embed a small HTML snippet. When your web page is viewed, the snippet turns into the full picture that looks exactly like a normal JPEG picture, except you have the benefits listed above. Below we take you step-by-step through the process of getting your photos online, optimizing, enhancing, creating thumbnails and more.

Obtaining your photo

The first stage is usually the most tricky - you've got to get your photo onto your computer somehow. It's beyond the scope of this article to tell you how to do this since it will depend entirely what what equipment you are using. Typically it will be one of two ways; either from a digital camera or from a flatbed scanner. If you want the very best quality then use a slide scanner to scan your 35mm negatives, although digital cameras are now able to give the best traditional cameras a run for their money - and typically produce better results than scanning a print with a flatbed scanner.

Scanned from an old print, using a good quality flat-bed scanner.

Scanned from the negative with a slide scanner. Unprocessed.

You need to get the photo file in JPG format on your computer. Following the guidelines above, a typical photo might be something like 30K and perhaps 400 pixels across. However because we're going to use the Smart Photo Module we will use a larger photo and use the photo editor facilities to reduce it in size afterwards. Therefore you should aim to create a JPG photo file that's say around 800 pixels across up to approximately 150K is size. If the photo is much larger than this - say 500K or more than 1200 pixels across it will almost certainly be way too large.

Uploading, sideloading or transloading

You've probably never head of the terms sideloading or transloading. They both mean to transfer a file from somewhere on the Internet to another Internet computer. This isn't uploading (transferring a file from your computer to the Internet). It's not downloading (transferring a file from the Internet to your computer) so the terms sideloading or transloading are becoming used.

The Modules system supports all forms.

Uploading

This is the most popular way to get photos from your computer to the web. There are two ways to do this using Modules. If you want to upload a number of photos at once it's quicker to do this from the Module Store. Simply select the Upload option from the Tool menu on the left of the module store.

Alternatively if you want to upload just one photo you can do this directly by creating a new Smart Photo module. Select the 'Create new..' option to create a new Smart Photo. This takes you to a page where you can upload a photo from your hard disc or sideload one from the Internet. To get an image from your hard disc, click the Browse button and find the file you want. Once selected, click Open and then the upload button to transfer the image to the photo editor.

Sideloading

Alternatively you can grab images from any page on the Internet. This is a little more complicated but saves you having to download an image to your hard disc and then upload it again. Before you sideload a photo you need to know its web address. To find the web address of any photo do the following;

Internet Explorer: Open a new browser window and go to the page containing the image you want. Right click on the picture and select the Properties option. This dialog will tell you the basic facts about the photo such as its dimensions and file type (JPEG hopefully), its size and crucially its address. Drag the mouse over the address to highlight it. Copy this text (Ctrl-C) and then paste this web address into the form on the Module upload page (Ctrl-V). Click the upload button and it should transfer the photo directly into the Smart Photo Editor.

Netscape: Open a new browser window and go to the page containing the image. Right click on the photo and select the View Image option. This will show the photo on its own. The web address of the photo is now shown in the main web address field of the browser. Copy this (select it and type Ctrl-C) and then paste this address back into the form on the Modules upload page. Click the upload button and it should transfer the photo directly into the Smart Photo Editor.

Note: It's not possible to sideload images that are within password protected sites. You will have to save those to your disc and then upload such photos.

The smart photo editor

To edit a photo, either just click any previously uploaded photos in your Module Store, or upload a new one as described above. This takes you to the Smart Photo Editor that looks like this;

This is where all the main photo processing controls are. You can see the photo you just selected at the top of the screen. Its vital statistics are immediately below the picture. Under this there are 5 tabs that display 5 sets of controls.

Cropping

I want to crop this picture to show only the woman on the left, and to crop the edges a bit to remove the black edges. The photo is cropped by selecting the second 'crop & margins' tab and setting margin values in from the edges of the image. In this case I want to lose most of the right half of the picture so I set a large right margin. I can specify the margins in two ways, either as pixels or as a percentage. The latter is probably easier, and in this case I guess it's about 40% of the way in from the right margin, so I set a value of 40. For the left and bottom margins I want to crop a tiny amount so I set those to just 2%. Click Preview Changes and the image is cropped. Cropping usually requires a bit of trial and error.

Once I've cropped my photo I want to set a margin around the outside of the photo. This prevents text from touching the photo which always looks better on the web page. Here's the final result.

For the best quality it's always better to reduce pictures rather than enlarge them. Note the guidelines given earlier about what size images should be. With the Smart Photo editor you can re-size images in two ways - either by entering a percentage scale factor (where 100% is the original size of the uploaded photo) or by entering the exact pixel width you want the image to be. The photo above has been re-sized to be exactly 250 pixels wide.

Rotating

You can rotate the image by any angle, although if you rotate anything other than 90 degrees you have to get the background colour right. See this example;

The Stawberry image is rotated by 15%

If this photo is placed on a web page that does not have a white background you can see there would be white sections around the image. This is because JPG images are always rectangular and when you rotate a photo it rotates within the normal rectangle bounds. Therefore it's necessary to set the background color to match that of your web page in order to make the photo appear a seamless part of the page. You can do this by selecting the 'color effects' tab. The color options will be described later.

Optimizing photos

This means giving your photos the optimum balance between quality and file size. Remember the key issue for photos on the web is to have the fastest possible download speed - you do not want your visitors waiting. Yet at the same time you obviously want the highest quality you can achieve. The only way to do this is via a bit of trail and error, by trying different quality settings and keeping an eye on the file size.

Here are the four examples of different quality settings again.

On the Smart Photo Editor you can alter the image quality from the 'image adjustments' tab. Typically a 75% quality is good enough but you may find that a lower setting still produces an acceptable picture quality, but with a much smaller file size. The smaller the file, the better your website and the more likely your visitors will stay.

The quality and other controls of the Smart Photo Editor

Enhancing photos

Almost all photos can be improved. The Smart Photo editor provides the basic tools for doing this, namely controls over the color, brightness, contrast and most importantly the sharpness. In the end the quality of the original photo is the main determining factor. You can enhance most photos, but if the original is poor quality then you're never going to be able to make it look great.

Sharpening

It's rare that that some slight sharpening doesn't improve and image. However you need to be careful with this control not to overdo it. Over-sharpened images look grainy, and they also make the file size larger. It's unusual that an image needs more than about 115% sharpening - the following example is over-sharpened at 150%, but it doesn't look too bad because the image has been reduced in size so much.

Color effects

Sometimes you can make your site more striking by adding color effects to your photos. The Smart Photo Editor support two basic effects; Duotone and color tinting.

A Duotone is like a black and white photo (it has two colors) except that the colors don't have to be black and white. A very common effect is to create a sepia effect but sometimes it's more interesting to use others colors.

To create this effect in the Photo Editor, go to the 'color effects' tab and select the Duotone option. You will see that there are 3 colors listed beside the color swatch. To create this blue duotone effect, click on a dark blue color to set the 'dark color'. Often this is enough. If you want to experiment you can also alter the 'Light color'. Click the 'Light Color' option to select it, and now click another, ideally very pale, color. You can also see this is where you can alter the background color (which would be required if you rotate a photo or make it transparent).

Colour Tinting

The Tint color effect simulates looking through stained glass, or a colored lens. So to see what your photo would look like through pure red glass, set the tint amount to 100% and click on a pure red color. More useful results can be obtained by making subtle use of this feature with much lower tint amount. The above examples use a tint of the shown color, set to 25%. The effect, when used with relatively low tint amounts, can be likenend to the subject be shown in a different light.

In use this effect, select the Tint option and then set a Tint percentage. With a 0% Tint amount you will see no effect. You can make the effect as strong as you like up to 100%.

Thumbnails

It was mentioned earlier that using thumbnails is one way around the central dilemma of using photos on the web. Instead of placing a normal or large sized photo on your web page, place a smaller thumbnail image, that when clicked on, opens a window showing a much larger version.

This gives you the best of both worlds - the fast web page, and at the same time the option to include much larger, more detailed photos. Those visitors wanting to see the larger photos then have the option to see these without slowing down the entire web site. This is great for product shots where visitors can see nice large high-resolution images of the product you're selling by clicking on the thumbnail.

Using traditional web authoring tools to create thumbnails can be a time-consuming and complex process. You have to create two versions of the photo, and create a separate web page to hold the larger image, and then link the first image to open the second page. If you want this to pop-up a secondary window it gets more complicated still. Finally you have to upload the photo files and HTML to your web server. All this can be avoided using the Smart Photo thumbnail feature.

To create a thumbnail, go to the 'linking & thumbnail' tab and simply select the Thumbnail option. You will immediately see the system previews a small version of your photo and if you click this, it will show a larger version in a pop-up window. This is exactly how it will behave on your website.

How do visitors know they can click on the photo to see a larger one? The best answer of course is to tell them in the text, but with this system you can set the mouse-over pop-up text to give them a suitable prompt. Hold the mouse over the example images to the left to see an example. If the large versions of these examples were included on the page it would probably take a minute or two before the page was loaded.

You can alter the size of both the thumbnail and the large photo. Once you've created a thumbnail you'll notice the Photo properties shown under the preview image include the size details of both the small and large version of the photo.

One important point to realise is that all photo operations apply to both the thumbnail and large version. So, for example, if you alter the crop, rotation or size of one, the other will change as well. The thumbnail really is an exact small copy of the larger photo.

Putting your photos on the web

So how do you put a Smart Photo on your website? It's easy. Within the Smart Photo editor there's a Save and Publish button. Clicking that will present you with a small snippet of HTML. All you need to do is use this HTML on your website and the photo will appear when you preview or publish the page. You do not have to download any images to your hard disc or upload them again to your web server.

Pretty much every web authoring tool allows you to embed HTML into your website.

Microsoft FrontPage
One of the most popular web authoring tools around, to add a module to your web page, place the cursor where you want the Smart Photo to go and select the Insert Menu, then Advanced and HTML. You get a small text box in which you paste the HTML snippet, and that's it. You may want to select the View-->Reveal Tags option to see where the modules are. You can preview the page, as usual, by selecting the Preview tab at the bottom of the screen.

For other web authoring software refer to the instructions for the product. This webpage has instructions for a range of other web authoring tools: http://help.zymodules.com/insert.htm

If you made a thumbnail smart photo module then you can click it to see it open a new window with the large photo.

You can now take advantage of some of the other unique Smart Photo features such as the ability to alter or update your photo from anywhere.

Remote update

Because the original Smart Photo resides on Xara Online servers, and there is just a reference from your web page to the photo, it's possible to edit, or change the photo altogether, without touching your website HTML. What this means is that you do not have to use your web authoring tool, or alter the HTML or upload new HTML in order to change your photo (this same advantage applies to all Modules).

In order to change the photo once it's on the web, simply go to www.xaraonline.com and enter your username (your email address) and password and you can then access all your photos and edit them. (This does not apply to web authoring systems that directly include Modules). Any that are already published on web pages can be updated and you just need to refresh the web page with them on to see the new picture.

Instant Edit

Alternatively there is a short-cut that allows you to edit the photo directly from your website. Immediately below every smart photo is a small invisible 'edit' region. Moving the mouse pointer over this region and pressing the Ctrl key down and clicking will take you directly to the editor for this photo (after asking for your username and password), where you can alter the picture. Clicking Save & Publish will now update the photo on your website. Certainly this is a lot easier than editing your web page HTML, uploading or re-publishing your HTML to your servers etc.

Hold your mouse pointer under the module to see the message

Performance

Some people ask whether having the photo served from a different web server slows down their website. The answer is no, it usually makes no difference. In some situations it can even improve the performance of your website. Firstly remember that all photos on all websites have to be fetched from the actual web page. It's very common that content, photos and graphics come from a variety of different servers and different addresses - that's the power of the web. Not only do different web pages come from anywhere in the world, but different parts of a single web page can also come from different servers, and those servers can be anywhere.

The Xara Online servers are located directly on the Internet backbone and major network operation centres around the world. This means the highest performance and typically better than many ISP or company servers that are on the end of a leased line. So while you may think you get access to your website quickly - that's not always how other people see it. So it's possible that if you're hosting your web page with an ISP that does not offer fast global access, or one that's maxed out (popular community hosting websites can be very slow at certain times of the day), then in these situations it's quite likely that visitors will see the photos on your website faster from the Xara Online servers than from your ISP servers.

Click here to sign up for Xara Modules.