This document is a work in progress. The goal of these guidelines is to have a practical guide so we can contribute to the world wide web in a way that honours web practices and keeps users in the centre of our web publishing. The ROI of doing this is better search engine optimization (SEO), higher traffic, and a better conversion rate, e.g. sales, subscriptions, attendance, contracts, etc.
If you have questions about any of this, don’t hesitate to contact Sherwin.
Uploading images to the website
All images that are uploaded to the website go in the media library. It’s important that all images that are uploaded are:
- resized and compressed,
- legal (and ethical) to use,
- properly edited once uploaded with titles and alternative text
Resized and compressed
Images that are resized and compressed are a smaller number of KB, which helps our pages load faster. Fast loading pages has a huge effect on our SEO and on our conversion rates. Also, by manually resizing and compressing images, our images will look better in the long term.
Most social media platforms like images that are 1200 x 630 pixels. And this is the best size of image for our blog posts.
However, our pages take images that are very wide and 1200 pixels is too short. So using images that are roughly twice this size will work. For example 1800 x 945 or, 2400 x 1260 pixels, will cover the width of the screen on large computers.
That said, the larger the number of pixels is, the higher the number of KB is. The goal is to get the images under 100KB. This can be very difficult with large images, and in order to keep them looking nice, sometimes we have to upload them at 250KB.
We should not be uploading images over 500KB. JPGs are best.
More information and resources for resizing and compressing images.
We need to respect copyright. Copyright is automatic unless rights have been expressly granted. It feels good to know where images come from, and how we’re allowed to use them.
Titles and alternative text
When an image gets uploaded to the media library, there is a way to add some additional information to these images: titles, captions, alternative text, and descriptions.
Captions and descriptions are optional.
Titles and alternative text are not optional. Titles should be simple and aid in finding the image later by search. Alternative text is an important accessibility feature of images on the web, and a long time best practice of HTML and if we don’t add alternative text it will hurt our SEO.
Alternative text, or alt text, is a description of what is in the photo. It’s usually about a sentence. Imagine you are describing the photo over the radio or on the phone. Don’t bother writing, “This is an image of…”, nor “A photo of…”. Ask yourself, if I couldn’t see the photo, what would I want to know about it? Also, if there are words in a photo (which we try to limit) ensure that these words are in the alt text.