Images and Optimisation

Overview

The reasons for optimising are at the end.
The steps here cover the following:

  1. Correct file formats for the web.
  2. Correct pixel dimensions for your website.
  3. Smallest file size.

* There a tutorial here for people with Macs who don't have Photoshop.


The Tips

Here are the main tips in brief. There are only two and a half tips, so we're talking really brief.

File formats

With little exception (looking at you, svg), the only file formats for web are jpg and png.

The general rule is: jpeg photos, png logos. To expand on that slightly:

JPEG Photos

Pictures of people and things should be in jpg format.

PNG Logos

Logos and other vector graphics - ie. images with hard-edged graphical elements - should be in png format.

In addition, these logo and graphic images should be at twice their intended size in pixels (4x by area) to account for retina screens.

 


An Exception: Text over a Photo

If you want text over a photo it's best to lay it out on the website by using a jpg pic as the background image to a row or column, then type the text into a module.
It's best not to do your text as part of the image, but if you really have to, then png is the format to use for combined photos and text.

Pixel Size: Imsanity

I would normally advise an upper limit on image size, but in terms of this I've got you covered. I always install a size-limiting plugin called Imsanity (as in Image Insanity) on the websites I build.

This plugin automatically limits the maximum image size which I set based on your website requirements. This prevents overloading the website by uploading huge images.

File Size / Compression

Both types of image should be compressed as much as possible without losing quality. This tip is more of a rule:

Why Optimise?

Website performance - namely the ability of a website to load quickly - is crucial for many reasons. Here are the two most important ones, related as they are:

1. User experience

Firstly, a new visitor to your website will not wait around for the page to load. They will simply leave, and not come back.

2. Search Engine Optimisation (SEO)

Secondly, Google, and other search engines do not like slow websites, mainly for the first reason.

After all, search engines are in the business of ranking websites based on whether it is worth visiting them, so they will give slow loading websites a poor rank, meaning the website will not appear near the top of search results.

Website speed is the top ranking factor. Think of it this way: in an extreme example, a website that is so slow as to not load at all may as well not exist, in which case why should a search engine even list it?

Do NOT follow this link or you will be banned from the site!