Suggested practice
Note: All images are set to a print resolution of 300 pixels/inch for both x and y coordinates.
For web use:
Web pages normally ignore the print resolution and will simply display the image pixels. When complex images are resized to small dimensions there will be a loss of detail and images can appear fuzzy. To get the best resolution possible we recommend the following procedure:
- Decide on the required image size in pixels. For example, let’s assume we want to use the primary horizontal logo and require a vertical size of 100 pixels.
- Now, resize the master image to 3 times this size. IE: We end up with an image of size 535 x 300 px.
- Insert this image in the required place in the web page.
- Now, specify that the image should be shown at one third of it’s actual size:
- In WordPress:
- Click on the image and then on the Edit icon.
- Under Display Settings – Size, select Custom Size. It should show the current image size, ie: 535 x 300. Change the vertical dimension to 100. The horizontal dimension will scale automatically to 178, ie: keeping the aspect ratio constant.
- Click on Update to return to the page. The image should now be the correct size on the page.
- Preview the page. You should now have a reasonably good quality small version of the logo.
- Using your browser controls, view the page at increased zoom factors. You should see the image quality improve as you zoom all the way up to 300%.
- In WordPress:
Sample thumbnails
100px – 200px – 300px
2018 Logos | Horizontal | jpg | png | Vertical | jpg | png |
---|---|---|---|---|---|---|
Full colour | ![]() | 2598x1457 | 2598x1457 | ![]() | 1658x1865 | 1658x1865 |
Full colour, suitable for MS Word letterhead and documents 3 in = 75 mm width | ![]() | 576x323 | ||||
Full colour (no payline) | ![]() | 2598x1384 | 2598x1384 | ![]() | 1647x1689 | - |
B&W | ![]() | 2598x1457 | 2598x1457 | ![]() | 1651x1865 | 1651x1865 |
B&W reverse | ![]() | 2596x1456 | 2596x1456 | ![]() | 1651x1865 | 1651x1865 |
Two tone | ![]() | 2598x1457 | 2598x1457 | ![]() | 1651x1865 | 1651x1865 |
Let's Talk About Cancer | ![]() | 1761x1867 | 1761x1867 | - | - |
Test link 2598×1457-363kB