Introduction to pictures for websites
Pictures liven up your pages and can help you get your message across. When creating pictures for your site, three important things to keep in mind are size, format and copyright.
Most pictures on the web don't need to be big. In fact, big pictures can have a negative effect on your site, making it slow to use, so it is a good idea to keep pictures to a reasonable size. The SurreyCommunity.info system will automatically resize large pictures for you.
The height and width of pictures on the web is measured in pixels.
To make sure that pictures fit on your pages, the SurreyCommunity.info system will automatically resize large pictures. Any picture wider than 430 pixels will resized so that it is no more than 430 pixels wide.
Although you can resize pictures after you add them to your page, you'll get much better results by using photo editing software to make them the size you want before you add them. Some good sizes to use are:
- 200 pixels by 150 pixels - good size for pictures to liven up your pages. This size works very well with text running alongside the left or right of it.
- 300 pixels by 400 pixels - good size for pictures that people are likely to look at more closely.
Using larger pictures
The original version of your pictures are stored by the system before it re-sizes them. This means that you can use the full sized image on your pages if you want to. If you do, then there are some things that you should keep in mind.
- For most themes, about 1000 pixels is the maximum width for an image to fit comfortably on a page. Any wider than this may cause problems with the layout of your page.
- Large images can take a long time to download - this can be particularly true for mobile phones and slower broadband connections. As well as making your site seem slow, it can eat into the data allowance of anyone browsing your site on a mobile phone.
- Large images are best used sparingly - for impact or if the detail of the image will be important to your visitors. If you want to display a lot of large images then consider adding small thumbnails of the images to your pages and linking from those to the full-sized versions. This will allow your pages to display quickly and still allow people to see the larger images if they want to.
- For an alternative way to display bigger pictures, you could also consider using the our files application or the photo album application.
Pictures can be stored in many different formats (or file types). There are only three that you can use for the web: JPG, GIF and PNG. If your picture is stored in a different format, you'll need to use photo editing software to convert it otherwise visitors to your site may not be able to see it.
- JPG is good for photos. Most cameras, scanners and online photo libraries will produce images in JPG format
- GIF is good for computer generated images such as icons, logos and buttons
- PNG can be used for any type of image (although for photos JPG will often produce a smaller file that is quicker to download). Note though that some older computers can't display PNG so for maximum compatibility you may want to use JPG or GIF instead
Most pictures on the web are copyright. This means that you can't just take them and use them on your website without getting permission from the owner first. You should only use a picture if it matches one of these three conditions:
- the picture has been created by you (so you own the copyright)
- you have permission from the copyright owner to use the picture (either for a payment or for free)
- the picture is not copyright (important: just because an image doesn't display copyright information or the © symbol, that doesn't mean that it is copyright free. You should always assume pictures are copyright unless you can prove otherwise - using a copyright picture without getting permission from the owner can get you into trouble).