Publishing images on the web

A person's hand is visible, writing into a notebook in the sunshine.

Having images that load fast, are well coded, and accessible, can help our webpages sell. Webpages that load fast, are standards compliant, and user friendly, are more findable and shareable, and are more likely to convert users to taking actions like registering for a course, or signing up for our newsletter.

Uploading images to our website

All images that are uploaded to the website go in the media library. It’s important that all images that are uploaded are:

  1. resized and compressed,
  2. legal (and ethical) to use,
  3. properly edited once uploaded with titles and alternative text

01. 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.

The best pixel size for images for our site is 1200 x 630. Most social media platforms like images that are 1200 x 630 pixels. 

The best kb size for images is 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 200KB. We even have some very large images that are 225KB. But for perspective, the average smart phone will take photos these days that are 4MB, or 4,000KB. We should not be uploading images over 250KB.

JPGs are best.

Read more information and resources for resizing and compressing images.

02. Copyright

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.

03. 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 roughly a sentence long. 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 avoide) ensure that these words are in the alt text