HomeEditingEditing contentImages › Image sizes and types

Image sizes and types

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
Top of page