Editing Web Template Pictures

Setting up the images in your Allwebco template

Images Sticky Note
Pictures used in Allwebco web templates use three different formats. Stock photos use .jpg images. Buttons, icons and shading use .png and .gif files. You can replace any of the included template images and icons, or optionally use the stock photos as they are setup in the download.

Usage note: Stock photos included in your template download can be used for any project, business or personal. You can optionally modify or add to the stock images. There are no restrictions as long as they are being used in your purchased Allwebco template. Images are copyrighted by Allwebco Design Corporation.

Where are the pictures?
All static page images used in the template are located in the "picts" folder and are named according to the page they're on. The home.jpg is the picture on the homepage (index.html). The about.jpg is on the about.htm and so forth. Animated images may be in the jQuery folder.

See the help.html included with your template download for folder locations of images used in the slideshows and gallery, and for menu and icon images.


Sample Montage Image


Editing software
You can edit any of the pictures using graphics software like Photoshop and other graphics programs. Some cameras include editing software and many on-line (cloud) editing programs are available. There are also budget programs like "Photoshop Elements" available on Amazon or at your local computer store or Best Buy.


Editing the images
Follow these steps to replace a template image using the copy and paste method. We'll use the "about.jpg" as an example:
  • Open the template picture you want to change in your graphics software. We'll open the "about.jpg" for this example.
  • Open the new photo you want to use at the same time.
  • Make your new photo height and/or width close to the size of the existing "about.jpg".
  • Do a "select all" on your photo, choose "copy" on the menu.
  • Select the "about.jpg" and choose paste.
  • Save and check your HTML webpage.
  • See gallery copy and paste for more details using this method.
  • See cropping images for a different method.

Image is too long or squished
Many Allwebco templates use long landscape type pictures. Your photo may have a different height to width ratio. You can optionally create a montage type picture as seen above on this page using the copy and paste method outlined in the section above, or you can crop your images using "canvas size" in your graphics software.


Images not updating or not working
You have edited or created a new template image and there are problems saving or the HTML page is not updating with your new image.
  • Refresh your browser.
  • Flatten your image layers in your graphics program before saving the file.
  • The name and folder path to the image are not correct in your HTML page.
  • See images not showing after an edit.

Image types
Allwebco templates use .jpg and .png and .gif images only. We do not support using any other image file types including .tif or .bmp.


Saving GIF images
.gif images are 256 color "indexed" images. If you are creating .gif images or editing template .gif images, you will want to convert the image to RGB, do your edits, then convert the image back to "Indexed Color", then save the image.


JPG saving options
When saving your .jpg images, it is best to choose "high" quality rather than "maximum" for faster webpage load times. Changing the resolution will have no effect on images used in HTML webpages, so the default of "72" will work best. Image resolution is used only for image printing, but not for webpage printing. For the formats: "baseline (standard), baseline optimized and progressive" it's best to save as "baseline (standard)".


Graphics software tips
Be sure to flatten your image, then use the "Save for Web" option if available. Make sure the "optimized" option is checked instead of "progressive".

You may need to experiment with the "Save for Web" or "Quality" options in your graphics software to get the best quality, to file size, to page load speed ratio. Please refer to your graphics program help section for help with saving images for the web.

See also: JPEG at Wikipedia


Note: Save .JPG images as RGB only
Be sure your .jpg and .png images are saved as RGB and not CMYK or lab color. IE and other browsers only support RGB .jpg images. Check under "mode" in your software to convert your images to RGB. For .gif images, convert them to "Indexed Color" or "256" instead of RGB.


What Allwebco uses
The original images used in Allwebco templates are created in Photoshop 3.0 (very old software from 1995 actually). You can sometimes find a copy of this older software at ebay.
  • Allwebco saves ,jpg images at "high" quality. Some smaller images we may save at "Maximum" quality. Large template backgrounds may be saved at "Medium" quality.
  • Resolution is usually 72, the default software setting.
  • As this is older software, there is no "format" option.
  • Photoshop 3.0 does not have a "Save for Web" option.
  • Layered text may not be selectable as text in the PSD files included in the "extras" folder.



Related Topics:
Making tiled images
Changing main image code on the template