Best Practices For Using Images
Choosing the right pictures for your site is one thing. Making them fit the overall look of your site is another thing. How do you make sure the images you're using on your website are professional, attractive and relevant to your product or service?
In this article we will discuss:
Use your own images.
The best images to use on your site are original images that you own or have created, especially if your business relates to a product. Own a catering business? Use high quality, attractive images of your delicious dishes. Selling apparel? Make sure you use photos that really show off the lines and details of your designs. Try to avoid images that are shot with phones and cameras that produce low-quality files.
For image protection options, check out this helpful article elsewhere in our Knowledge Base:
Consider using stock photography.
Sometimes it may be useful or appropriate to use stock images if you don’t have the right images handy. Stock images are photos and other types of images that are commercially available for use, with a variety of restrictions and permissions. Some stock images may require you to purchase a usage license but many are free as long you follow certain usage guidelines.
- Stock Exchange
A note on file names and formats.
Try to avoid using bitmap (BMP) images as much as possible. The bitmap format is one of the earliest image file formats, but isn’t recommended for Internet use since it produces an extremely large file that takes longer to load and consumes bandwidth.
The GIF format is great for line drawings and also supports transparency and animation.
JPG/JPEG is the most widely-used image file type and is primarily used for photographs.
Make sure your file names do not include spaces or characters other than letters, numbers, underscores and hyphens. File names can be changed in your File Manager using the “rename” option in your list of files.
There are many reasons why you may want to edit the images to suit your website. Although Webs includes image-editing tools within the SiteBuilder, you may want to consider editing your images prior to uploading them. A good reason for this may be that you want to create a smaller image size to preserve file storage space and bandwidth, or maybe you don’t want to fire up the SiteBuilder whenever you want to edit an image.
The most widely-used tool for image editing is Photoshop, but for quick, basic image editing there are free, online tools available. A tool like Paint.net is free and has a lot of the basic functionality of Photoshop. You can also use iaza.com for quick, online edits.
Here's a sampling of more free, online editing tools you can also use:
When choosing images for your background, you can take cues from the pre-built template already provided by Webs. You’ll notice that some backgrounds are tiled (repeating) images while others may be a single large image covering the entire background. Depending on the type of template you’re working with, choosing how to implement your background can make a big difference to your overall design.
- Try to avoid using photographs as a tiled background. They tend to be high resolution and do not tile seamlessly.
- Make sure there is a noticeable contrast between background colors/images and your text. Visitors should be able to easily read what you have written.
- Try to avoid using moving images as backgrounds, such as animated GIF files. They can distract from your written content. Your written content is the most important part of your site!
Changing Page Background vs. Changing Template Background
Backgrounds can be changed in two ways:
- On single pages using Page Options in the SiteBuilder.
- For the entire template under Modify Template > Change Background
The single page background will override the one that was defined within the template. When making changes to your template, the Site Designer will default to the Homepage. This means that if your Homepage has its own separate background, you will not see any background changes made for the template.
Remove the background from the Homepage first by editing it normally in your SiteBuilder and going to Page Options and clicking the red button to remove the background. Then return the the Template Editor to make background changes for the site.
For more on customizing your template, check out these helpful articles elsewhere in our Knowledge Base:
- Site Designer | Change Template, Background, Titles, Logos
- How can I get a custom template on Webs?
- Advanced Template Customization
Ever see an image that looks like this on your website?
This means that you have what is called a “broken image link” and the code for the image published to your site does not correspond with the correct file location. This can be caused when an image is moved to a different file directory, renamed or deleted.
If you've recently updated your Primary Site Address or domain, or your custom domain has expired, this may have caused your image files to refer to a file path that is no longer valid, since the older site address is the root address of those files.
If this is the cause of your images no longer appearing, you can simply re-insert these images using the “My Files” option, since the image files are still in your File Manager.
Otherwise, to avoid broken image links, make sure you un-publish any images that you plan to move, change or delete from within your File Manager.
NOTE: This can also affect your Photo Gallery. When creating albums for your Photo Gallery, a corresponding file directory is created in your File Manager to contain those images. If that folder or the files inside are deleted, then these images will not show in your Gallery.
For more on using images on your website, check out these helpful articles elsewhere in our Knowledge Base:
- "How To Manage Broken Images"
- "Introduction to the Photo Gallery"