Tips to make sure that you use appropriate images on your website.
File Size
The larger the file size, the longer it will take for a browser to load on your web page and the longer your visitors will have to wait.
Images on the web should be around 100 KB. If you need to show fine detailed workmanship, then make an exception but as a rule, an image on your website shouldn’t have a file size that’s measured in MB’s (megabytes).
Downloading a photo directly from a digital camera and adding it to the Assets Manager in Your Web Department is a big no-no. These raw digital files are large…too large to add to your website. Many digital cameras produce photos that are around 5-6 MB.
Avoid resizing images manually in the Word Processor
Add your images already in the dimensions they should appear on the page. Manually resizing large images in the editor will make them appear distorted on phones, and the page take a long tie to load. Either resize a large image in a photo editing software program like Photoshop or similar before adding it to the Assets Manager, or use the free PicMonkey editor available there.
Image Size
Image size is the size of the image on the screen. Images on the internet are measured in pixels and the appropriate resolution is 72 ppi (pixels per inch) but is often referred to as dpi (dots per inch). A pixel is a dot on the screen equal to the size of the period at the end of this sentence.
As a rule, try to keep your images small. Even a really large image shouldn’t be larger than 350 – 375 pixels in width or height. Most images though should be kept to a width or height of around 200 pixels.
Below are some sample images to use as a guide.
200 pixels wide and 133 pixels high JPG image
300 pixels wide and 232 pixels high JPG image
375 pixels wide and 248 pixels high JPG image
File types
Not all image file types will display on web pages. The most widely used files types are JPGs and PNGs and GIFs.
Use PNGs for logos
PNGs (preferably) or GIFs should be used for images that:
- Are considered line art. Most logos, for example
- Contain sharp edges such as text
- Contain areas of flat colour
- Require a transparent background (PNGs only)
Use JPGs for photos
JPGs should be used for images that:
- Are photographs or other high colour images
- Contain gradients or subtle colour changes
