|Images should||Images should not|
Save images as either .jpg .gif or .png format when using on the web. These are compressed formats so the file size isn't too large and are commonly accessible so users don't need special software to view them. .jpg images need to be in the RGB colour format to display in a web browser. If you use the Save for Web option in Photoshop then your images will be RGB. The CYMK colour format is only for Print and will not display in a web browser such as Internet Explorer or Firefox.
Despite fast broadband speeds, images should still be lightweight. Mobile devices have slower internet speeds and charge a premium for downloads. No one likes to wait for a web page to load and images are usually the largest files on a page.
You should also ensure that the file size is not too large. This is the amount of data that makes up the file is measured in kilobytes (kb) or megabytes (mb), 1000kb = 1mb. Taking an image directly off a digital camera will be far too large to put on a web page.
The Image Browser has a maximum upload limit of 18MB per image, despite this we recommend your images be kept under 300kb each, where possible.
To create images for the web you need to make sure they are the are the optimal height and width dimensions for how the image will be displayed on the page. These dimensions are measured in pixels.
There are image styles designed for different purposes in a website. Commonly, the biggest use would be a Tall Banner on the home page. If you intend to upload an image for Tall Banners, it should be at least the width AND height for Tall Banner; 1140px wide AND 439px high.
If you are uploading images that you know will only be used as thumbnails, the appropriate thumbnail size is 120px by 120px.
For a list of all the available image sizes, see Image Styles.
If you upload an images that is too small, and apply an image style that is bigger than the original uploaded image, the image will be stretched and may have a poor grainy appearance. It is far better that the original is big enough for the software to scale it down.
You can prepare your images to have the appropriate file size and dimension by using software such as Adobe Photoshop (available through ITS) or GIMP (free).
In Adobe Photoshop
There is a video tutorial by Adobe on Save for Web
The typical settings you would need to change are: