Optimise your image

Before uploading your image, you'll want to make sure it has been optimised for web. Put simply, you want to make sure you're using an appropriate file format and that the file size is nice and low, ideally below 100kb.

Choosing a file format

Your file format will make a huge difference to the overall size of the image. Typically, you want to use JPGs wherever possible. The exception is if you are uploading a logo that needs to have a transparent background. At this point, if you have a vector version of the logo then saving it as an SVG is your best bet. If not, a PNG works too. 

Optimising within Photoshop

You can do this easily in Photoshop by using the Save For Web option - CTRL + Shift + Alt + S on Windows, or CMD + Shift + Alt/option + S on a Mac.

Optimising with online tools

Alternatively, you can use online tools such as Tiny PNG or Tiny JPG.

Uploading your image

While creating or editing your page, and while clicked into the part of the page that you want the image to appear, select the image icon from the MSL editor (make sure you're not in Source mode or the option will be greyed out). You'll then see a popup that asks for the image as well as other bits of information about the image.

Choosing an image

Hit the 'browse server' button. Another window will open where you can choose an image. Upload your file and then select it from the list. That window will close and you'll be taken back to the initial popup, where the URL will now be populated.

Alternative text

Here's where you need to provide a description of the image. This is important - users with screen readers will only hear this, and if you don't provide anything then their screen reader won't pick it up. You want your users will screen readers to get as much the same experience as any sighted user, so make sure you put something here. The more descriptive the better!

Those are the only two bits you'll need to fill in. Press OK and your image will be dropped onto the page.

Editing the code

By default, the MSL system will have added a fixed width and height to your image, which isn't great for creating responsive pages. To get rid of it, you'll need to switch into the Source view. 

Your existing image code will look something like the following:

<img src="path-to-image" width="100px" height="100px" alt="Description of image">

You want to get rid of the width and get rid of the height, so that your code looks like this:

<img src="path-to-image" alt="Description of image">

That's it! You're all done.