Photo and Banner Sizes

Picture Information

In general, photos should be as small as possible to speed page-loading. Web users find pixelated images more tolerable than slow web pages. Set jpg images to "progressive" if allowed by your photo editing program.

1. Banner

2. Background

3. Picture beside media products

4. Picture in text box

1. Banner

Heading Banner size for all themes is 960 x 200 pixels.

Attention: the banner image adapts to the size of the screen. For some screen sizes the lower part of the image will be cut off. Don't place important information at the bottom part of the image.

File size: about 20-60 KB.

Hint: Give your banner a helpful file name. Use keywords separated by dashes "My-language-village.jpg" or "My-country-mountains.jpg". The filename won't be visible on your site, but Google uses the file name as keywords to help people find your site. Don't use the word "banner" in the filename.

2. Background

Choose one of the colored backgrounds from the Kalaam Media color packages, upload your own color file, or add a photo background to your site.

Be carefull with big background photos, they increase the loading time of each page considerably.

Small images, 640 x 480 pixels, about 20-30 KB, can be set to "fill browser". Pages load faster with small images. The background of this Kalaam "Help" website is formed from a small grey image with a subtle pattern, set to repeat both horizontally and vertically. Here is the original image:

Grey square

Maximum recommended background size 1220 x 640 pixels, about 100 KB.
Snowy mountain landscape

Use to see what visitors will see when they visit your site. Few visitors will see more than 1" of background image.

File size: Recommended 20-50 Kb.

Hint: if you don't like the background colors available in the Kalaam color options, create a jpg image of the color you want and upload it as background.jpg. A small, single-color jpg file can be as small as 4kb, and can be set to repeat (or "tile") to fill the background area.
Yellow square

3. Picture beside media products

Images used in this location will automatically resize to 400 x 300 pixels, about 120 KB. Best practice is to resize your picture to these dimension before you upload it.

To select a photo for your page, upload it first then edit a site page and select the photo from the "Primary picture for this page" dropdown menu.

If PDF, Audio, or Video products are offered but no Primary Picture is selected, that space will remain empty.

The ideal photo for this area portrays the content of your text or media product in a way that relates to your language community.

4. Pictures in the text box area

It is possible to add pictures in the text area (this page, for example), but this is usually only recommended for photo-gallery pages. Adding a picture to the text box requires inserting it into each translation of a page.

Maximum size for images in the text area is 880 pixels, maximum file size of about 120 KB.